AWS Amplify – Serverless Deployment Reactjs/Nextjs Stack

Published On: 24 March 2021.By nishant.

Cloud
General

AWS Amplify – Serverless Deployment Reactjs/Nextjs Stack

Amplify

AWS , GCP, Azure all coming up with new tools and services to ease out the development and deployment pain points. Amplify helps you build and deploy serverless applications on AWS cloud. It takes care of your entire CI-CD pipeline and offers easy integration with all major Git repository providers like Bitbucket, Github, Gitlab etc. You can connect your branch, configure domain , backend and your frontend app would be up and running in minutes. All can be managed using Amplify CLI or Console.
Automated Deployments makes the life lot easier.

Here is an easy step by step gudie from AWS , how to host react apps on Amplify.
https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-one/

I faced bit of challenge while hosting a NextJs app on Amplify. For Nextjs you need to do some modifications under build settings.
Default Build Settings –

version: 0.1
frontend:
phases:
preBuild:
commands:
- npm install build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'cache:
paths:
- node_modules/**/*

version: 0.1

frontend:

phases:

preBuild:

commands:

- npm install build:

commands:

- npm run build

artifacts:

baseDirectory: .next

files:

- '**/*'cache:

paths:

- node_modules/**/*

New Build Settings

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

version: 0.1

frontend:

phases:

preBuild:

commands:

- npm ci

build:

commands:

- npm run export

artifacts:

baseDirectory: out

files:

- '**/*'

cache:

paths:

- node_modules/**/*

Package.json –

"scripts": {
"build": "next build",
"export": "npm run build &amp;&amp; next export"
}

"scripts": {

"build": "next build",

"export": "npm run build && next export"

}

It worked like a charm after above changes.

But as soon as protected routes came into the picture , build started failing.
next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.
Next export command statically exports all the pages which can be deployed using amplify. But protected routes can’t be used without running a Node server, so I had to disable SSR and protected routes to make it running.

Apart from easy deployment Amplify provides easy wrapper services for many other AWS services like Authentication with Cognito, Storage etc .

Read more here – https://docs.amplify.aws/

References –

https://www.linkedin.com/pulse/how-deploy-nextjs-app-aws-amplify-console-30-minutes-less-smith