AWS APP RUNNER

Deploying a Website on Nginx using AWS App Runner

AWS App Runner is a fully managed service that allows you to deploy containerized applications quickly without managing infrastructure. In this guide, you will learn how to deploy a sample containerized application on an Nginx server using AWS App Runner. We will build a Docker image, push it to Amazon Elastic Container Registry (ECR), and create an AWS App Runner service to host the website.

AWS App Runner is a fully managed service that makes it easy to deploy, run, and scale containerized web applications and APIs directly from your code repository or container image — without needing to manage infrastructure.

It is designed for developers who want to focus on writing code without worrying about servers, load balancers, or scaling configurations.

Key Features of AWS App Runner

1. Fully Managed Infrastructure

No need to configure servers, networking, or container orchestration. AWS automatically provisions and manages the underlying infrastructure.

2. Easy Deployment

Deploy applications directly from:

GitHub repositories
AWS CodeCommit repositories
Container images (Amazon Elastic Container Registry - ECR)

3. Automatic Scaling

App Runner automatically scales your application based on incoming traffic.

4. HTTPS and Security

Built-in HTTPS endpoint for every application.
Automatic TLS certificates.
Integrated with AWS IAM for access control.

5. High Availability

Automatically distributes traffic across multiple availability zones (AZs).

6. Cost-Effective

Pay only for the vCPU and memory resources your application uses.

Prerequisites

Before proceeding, ensure you have the following:

An AWS account.
AWS CLI installed and configured and Visual Studio Code editor.
Docker installed on your local machine and must be running.
A basic website with an index.html file (I will use a personal site I built).

In this tutorial, we 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

Step 1: Create a Container Image for your website (webapp).

Create a project directory and navigate into it:
```
 mkdir nginxwebapp
 cd nginxwebapp
```
On your local machine, navigate to the Visual Studio Code application, and open the nginxwebapp folder.
Select the +New file icon, and enter index.html for the file name in the Explorer section.
Add your website files inside this directory, 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 and
working. Further configuration is required.</p>

<p><em>Thank you for using AWS App Runner!</em></p>
</body>
</html>

Create a Dockerfile to containerize the application and add the lines of code below:

FROM --platform=linux/amd64 nginx:latest
WORKDIR /usr/share/nginx/html
COPY index.html index.html

Build the docker image: In the open terminal window, run the following command to create container image.
```
 docker build -t nginx-web-app .
```

Step 2: Push the Docker Image to Amazon ECR

1. Sign in to the AWS Management console in a new browser window, search and open the Amazon Elastic Container Registry

2. Choose Create a repository.

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

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

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

Step 3: Create an AWS App Runner Service

From your console, search for AWS App Runner

Choose 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

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

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

6. 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.

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

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

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