Serverless Containers with Next.js, AWS Fargate, and AWS Amplify
Tags: nextjs, containers, javascript, react
Published: 2021-01-12 13:49:23

---
title: Serverless Containers with Next.js, AWS Fargate, and AWS Amplify
published: true
description: How to deploy a Next.js app to AWS Fargate with a custom domain using the Amplify CLI.
tags: nextjs, containers, javascript, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/e3z867s8whx56f9zzizr.jpg
---

AWS Amplify [recently announced](https://aws.amazon.com/blogs/mobile/zero-effort-container-deployment-for-graphql-and-rest-apis-and-web-hosting-with-amplify-cli/) support for containers using AWS Fargate. Using the new feature, you are able to deploy APIs (REST & GraphQL) as well as hosting to AWS Fargate directly from the Amplify CLI.

In this post, I will walk you through how to deploy a Next.js app to AWS Fargate with a custom domain using the Amplify CLI.

> For a complete walkthrough of this tutorial, check out [this video](https://www.youtube.com/watch?v=rA5l82vypXc). You can also view the Amplify container docs [here](https://docs.amplify.aws/cli/usage/containers#hosting)

## Getting started

> To follow this tutorial, you will first need to [install and configure](https://docs.amplify.aws/cli/start/install) the Amplify CLI.

First, create a new Next.js app:

```sh
npx create-next-app nextonfargate
```

Next, initialize a new Amplify project:

```sh
amplify init

? Enter a name for the project: nextonfargate
? Enter a name for the environment: dev
? Choose your default editor: <your-default-text-editor>
? Choose the type of app that youre building: javascript
? What javascript framework are you using: react
? Source Directory Path: .
? Distribution Directory Path: .next
? Build Command:  npm run-script build
? Start Command: npm run-script start

> When prompted, choose the AWS profile you'd like to use for this project.
```

Next, reconfigure the project to enable container deployments:

```sh
amplify configure project

? Enter a name for the project nextonfargate
? Choose your default editor: <your-default-text-editor>
? Choose the type of app that youre building javascript
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  npm run-script build
? Start Command: npm run-script start
? Do you want to enable container-based deployments? Yes
? Do you want to update or remove the project level AWS profile? No
```

## Adding the domain to Route53

Next, open the [Route53 dashboard](https://console.aws.amazon.com/route53) and click on __Hosted zones__ in the left-hand menu.

Click on __Create Hosted Zone__ and enter the name of the domain that you will be using, then click __Create hosted zone__.

![Create Hosted Zone](https://dev-to-uploads.s3.amazonaws.com/i/4jwlj333sabav8i67knx.png)

Route53 should now give you 4 nameservers that you can use for configuring the DNS of your domain name.

![Configuring nameservers](https://dev-to-uploads.s3.amazonaws.com/i/42w9mrnryz71o71gkzmf.jpg)

Next, visit your domain name registration service and configure your domain with these nameservers.

![Configuring nameservers](https://dev-to-uploads.s3.amazonaws.com/i/vbhfoa8m7wc3qpokkf0m.png)

## Adding Fargate Hosting

Next, add Fargate Hosting by running the following command:

```sh
amplify add hosting

? Select the plugin module to execute: Container-based hosting with AWS Fargate
? Provide your web app endpoint: www.yourdomain.com
? Do you want to automatically protect your web app using Amazon Cognito Hosted UI: No
```

This should configure your project locally, and you should now see a __Dockerfile__ created at the root of the project.

Update the Dockerfile with the following and save the file:

{% gist https://gist.github.com/dabit3/6eb125dad05c1b1723bc44b6618e8ac4 %}

## Deploying

You should now be ready to deploy. To do so, you can run the following command:

```sh
amplify publish
```

Once the deployment is successful, you should be able to view the app on your live domain.

### Debugging

You should be able to view the deployment and build happening as well as any error logging in the [CodeBuild](https://console.aws.amazon.com/codesuite/codebuild/projects) dashboard.

### Deploying updates

Once you make a change and are ready to deploy, you should be able to run `amplify publish` at any time to deploy updates.

## Video

Check out this video for a complete walkthrough of this process.

{% youtube rA5l82vypXc %}