Skip to content
This repository has been archived by the owner on Mar 22, 2022. It is now read-only.

Latest commit

 

History

History
116 lines (93 loc) · 3.82 KB

README.md

File metadata and controls

116 lines (93 loc) · 3.82 KB
Raw

🚀 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