Skip to main content

Getting Started Resource Center

TUTORIAL

Deploy a Web App on Nginx Server using AWS App Runner

Introduction

Overview

In this tutorial, you will learn how to deploy a sample containerized application on a Nginx server using AWS App Runner.

AWS App Runner is a fully managed service that makes it easy for developers to quickly deploy containerized web applications and APIs, at scale and with no prior infrastructure experience required. Start with your source code or a container image. App Runner automatically builds and deploys the web application and load balances traffic with encryption. App Runner also scales up or down automatically to meet your traffic needs.

What you will accomplish

In this tutorial, you will:

  • Create a container image for your web app

  • Push the image to Amazon Elastic Container Registry

  • Create an AWS App Runner service

  • Clean up your resources

Prerequisites

Before starting this tutorial, you will need:

Implementation

Use the following step-by-step written tutorial or watch the video to learn how to Deploy a Web Applicaton on Nginx Server using AWS App Runner.

Beginner

20 minutes

Less than $0.16 if completed within two hours and you delete your resources at the end of the tutorial.

Troubleshooting AWS CLI

Troubleshooting Docker commands and ECR

June 1, 2022

Push container image to Amazon ECR

In this step, you will create a private repository in Amazon ECR and push the container image you built in previous module to the newly created repository.

1. Create a project directory

In a new terminal window, run the following commands to create a new folder called nginx-web-app, and navigate to the folder.

mkdir nginx-web-appcd nginx-web-app

2. Open Visual Studio Code

On your local machine, navigate to the Visual Studio Code application, and open the nginx-web-app folder.

Missing alt text value

3. Create an HTML file

In the Explorer section, select the +New file icon, and enter index.html for the file name.

"File explorer showing a new file named 'index.html' being created in the 'NGINX-WEB-APP' folder, with the new file icon highlighted."

4. Add HTML content

Select the index.html file, and update it with the following code. Then, save the file.

<!DOCTYPE html><html><head><title>Sample Web App</title><style>html { color-scheme: light; }body { width: 35em; margin: 0 auto;font-family: Amazon Ember, Verdana, Arial, sans-serif; }</style></head><body><h1>Welcome to AWS App Runner!</h1><p>If you see this page, the nginx web server is successfully installed andworking. Further configuration is required.</p><p><em>Thank you for using AWS App Runner!</em></p></body></html>
Screenshot of a Visual Studio Code editor showing an open "index.html" file with basic HTML structure and inline CSS for a sample web app, including a welcome message for AWS App Runner.

5. Create Dockerfile

Create another file named Dockerfile, and update it with the following code. Then, save the file.

FROM --platform=linux/amd64 nginx:latestWORKDIR /usr/share/nginx/htmlCOPY index.html index.html
"Visual Studio Code interface showing a Dockerfile with three lines of code: specifying the Nginx image, setting the working directory, and copying an index.html file."

6. Build a container

In the open terminal window, run the following command to create container image.

docker build -t nginx-web-app .
Terminal output showing the process of building a Docker image named "nginx-web-app" with detailed steps and layer information.

Create an AWS App Runner Service

In this module, you will create an AWS App Runner service using the container image you built in previous module.

1. Create an Amazon ECR repository

Sign in to the AWS Management console in a new browser window, and open the Amazon Elastic Container Registry at https://console.aws.amazon.com/ecr/home.

For Create a repository, choose Create.

Missing alt text value

2. Configure repository settings

On the Create repository page, for Repository name enter nginx-web-app, leave the default selections, and select Create repository.

Alt-text: AWS console interface for creating a repository, showing settings for visibility, repository name, tag immutability, image scan, and encryption, with "Create repository" button highlighted in orange.

3. View push commands

Once the repository has been created, select the radio button for the repository, and then select View push commands.

"Amazon ECR interface showing a successfully created private repository named 'nginx-web-app' with options like 'View push commands,' 'Delete,' and 'Actions.'"

4. Push your image

Follow all the steps in the pop-up window, to authenticate and push the image to the repository.

"Screenshot of AWS ECR instructions for pushing a Docker image, showing steps for authentication, building, tagging, and pushing the image using AWS CLI and Docker commands."

Clean up resources

In this step, you will go through the steps to delete all the resources you created throughout this tutorial. It is a best practice to delete resources you are no longer using to avoid unwanted charges.

1. Create an App Runner service

In the Source and deployment section, leave the default selections for Repository type and Provider. For Container image URI, select Browse.

Missing alt text value

2. Configure the source

In the Source and deployment section, leave the default selections for Repository type and Provider. For Container image URI, select Browse.

"App Runner source and deployment settings with options for repository type, provider, and container image URI, highlighting the 'Browse' button."

3. Select the container image

In the pop-up window, for Image repository, select nginx-web-app, and choose Continue.

"Amazon ECR container image selection screen showing 'nginx-web-app' as the image repository and 'latest' as the image tag, with 'Continue' and 'Cancel' buttons."

4. Set up ECR access

In the Deployment settings section, for ECR access role, select Create new service role, and choose Next.

"Deployment settings screen with 'Manual' deployment trigger and 'Create new service role' selected, showing a service role name field pre-filled with 'AppRunnerECRAccessRole' and a highlighted 'Next' button."

5. Configure service settings

On the Configure service page, for Service name enter nginx-web-app-service, and change the Port to 80. Leave the rest as default, and select Next.

"Configuration screen for an AWS service with settings for service name, virtual CPU, memory, and port, showing 'nginx-web-app-service' as the service name and port 80 selected."

6. Review and deploy

On the Review and create page, review all inputs, and choose Create & deploy.

Alt-text: AWS App Runner interface showing "Review and create" steps for deploying a service, with configuration details and a highlighted "Create & deploy" button.

7. Monitor deployment

It will take several minutes for the service to be deployed. You can view the event logs for progress.

Alt-text: AWS App Runner interface showing the deployment status "Operation in progress" for an nginx-web-app-service, with event logs detailing deployment steps.

8. Access the application

Once the status updates to Running, choose the default domain name URL to view the web app.

"Service overview for 'nginx-web-app-service' showing status as 'Running' with a default domain URL highlighted."

9. Verify the deployment

The Welcome page and confirmation message should look like the image on the right.

"Browser window displaying a welcome page for AWS App Runner with a message confirming successful nginx web server installation."

Create a container image

In this step, you will create a container image of a sample web app.

1. Delete the App Runner service

In the AWS App Runner console, navigate to the nginx-web-app-service, choose Actions, and select Delete.

Missing alt text value

2. Confirm the deletion

Follow the prompts in the pop-up window to confirm deletion of the service.

Confirmation dialog for deleting "nginx-web-app-service," requiring the user to type "delete" in a field and click the orange "Delete" button.

3. Delete the ECR repository

In the Amazon ECR console, select the radio button next to the nginx-web-app repository, and choose Delete.

Screenshot of a private repositories interface showing a repository named "nginx-web-app" with details like URI, creation date, tag immutability, scan frequency, and encryption type. The "Delete" button is highlighted in red.

Congratulations

You have containerized a sample web app running on a Nginx server and pushed the image to Amazon Elastic Container Registry. Then, you created an AWS App Runner service using the image.