Getting Started Resource Center

Developer Tools

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:

An AWS account: if you don't already have one follow the Setup Your Environment tutorial.
AWS Command Line Interface installed and configured.
Docker Engine installed, and the application started.
Visual Studio Code installed.

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.

AWS experience

Beginner

Time to complete

20 minutes

Cost to complete

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

Get help

Troubleshooting AWS CLI

Troubleshooting Docker commands and ECR

Last updated

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.

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.

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.

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.