How to Host a Static Website with AWS EC2 Using Nginx

After building your website, you need to make it accessible to your users. This is done by hosting your website on servers to manage its resources. Leveraging cloud hosting services like Amazon Web Services(AWS) gives you an edge by easing the stress of maintaining local servers.

This article will guide you through hosting a static website on AWS EC2 using Nginx web server. It covers all the steps, from launching an instance to connecting via SSH. If you are new to AWS, then this article is for you.

Prerequisite

This guide assumes you have created your AWS account. If you don't have one, see the AWS account creation page.

What is AWS EC2?

AWS EC2 stands for Amazon Web Service Elastic Compute Cloud. EC2 is an AWS service that provides Infrastructure as a Service (IaaS) by allowing users to rent virtual machines or servers, known as instances. Just like a trader rents a store and pays to use it, an instance is a virtual server you rent and pay for what you use.

It integrates with other AWS services, such as networking, storage, and security. There are various types of EC2 instances, like the t2.micro family, each designed to serve different use cases.

EC2 is easily scalable, allowing you to quickly add extra servers to handle increased traffic using the auto-scaling feature. It is also reliable; if a server fails, it can be automatically replaced.

Steps

Launch Instance

Open the AWS console
In the EC2 dashboard, scroll down and click on the launch instance button as shown below. This will lead you to a page for the instance setup.
Under the Name and Tags section, enter your server name. I named mine Practice Server.
Leave the Application and OS images (Amazon Machine Image) to Amazon Linux.
In the key pair (login) section, click Create new key pair and give your key pair a name (let us call it mynginx). Select RSA as the Key pair type and .pem as the Private key file format. Next, click the Create key pair button.
Once you click the Create key pair button, a .pem file will be downloaded to your default download folder. Next, move the .pem file to your desktop folder.
In the network setting, leave the Create security group option at the default and tick the two checkboxes to allow traffic from HTTP and HTTPS.
Leave the other settings as default and click the Launch Instance button.

After that, you will see a notification indicating the instance has been successfully launched.
Navigate to the EC2 instance dashboard; you should see your instance running after initializing.

Click on the instance checkbox, navigate to the details tab, and copy the IPV4 address.
Connect to the server using SSH.

Open your terminal; I'm using the WSL2 Ubuntu terminal.
To access the .pem file from your Windows desktop, enter the following command
```
   cd /mnt/c/Users/judyp/m/Desktop
```
Next, enter the following command to change the permission of the key pair
```
  sudo chmod 400 mynginx.pem
```

Initiate connection with this command

  sudo ssh ec2-user@your_public_address_ip -i yourkey.pem

Install Nginx on your instance

Run this command to install Nginx
```
  sudo yum update && sudo yum install nginx
```
This will update the system and install Nginx on your instance.
Start Nginx using this command
```
  sudo systemctl start nginx
```
Next, copy the public IP address and paste it into your browser. You will see a default Nginx website page below.

Update the Nginx file with your custom HTML file.

Enter the following command to navigate to your Nginx server's default HTML file location.
```
  cd /usr/share/nginx/html
```

Enter the following command to open the index.html file

  sudo nano index.html

The default file is shown in the image below.

I Will be using this simple code example.

  <!DOCTYPE html>

  <html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Amazon Elastic Compute Cloud</title>

  </head>

  <body>

    <h1>EC2</h1>

    <p>Learning how to host an HTML document on EC2</p>

  </body>

  </html>

Copy the HTML code, go to your nano editor, right-click to paste the code, and press ctrl + x to exit. You will be asked to save buffer. Press Y on your keyboard and hit enter.
Go to your browser and refresh the page, you will see the updated changes from your custom HTML file.

You have successfully created your first instance
For the final steps, go to your console to terminate the instance, as shown in the image below.

Wrap Up

Hosting your static website is easy using AWS EC2. In this tutorial, we have established a background knowledge of AWS EC2, launched an instance, and hosted a static website using an Nginx web server.

This article introduces you to one of the many things you can do with AWS. There is more to explore on AWS.

Cheers!! and keep on learning.

Connect with me on LinkedIn and Twitter

How to Host a Static Website with AWS EC2 Using Nginx

Table of contents

Prerequisite

What is AWS EC2?

Steps

Wrap Up