How to Deploy a Static Website on EC2 with Nginx

Imagine this: you've just finished building a stunning new website and are eager to share it with the world, but the thought of navigating complex hosting setups and server configurations fills you with dread.

Deploying a website doesn't have to be a headache. With Amazon Web Services (AWS) and its EC2 (Elastic Compute Cloud) service, you can get your static website up and running quickly and easily. This guide will walk you through the process of deploying a static website on an EC2 instance using Nginx as the web server.

What is AWS EC2?

AWS EC2 (Elastic Compute Cloud) is a web service provided by AWS that offers secure, resizable, and scalable virtual servers known as instances. These virtual machines come pre-configured with operating systems and some necessary software, allowing you to focus on your application.

AWS will manage the infrastructure, so you can launch and terminate the EC2 instance whenever you want. EC2 operates on a pay-as-you-go model, enabling you to scale up or down based on demand.

Deploying a Static Website on AWS EC2

Prerequisites

To follow along with this guide, ensure you have the following:

• An AWS account

• Basic knowledge of CLI commands

• A GitHub account (for storing your static website code)

Step 1: Create and Push Your Static Website to GitHub

First, create a static website. A simple example of a website structure should include an index.html and a styles.css file. This is the static website I’ll be deploying.

Build it using your preferred tools and frameworks. I'll assume you have a simple HTML website ready for this guide.

Creating an Nginx installation script

Inside the same directory of our static website, I’ll create an Nginx shell script file that will help us install the Nginx server on the EC2 instance.

This script will automate the installation and configuration of Nginx on your EC2 instance.

#!/bin/bash

sudo apt update -y
sudo apt install ufw -y
sudo apt install  nginx -y
sudo ufw app list
sudo ufw allow 'Nginx HTTP'

Push your website code to a Git repository

Now, we will push the web application code to GitHub for further use.

Note*: Ensure that your repo's visibility is set to **public**. You can find my repo [here](github.com/Mobey-eth/Deploy-a-Static-Websit..).*

Step 2: Launch an EC2 Instance

Once you have your AWS account, sign in as the root user to AWS to create a new user who can perform certain operations.

At the top of the AWS management console, search for the EC2 service in the search bar.

To create a new EC2 instance, click on Launch Instances.

Name the EC2 instance.

Select an Ubuntu AMI (Amazon Machine Image). For this guide, I’ll use Ubuntu Server 22.04 LTS. Also, select an instance type. Choose a free-tier eligible instance like t2.micro.

Next, create a new key pair and choose the .pem format.

Now, we’ll edit the instance's network settings. I’ll select the existing security group and the default security group, and I'll use the default storage configurations for the instance.

Review and launch the instance by clicking on Launch instance. Wait for the instance to change its state from pending to running.

Step 3: Configure Instance Settings

Select the instance to see the instance summary.

Set up the inbound rules to access the website & SSH into the instance. Select the Security tab and click on the security group.

Inside the security group, click on Edit inbound rules in the Inbound rules section. Edit inbound rules to add the following:

• SSH (port 22) from Anywhere-IPv4

• HTTP (port 80) from Anywhere-IPv4

• HTTPS (port 443) from Anywhere-IPv4

• All traffic

Click on the "Save rules" button to apply the changes to your security group.

Step 4: Connect to Your EC2 Instance and Install Nginx

Go back to the instances, select the instances, and click on Connect to connect the instance.

We would not make any changes here so click on “Connect” to continue to the AWS terminal.

We have now been connected to our EC2 instance.

Run the following command to update the instance packages:

sudo apt update && sudo apt upgrade -y

Now, go to your GitHub repo and copy the HTTPS link for the repo.

You can clone the repo to the instance with the following command:

git clone Your_repo_link

Now, cd into the GitHub repo and observe that all your files have been cloned. Run the nginx shell script using the following command:

bash nginx.sh

This will successfully install Nginx on the instance.

Now, we have to access the nginx default path, where we can add the files of our website. We will cd into this directory.

cd /var/www/html

If we cd into the list of items, we will be able to see the Nginx index page. We will remove this file and add our project files and folder to it.

sudo rm -rf index.nginx-debian.html

Type cd to go back to the working directory. We will move all our GitHub files and folders on the instance to the nginx default path directory ‘/var/www/html.’

cd
sudo mv your-repo-folder/* /var/www/html

Step 5: Assign an Elastic IP Address

We will now assign an Elastic IP address to the instance. Because the public IP address changes when you stop and restart your instance, we will provide an Elastic IP address that does not change when you restart your instance. In the EC2 console, go to "Elastic IPs" under "Network & Security".

To allocate an Elastic IP address, click "Allocate Elastic IP address." We will be using the default settings for this section, so go ahead and click “Allocate”.

Go to Actions and click on Associate Elastic IP address.

In the Instance section, select the instance where you have deployed your website. Check the Reassociation box to reassociate the IP address to another instance. Then click on Associate.

Go to the instance dashboard and select your instance. Under Public IPv4 address, you will see the Elastic IP address associated with the instance.

Copy and paste the public IPv4 address of the instance in your browser’s new tab.

Your static website is now live and accessible! 🎉

Step 6: Clean Up (Important)

Remember to terminate your EC2 instance when you're finished to avoid unnecessary charges.

Go to "Elastic IPs," select the IP, and choose "Actions" > "Release Elastic IP address."

Click on “Release”.

Note*: You can only release the IP address after the instance it was associated with has terminated.*

Wrapping Up

This article provided a comprehensive guide to deploying a static website on an AWS EC2 instance using Nginx. We covered the essential steps, from configuring your instance to setting up a web server and deploying your website content.

By following these steps, you've gained a practical understanding of leveraging AWS services to host your web projects efficiently.

Remember to explore further security best practices and optimization techniques to enhance the performance and security of your deployed website.

Happy coding!