Deploying a serverless Next.js app using serverless framework, serverless-nextjs-plugin, and AWS Lambda function.

Manato Kuroda

Jul 26, 2019·4 min read

In part one of this article, we deploy a Next.js app using the Serverless framework and AWS lambda.

In part two, I will show you how to set up automatic deployments working with CircleCI 2.1.

Example repo

Most of what you will read below in this part is covered in a sample repository.

Prerequisites

If you haven’t read part one, follow the instructions and set it up for deployment. This article assumes a few basic ideas of CircleCI in order to illustrate how it can work smoothly. If you haven’t signed up yet, check it out so it’ll help you get started.

Getting started

Follow the steps to deployments:

• Add deploy scripts to package.json
• Add Node job to the configuration
• Add Deploy job to the configuration

Add deploy scripts to package.json

In part one, you have two environments, staging and production in your app and hit the Serverless command every time deploying like this:

$ sls deploy -v --stage staging // for staing
$ sls deploy -v --stage production // for production

It’s totally okay but could be improved adding scripts in package.json:

/* package.json */{
  "name": "my-app",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "deploy:staging": "sls deploy --stage staging -v", // add here
    "deploy:production": "sls deploy --stage production -v" // add here
  },
  ...
}

Add Node job to the configuration

Create a configuration file named .circleci/config.yml and add node job which installs npm dependencies:

# .circleci/config.ymlversion: 2.1executors:
  default:
    docker:
      - image: circleci/node:10.0.0
    working_directory: ~/my-appcommands:
  restore_yarn:
    steps:
      - restore_cache:
          key: yarn-v1-{{ checksum "yarn.lock" }}-{{ arch }}-{{ .Branch }}save_yarn:
    steps:
      - save_cache:
          key: yarn-v1-{{ checksum "yarn.lock" }}-{{ arch }}-{{ .Branch }}
          paths:
            - ~/.cache/yarnrestore_node:
    steps:
      - restore_cache:
          key: node-v1-{{ checksum "package.json" }}-{{ arch }}-{{ .Branch }}save_node:
    steps:
      - save_cache:
          key: node-v1-{{ checksum "package.json" }}-{{ arch }}-{{ .Branch }}
          paths:
            - node_modulesjobs:
  node:
    executor:
      name: default
    steps:
      - checkout
      - restore_yarn
      - restore_node
      - run: yarn
      - save_yarn
      - save_nodeworkflows:
  build_and_deploy:
    jobs:
      - node

It’s just a simple job to install npm dependencies and cache node_modules for performance.

Add Deploy job to the configuration

To deploy apps to AWS Lambda, you’ll need a few steps to configure in CircleCI container:

1. Install aws-cli
2. Configure AWS account

Instead of configuring manually, CircleCI 2.1 provides Orbs which allows you to share packages of CI configuration. There is an Orbs package you can use for AWS deploy.

Add circleci/aws-cli@0.1.13 to .circleci/config.yml :

version: 2.1orbs:
  aws-cli: circleci/aws-cli@0.1.13...

Now that you can use the commands, install and configure in orbs as shown below:

https://circleci.com/orbs/registry/orb/circleci/aws-cli

Let’s add deploy job:

jobs:
 deploy:
    parameters:
      env:
        type: enum
        enum: ["production", "staging"]
      aws-access-key-id:
        type: env_var_name
      aws-secret-access-key:
        type: env_var_name
      aws-region:
        type: env_var_name
    executor:
      name: default
    steps:
      - checkout
      - restore_yarn
      - restore_node
      - run: yarn
      - save_yarn
      - save_node
      - aws-cli/install
      - aws-cli/configure:
          aws-access-key-id: << parameters.aws-access-key-id >>
          aws-secret-access-key: << parameters.aws-secret-access-key >>
          aws-region: << parameters.aws-region >>
      - run: yarn deploy:<< parameters.env >>
      - store_build_artifacts...

aws-cli/install installs aws-cli via pip and aws-cli/configure configures and stores AWS credentials.

Next, add deploy job to workflows:

workflows:
  build_and_deploy:
    jobs:
      - node      # for staging
      - deploy: &deploy
        env: staging
        aws-access-key-id: AWS_ACCESS_KEY_ID
        aws-secret-access-key: AWS_SECRET_ACCESS_KEY
        aws-region: AWS_DEFAULT_REGION        requires:
          - node        name: deploy_staging
        filters:
          branches:
            only: staging
          tags:
            ignore: /.*/       # for production
       - deploy:
         <<: *deploy         env: production         name: deploy_production
         filters:
           branches:
             ignore: /.*/
           tags:
             only: /^v.+$/

To put it simply, when you push staging branch, it will trigger deploy job for staging and when you push tag starting v. (like v.1.1.0 ) it will trigger deploy job for production.

You see some env variables above, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY and AWS_DEFAULT_REGION in workflows. Let’s create it in CircleCI settings:

Settings > BUILD SETTINGS > Environment Variables:

So you’re ready to deploy and push staging:

$ git push origin staging -u

You’ll see the workflow like this:

Deploying succeeded! Nice and simple jobs. Additionally, it would be great to have lint and test job to your workflow to make sure of keeping your app solid.

Conclusion

That’s it for the article. Having gone through this article, I hope you should be able to build a serverless app and deploy it simply.

Here’s the final codebase: