Deploying Next.js on AWS App Runner

karanpratapsingh

Karan Pratap Singh

Posted on August 5, 2021

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!

💖 💪 🙅 🚩
karanpratapsingh
Karan Pratap Singh

Posted on August 5, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related