Skip to content
Nuxt.js Serverless SSR Starter on AWS (Lambda + API Gateway + S3) with Serverless Framework
JavaScript Vue TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src update landing and README.md Jun 11, 2019
static
.env.development complete deployment test Jun 11, 2019
.env.production
.gitignore
README.md update README.md Sep 20, 2019
app.js refactoring Jun 13, 2019
nuxt.config.js
package.json
server.js refactoring Jun 13, 2019
serverless.js fix typo Jun 14, 2019
serverless.yml Revert "downgrade to nodejs8.10" Jun 14, 2019
tsconfig.json
tslint.json complete deployment test Jun 11, 2019
webpack.config.js
yarn.lock Merge pull request #10 from tonyfromundefined/dependabot/npm_and_yarn… Sep 20, 2019

README.md

🚀 Nuxt.js SSR on AWS Serverless Stack (Lambda + API Gateway + S3)

Nuxt.js Serverless Server-side Rendering Starter on AWS Serverless Stack (Lambda + API Gateway + S3) with Serverless Framework

Pre-Installed

  • Nuxt.js 2.8.1
  • Serverless Framework
  • TypeScript
  • Sass (SCSS)
  • TSLint

If you have a feature request, please create a new issue. And also, pull requests are always welcome🙏

Caution

  • Libraries that are used in the client should be included in the devDependencies for Bundle size optimization. (because of Lambda Limit)
  • If you install a module for nuxt.js, it must be in a the dependencies not devDependencies
  • Auto generated URL https://*.execute-api.{region}.amazonaws.com/{stage}/ will result in a JavaScript error. (routing problem) Please use the Custom Domain.
  • If you encounter Cannot GET / error message, the error log can be founded in the AWS CloudWatch.

Pre-requisites

  • 🔑 IAM Account for Serverless framework (Requires pre-configuration using aws configure)
$ aws configure

Configuration

Edit serverless.yml

service: nuxt-serverless  # 1. Edit whole service name

plugins:
  - serverless-s3-sync
  - serverless-apigw-binary
  - serverless-dotenv-plugin

package:
  individually: true
  excludeDevDependencies: true

provider:
  name: aws
  runtime: nodejs10.x
  stage: ${opt:stage, 'dev'}
  region: us-east-1  # 2. Edit AWS region name

custom:
  #######################################
  # Unique ID included in resource names.
  # Replace it with a random value for every first distribution.
  # https://www.random.org/strings/?num=1&len=6&digits=on&loweralpha=on&unique=on&format=html&rnd=new
  stackId: abcdef  # 3. Update Random Stack ID
  #######################################

  buckets:
    ASSETS_BUCKET_NAME: ${self:service}-${self:custom.stackId}-${self:provider.stage}-assets
    STATIC_BUCKET_NAME: ${self:service}-${self:custom.stackId}-${self:provider.stage}-static
  s3Sync:
    - bucketName: ${self:custom.buckets.ASSETS_BUCKET_NAME}
      localDir: .nuxt/dist/client
    - bucketName: ${self:custom.buckets.STATIC_BUCKET_NAME}
      localDir: static
  apigwBinary:
    types:
      - '*/*'

Build Setup

# Install dependencies
$ yarn

# Serve develop server at localhost:3000 using Nuxt.js
$ yarn dev

# Build
$ yarn build

# Prod server start with built assets
$ yarn start

## SERVERLESS DEPLOYMENT ##
# Build and deploy the function and bundled assets
$ yarn deploy:dev
$ yarn deploy:stage
$ yarn deploy:prod

# Remove Deployment
$ yarn undeploy:dev
$ yarn undeploy:stage
$ yarn undeploy:prod

Environment Variables

  • update .env.development, .env.production.
  • If env variable key started with NUXT_APP, it injected to client in this.$store.state.environments.
  • WARNING!: Untrack the .env.development and the .env.production before commit

Folder Structure

  • /api: You can create a sub-API based on Express.js. dynamic ajax Set-Cookie is mainly used.

    Let the URL be a * .json to distinguish it from the REST API that returns JSON.

  • /pages: File-based page routing. All ts files in /pages are only alias with export {default} to /services/${serviceName}/pages/**. all implementations should be done inside /services.

    export { default } from '~/services/home/pages/index'
  • /services: The application is divided into several services and should be implemented in a folder named by service name. (Example: /home, /auth, ...)

    • Inside a Service: /components, /queries, /pages, /helpers, /types, ...
  • /store: One Store that is globally used.

  • /types: Declare only .d.ts. The type used for each service should be stored in `/types' in each service.

To-do

  • optimize the lambda capacity (create SSR bundle with no dependencies)
  • static file serve
  • gzip Compression
You can’t perform that action at this time.