├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── ci-config.sample.txt
├── env
    └── .env.local
├── lambda.js
├── models
    └── Dog.js
├── next.config.js
├── package.json
├── pages
    ├── _document.js
    └── index.js
├── server.js
├── serverless-vpc-variables.yml
├── serverless.yml
├── static
    ├── images
    │   └── bg.jpeg
    └── scss
    │   └── main.scss
└── yarn.lock


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "extends": "airbnb",
 3 |   "parser": "babel-eslint",
 4 |   "globals": {
 5 |     "window": "window",
 6 |   },
 7 |   "rules": {
 8 |     "max-len": 'off',
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | .sass-cache/
63 | .serverless
64 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Belong
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nextjs-serverless
 2 | Deploying a next JS site to serverless.
 3 | 
 4 | ### Running it locally
 5 | 
 6 | First install the dependencies
 7 | ```
 8 | yarn install
 9 | ```
10 | 
11 | You will also need to install [DynamoDB locally](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/DynamoDBLocal.DownloadingAndRunning.html).
12 | 
13 | To start DynamoDB run,
14 | ```
15 | java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar -sharedDb
16 | ```
17 | For Development,
18 | ```
19 | yarn run dev
20 | ```
21 | 
22 | 
23 | ### Deploying it on Lambda
24 | 
25 | Ensure you populate the serverless-vpc-variables.yml file with
26 | the values from your infrastucture against the various variables
27 | defined.
28 | 
29 | 
30 | Creating a domain.
31 | ```
32 | serverless create_domain --stage staging
33 | ```
34 | It might take about 40 minutes for the domain to initialize.
35 | 
36 | 
37 | Post that, deploy the serverless stack using the command
38 | ```
39 | SLS_DEBUG=* serverless deploy --stage staging # For staging
40 | SLS_DEBUG=* serverless deploy --stage production # For production
41 | ```
42 | 


--------------------------------------------------------------------------------
/ci-config.sample.txt:
--------------------------------------------------------------------------------
1 | # Test
2 | yarn run lint
3 | 
4 | # Deployment
5 | s3Upload /static
6 | serverless deploy --stage stage_name --staticPath s3Url
7 | 


--------------------------------------------------------------------------------
/env/.env.local:
--------------------------------------------------------------------------------
1 | AWS_ACCESS_KEY='access_key'
2 | AWS_ACCESS_SECRET='secret'
3 | SERVICE_AWS_REGION='ap-south-1'
4 | DB_PREFIX='APP_NAMESPACE_'
5 | # The path to S3 bucket/CDN for serving static assets. Leave empty for dev env.
6 | STATIC_PATH=''
7 | 


--------------------------------------------------------------------------------
/lambda.js:
--------------------------------------------------------------------------------
 1 | const awsServerlessExpress = require('aws-serverless-express');
 2 | const app = require('./server');
 3 | 
 4 | const binaryMimeTypes = [
 5 |   '*/*'
 6 | ];
 7 | 
 8 | const server = awsServerlessExpress.createServer(app, null, binaryMimeTypes);
 9 | 
10 | exports.handler = (event, context) => awsServerlessExpress.proxy(server, event, context);
11 | 


--------------------------------------------------------------------------------
/models/Dog.js:
--------------------------------------------------------------------------------
 1 | const dynamoose = require('dynamoose');
 2 | 
 3 | const dogSchema = new dynamoose.Schema({
 4 |   breed: {
 5 |     hashKey: true,
 6 |     type: String,
 7 |     required: true,
 8 |   },
 9 |   name: {
10 |     rangeKey: true,
11 |     type: String,
12 |     required: true,
13 |   },
14 | }, {
15 |   timestamps: true,
16 |   throughput: 5,
17 |   useNativeBooleans: true,
18 |   useDocumentTypes: true,
19 | });
20 | 
21 | module.exports = dynamoose.model(`${process.env.DB_PREFIX}Dog`, dogSchema);
22 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | // next.config.js
 2 | const path = require('path');
 3 | const withSass = require('@zeit/next-sass');
 4 | require('dotenv').config({ path: path.resolve(__dirname, `./env/${process.env.ENV_FILE}`) });
 5 | 
 6 | const { STATIC_PATH } = process.env;
 7 | 
 8 | module.exports = Object.assign(
 9 |   {},
10 |   withSass(),
11 |   {
12 |     publicRuntimeConfig: {
13 |       STATIC_PATH,
14 |     },
15 |   }
16 | );
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-serverless",
 3 |   "version": "1.0.0",
 4 |   "description": "Simple setup to deploy nextjs with express to lambda",
 5 |   "main": "index.js",
 6 |   "repository": "https://github.com/belongco/nextjs-serverless-setup.git",
 7 |   "contributors": [
 8 |     {
 9 |       "name": "Vivek Kaarthek",
10 |       "email": "kaarthek@belong.co"
11 |     },
12 |     {
13 |       "name": "Phani Kumar",
14 |       "email": "phani@belong.co"
15 |     }
16 |   ],
17 |   "license": "MIT",
18 |   "scripts": {
19 |     "lint": "eslint --fix pages/",
20 |     "build": "next build",
21 |     "dev": "ENV_FILE=.env.local NODE_ENV=development node server.js"
22 |   },
23 |   "dependencies": {
24 |     "@zeit/next-sass": "^0.2.0",
25 |     "aws-serverless-express": "^3.2.0",
26 |     "dotenv": "^5.0.1",
27 |     "dynamoose": "^0.8.7",
28 |     "express": "^4.16.3",
29 |     "next": "5.1.0",
30 |     "node-sass": "^4.9.0",
31 |     "prop-types": "^15.6.1",
32 |     "react": "^16.3.2",
33 |     "react-dom": "^16.3.2",
34 |     "serverless-apigw-binary": "^0.4.4",
35 |     "serverless-apigwy-binary": "^0.1.0",
36 |     "serverless-domain-manager": "^2.4.0",
37 |     "serverless-http": "^1.5.5"
38 |   },
39 |   "devDependencies": {
40 |     "babel-eslint": "^8.2.3",
41 |     "eslint": "^4.19.1",
42 |     "eslint-config-airbnb": "^16.1.0",
43 |     "eslint-plugin-import": "^2.12.0",
44 |     "eslint-plugin-jsx-a11y": "^6.0.3",
45 |     "eslint-plugin-react": "^7.8.2",
46 |     "serverless": "1.27.3"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Main, NextScript } from 'next/document';
 2 | 
 3 | 
 4 | export default class DocumentWrapper extends Document {
 5 |   render() {
 6 |     return (
 7 |       <html>
 8 |         <Head>
 9 |           <meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
10 |           <title>NextJS | Serverless | Express</title>
11 |           <link rel="stylesheet" href="/_next/static/style.css" />
12 |           <link rel="icon" type="image/png" href="/static/images/favicon.png" />
13 |         </Head>
14 |         <body>
15 |           <Main />
16 |           <NextScript />
17 |         </body>
18 |       </html>
19 |     );
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import '../static/scss/main.scss';
 3 | import getConfig from 'next/config';
 4 | 
 5 | const { publicRuntimeConfig } = getConfig();
 6 | const { STATIC_PATH } = publicRuntimeConfig;
 7 | 
 8 | export default () => (
 9 |   <div className="index">
10 |     <img src={`${STATIC_PATH}/static/images/bg.jpeg`} alt="Background" className="index__img"/>
11 |     <h1>next.js | express | serverless</h1>
12 |     <ul>
13 |       <li>
14 |         <a target="_blank" href="/api/mock-dog-create">Create Dogs</a>
15 |       </li>
16 |       <li>
17 |         <a target="_blank" href="/api/dog/terrier">Get terrier</a>
18 |       </li>
19 |     </ul>
20 |   </div>
21 | );
22 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const next = require('next');
 3 | const path = require('path');
 4 | const dynamoose = require('dynamoose');
 5 | 
 6 | if (process.env.NODE_ENV === 'development') {
 7 |   require('dotenv').config({ path: path.resolve(__dirname, `./env/${process.env.ENV_FILE}`) });
 8 | }
 9 | 
10 | // Configure Dynamoose
11 | // The accessKeyId & secretAccessKey can be made avaialble via the IAMRole
12 | dynamoose.AWS.config.update({
13 |   region: process.env.SERVICE_AWS_REGION,
14 | });
15 | 
16 | 
17 | if (process.env.NODE_ENV === 'development') {
18 |   /*
19 |     For development environment, atleast with dynamoose library,
20 |     you need to pass mock access key & secret.
21 |   */
22 |   dynamoose.AWS.config.update({
23 |     accessKeyId: process.env.AWS_ACCESS_KEY,
24 |     secretAccessKey: process.env.AWS_ACCESS_SECRET,
25 |     region: process.env.SERVICE_AWS_REGION,
26 |   });
27 |   dynamoose.local('http://localhost:8000');
28 | }
29 | 
30 | const port = parseInt(process.env.PORT, 10) || 3000;
31 | const dev = process.env.NODE_ENV !== 'production';
32 | const app = next({ dev });
33 | const handle = app.getRequestHandler();
34 | 
35 | const Dog = require('./models/Dog');
36 | 
37 | function createServer() {
38 |   const server = express();
39 | 
40 |   server.get('/api/dog/:breed', async (req, res) => {
41 |     const { breed } = req.params;
42 |     try {
43 |       const dogData = await Dog.query('breed').eq(breed).exec();
44 | 
45 |       res.send({ s: 'success', d: dogData });
46 |     } catch (e) {
47 |       res.status(500).send({ s: 'error', m: e.message });
48 |     }
49 |   });
50 | 
51 |   server.get('/api/mock-dog-create/', async (req, res) => {
52 |     try {
53 |       const dogs = [{
54 |         name: 'Ollie',
55 |         breed: 'terrier',
56 |       }, {
57 |         name: 'Maxi',
58 |         breed: 'labrador',
59 |       }, {
60 |         name: 'Rio',
61 |         breed: 'border_collie',
62 |       }];
63 | 
64 |       await Dog.batchPut(dogs);
65 | 
66 |       res.send({ s: 'success', m: 'Dogs created successfully', d: dogs });
67 |     } catch (e) {
68 |       res.status(500).send({ s: 'error', m: e.message });
69 |     }
70 |   });
71 | 
72 |   server.get('*', (req, res) => (handle(req, res)));
73 | 
74 |   return server;
75 | }
76 | 
77 | if (dev) {
78 |   app.prepare().then(() => {
79 |     const server = createServer();
80 | 
81 |     server.listen(port, (err) => {
82 |       if (err) throw err;
83 |       console.log(`> Ready on http://localhost:${port}`);
84 |     });
85 |   });
86 | } else {
87 |   const server = createServer();
88 | 
89 |   module.exports = server;
90 | }
91 | 


--------------------------------------------------------------------------------
/serverless-vpc-variables.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | 
 3 | serviceName: "dog"
 4 | baseDomain: "domain.io"
 5 | region: "ap-southeast-1"
 6 | accountId: "111111111111"
 7 | 
 8 | subnetId:
 9 |   staging:
10 |     - "subnet-aaaaaaaa"
11 |     - "subnet-bbbbbbbb"
12 |   production:
13 |     - "subnet-cccccccc"
14 |     - "subnet-dddddddd"
15 | 
16 | securityGroup:
17 |   staging:
18 |     - "sg-eeeeeeee"
19 |   production:
20 |     - "sg-ffffffff"
21 | 


--------------------------------------------------------------------------------
/serverless.yml:
--------------------------------------------------------------------------------
 1 | service: ${file(./serverless-vpc-variables.yml):serviceName}
 2 | 
 3 | 
 4 | plugins:
 5 |   - serverless-domain-manager
 6 |   - serverless-apigw-binary
 7 |   - serverless-apigwy-binary
 8 | 
 9 | 
10 | custom:
11 |   region: ${file(./serverless-vpc-variables.yml):region}
12 |   accountId: ${file(./serverless-vpc-variables.yml):accountId}
13 |   domain:
14 |     staging: staging-${self:service}.${file(./serverless-vpc-variables.yml):baseDomain}
15 |     production: production-${self:service}.${file(./serverless-vpc-variables.yml):baseDomain}
16 |   subnetId:
17 |     staging: ${file(./serverless-vpc-variables.yml):subnetId.staging}
18 |     production: ${file(./serverless-vpc-variables.yml):subnetId.production}
19 |   securityGroup:
20 |     staging: ${file(./serverless-vpc-variables.yml):securityGroup.staging}
21 |     production: ${file(./serverless-vpc-variables.yml):securityGroup.production}
22 |   customDomain:
23 |     basePath: ''
24 |     domainName: ${self:custom.domain.${opt:stage}}
25 |     certificateName: '*.${file(./serverless-vpc-variables.yml):baseDomain}'
26 |     stage: ${opt:stage}
27 |     createRoute53Record: true
28 |   apigwBinary:
29 |     types:
30 |       - '*/*'
31 | 
32 | 
33 | provider:
34 |   name: aws
35 |   runtime: nodejs8.10
36 |   region: ${file(./serverless-vpc-variables.yml):region}
37 |   memorySize: 128
38 |   environment:
39 |     DB_PREFIX: "${opt:stage}_${self:service}_"
40 |     SERVICE_AWS_REGION: "${file(./serverless-vpc-variables.yml):region}"
41 |     NODE_ENV: 'production'
42 |     STATIC_PATH: ''
43 |   iamRoleStatements:
44 |     - Effect: "Allow"
45 |       Action:
46 |         - "dynamodb:BatchGetItem"
47 |         - "dynamodb:BatchWriteItem"
48 |         - "dynamodb:DeleteItem"
49 |         - "dynamodb:DescribeTimeToLive"
50 |         - "dynamodb:GetItem"
51 |         - "dynamodb:GetRecords"
52 |         - "dynamodb:GetShardIterator"
53 |         - "dynamodb:PutItem"
54 |         - "dynamodb:Query"
55 |         - "dynamodb:Scan"
56 |         - "dynamodb:UpdateItem"
57 |         - "dynamodb:UpdateTable"
58 |       Resource: "arn:aws:dynamodb:${self:custom.region}:${self:custom.accountId}:table/${opt:stage}_${self:service}_*"
59 |     - Effect: "Allow"
60 |       Action:
61 |         - "dynamodb:CreateTable"
62 |         - "dynamodb:DescribeTable"
63 |         - "dynamodb:ListTables"
64 |       Resource: "*"
65 | 
66 | 
67 | 
68 | functions:
69 |   app:
70 |     handler: lambda.handler
71 |     vpc:
72 |       securityGroupIds: ${self:custom.securityGroup.${opt:stage}}
73 |       subnetIds: ${self:custom.subnetId.${opt:stage}}
74 |     events:
75 |       - http:
76 |           method: ANY
77 |           path: /
78 |           contentHandling: CONVERT_TO_BINARY
79 |       - http:
80 |           method: ANY
81 |           path: '{proxy+}'
82 |           contentHandling: CONVERT_TO_BINARY
83 | 


--------------------------------------------------------------------------------
/static/images/bg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/belongco/nextjs-serverless-setup/4684d71be40a585a58b230a98bd05380e1d0f97a/static/images/bg.jpeg


--------------------------------------------------------------------------------
/static/scss/main.scss:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   background: #ffffff;
 3 |   color: #2c2c54;
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 7 |   height: 100%;
 8 | }
 9 | 
10 | .index {
11 |   display: flex;
12 |   align-items: center;
13 |   justify-content: center;
14 |   flex-direction: column;
15 |   padding: 20px;
16 |   &__img {
17 |     max-width: 600px;
18 |     margin: 0 auto;
19 |     border-radius: 4px;
20 |     box-shadow: 0 0 15px 1px rgba(0,0,0,0.2), 0 0 20px 5px rgba(0,0,0,0.1);
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------