DEV Community

Cover image for Deploying Next.js on AWS App Runner
Karan Pratap Singh
Karan Pratap Singh

Posted on

Deploying Next.js on AWS App Runner

Last week I was playing around with AWS App runner which is a new and exciting offering by AWS. So, In this article we'll be deploying our Next.js app on AWS App Runner

What is AWS App runner?

AWS App runner is a fully managed service that makes it easy to deploy containerized web applications, APIs at scale without any prior infrastructure experience or knowledge.

Here are some features:

  • Automatic builds and deploys
  • Out of the box load balancing
  • Simple Auto scaling
  • SSL enabled by default!

Best thing is we can just start with your source code (on Github) without even writing a Dockerfile using automatic builds!

Note: I will also add that the AWS App Runner is still a relatively new service when compared to AWS ECS or AWS EKS

Setup

I've initialized a new next project using next-app and committed it to a github repository

yarn create next-app --typescript
Enter fullscreen mode Exit fullscreen mode

Let's deploy it!

Find our AWS App Runner service

Login into AWS console and let's search for AWS App Runner

search

Create an App Runner service

dashboard

Source setup

Here i'll add a connection with my github account to keep things simple.
But you can also build and push your docker image to AWS ECR and use that as well.

connect

It'll now create a connection with github using AWS CodeStar

connecting

Configure build

In this step we need to tell App Runner how to build and start our application.

We can either configure it from the console or you can also add a apprunner.yaml to root of your repository as below

version: 1.0
runtime: nodejs12 
build:
  commands:
    build:
      - yarn --production
      - yarn build
run: 
  command: yarn start
  network:
    port: 3000
Enter fullscreen mode Exit fullscreen mode

To keep things simple, let's add config directly from the console.

build

Note: at the time of writing this article, AWS App Runner only supports python 3 and nodejs 12 environment

Configure service

We're almost there! In this step we can configure things like compute CPU and memory, environment variables, autoscaling, health checks and tags.

configs

Auto scaling (optional)

As App Runner supports autoscaling by default we can just tweak the config to fit our needs

autoscaling

We can add a custom auto scaling config if required!
autoscaling config

Health checks (optional)

It's always good to have health check setup, currently App Runner only supports TCP based health checks
healthcheck

Security (optional)

Here, we can configure an IAM role for our instance. This is required if you are using aws-sdk to integrate with other AWS services.

Example: Nodejs server using AWS S3 to store images

security

Security (optional)

It's never a bad idea to tag your AWS resources!

tags

Review and Deploy!

At last, let's review our setup and deploy!
review

Okay, now our deploy has been created.

Note: this usually takes 2-3 minutes as App Runner dockerize's our app and starts it. If you're using already built docker image available on AWS ECR, then deploys would be instant!

created deploy

It's showtime!

Our deployment was a success and we can access our service via the default domain url given by the App Runner

running

Next Steps?

We might want to add a custom domain to our AWS App Runner service, this can be done by going to the Custom domains tab

custom domain

Thanks for Reading, I hope that it was exciting for you as well as it was for me. As always feel free to reach out to me on Twitter if you face any issues!

Discussion (6)

Collapse
fwang profile image
Frank Wang

Hey Karan, awesome post!

For folks coming across the post, I justed wanted to share that Next.js apps can also be deployed to Lambda@Edge and hosted in the serverless architecture. Here's an example of deploying using CDK with the SST framework - serverless-stack.com/examples/how-...

Collapse
karanpratapsingh profile image
Karan Pratap Singh Author

SST framework looks amazing, thanks for sharing

Collapse
balachalasani profile image
Bala Chalasani

Hi Frank,

SST looks awesome. Is it possible to deploy to standard Lambda by any chance, Both Serverless framework and SST deploy to edge, is there a reason behind this?

Collapse
fersa profile image
Ferhat

All works fine but my NextJS app doesnt recognize any of the environment variables I give it through the config service although I use NEXT_PUBLIC prefix for SSR. Does anyone know what else I could do?

Collapse
willnix86 profile image
Will Nixon

We were using this until our client asked for http to https redirection, which AppRunner doesn't offer. Sadly had to move away from AppRunner

Collapse
karanpratapsingh profile image
Karan Pratap Singh Author

Yeah it’s still quite new, I’m excited to see how
It matures