Home/AWS Amplify – Serverless Deployment Reactjs/Nextjs Stack

AWS Amplify – Serverless Deployment Reactjs/Nextjs Stack

Published On: 24 March 2021.By .
  • Cloud
  • General

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/**/*

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/**/*

Package.json –

"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

Related content

We Love Conversations

Say Hello
Go to Top