Deploying a Next.js App with SSR to AWS App Runner (Source Code Deployment)

AWS App Runner has been released. It's a service that allows you to deploy and run application containers without creating a VPC. Is it similar to GCP's Cloud Run?

Deploying a Next.js App

Actually, on Wednesday, May 19, 2021, there was another release: AWS Amplify's server-side rendering support. This release is probably more targeted at Next.js users. However, I thought there might be cases where Next.js is deployed as a containerized application to GCP or Fargate, so this time I decided to try deploying it to AWS App Runner. Having more options is always a good thing.

Prepare a Next.js App with SSR

I'll use a slightly modified version of the official blog sample created with create-next-app. There are two main ways to deploy to App Runner:

• Deploy from a container image uploaded to ECR (Elastic Container Registry).
• Deploy from source code. In the settings, choose a Node.js 12 or Python 3 base container.

This time, I'll deploy from source code, which requires specifying a repository on your GitHub account. I've created a sample repository, so please fork it to use.

https://github.com/cm-wada-yusuke/apprunner-nextjs-ssr

To the App Runner screen

Select Create an App Runner service.

Source and deployment

Select Source code repository, then click Add new.

Enter any Connection name, and connect with GitHub using "Install another". Connecting to a single repository seems safer for now.

This state is good. Click Next.

Configure build

• Runtime is Nodejs 12
• Build command is yarn install && yarn build
• Start command is yarn start
• Port is Next.js's default 3000

Configure service

It seems I can configure vCPU and other settings, but this time I only set the Service name to next-ssr-blog and proceeded with the rest as default. It seems auto-scaling settings can also be configured here. The next screen is Confirm, so after reviewing, click Create & deploy. This will take approximately 10 minutes.

Accessing the service once it's up

Check the Services screen. Once the Status is Running, let's try to access it.

It seems to be running successfully. Although it was originally an SSG sample, I modified the article page to use SSR. I've added a logic to getServersideProps that makes content private if the slug contains the string preview...

The SSR logic also appeared to be working without any issues.

Summary

I immediately tried out the newly released App Runner. Along with the added features in Amplify Console, the options for deploying Next.js to the AWS environment have expanded significantly. As demonstrated in this article, App Runner can also deploy from source code, making it a valuable option for deploying small web applications.

Since App Runner also allows IAM role configuration, next, I'd like to try accessing various AWS services from an App Runner web application. I wonder if it's possible to directly interact with DynamoDB from the AWS SDK within getServersideProps🤔 I'm excited to find out.