Nuxt on AWS(Lambda + S3) with Serverless Framework.

If you don't have a Nuxt project already, let's create it first. If you have already installed a Nuxt project, you can skip the following.

Nuxt Official : Installation

Install the plug-in in the project directory.

cd my-nuxt-project
npm i serverless-nuxt

Important

Lambda has a maximum file size of 256 MB. (cf. AWS Lambda Limits) You will need to delete the package files you need during the build process. There is a good package for this.

npm i nuxt-start
npm i nuxt -D

We will touch a total of 3 files. Very easy.

• serverless.yml
• handler.js
• nuxt.config.js

Once you've used the Serverless framework, it's easier. It is helpful to read the Manual once.

Add the serverless.yml file. The my-nuxt-project part is set to your project name. Use the Cloud Formations to upload assets(.nuxt/dist/client) files to the AWS S3 repository. If you have an S3 repository already created, remove Cloud Formation information(resources section).

Write your plugin settings in the custom.nuxt field. The version(custom.nuxt.version) is used as a prefix when uploading assets files to S3. For more options, please see here.

service:
  name: my-nuxt-project

plugins:
  - serverless-nuxt/plugin

resources:
  Resources:
    AssetsBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.nuxt.bucketName}
        CorsConfiguration:
          CorsRules:
            - AllowedMethods:
              - GET
              - HEAD
              AllowedOrigins:
              - "*"

provider:
  name: aws
  stage: ${opt:stage, 'dev'}
  runtime: nodejs8.10
  environment:
    NODE_ENV: ${file(.env.${self:provider.stage}.yml):NODE_ENV}

custom:
  nuxt:
    version: v0.0.1-alpha
    bucketName: my-nuxt-project-${self:provider.stage}

functions:
  nuxt:
    handler: handler.render
    events:
      - http: ANY /
      - http: ANY /{proxy+}

You can modify the existing Nuxt configuration file (nuxt.config.js) to fit the following format:

const pkg = require("./package.json")

// "export default" => "module.exports ="
module.exports = {
  mode: "universal",
  head: {
    title: pkg.name,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
    ],
  },
  build: {
    // The "publicPath" value is automatically generated by the plug-in
  },
}

Finally, the handler(handler.js) is written as:

const { createNuxtApp } = require("serverless-nuxt")
const config = require("./nuxt.config.js")

module.exports.render = createNuxtApp(config)

Proceed as follows: The serverless plug-in builds automatically at deployment time.

Never use the npm run build command.

sls deploy --stage dev

custom:
  nuxt:
    version: v1.0.0-alpha
    bucketName:
    assetsPath:

• Serverless plugin author's cheat sheet

MIT