Deploying a Static Website on AWS EC2 with Nginx: A Comprehensive Guide
Tags: aws, nginx, tutorial, devops
Published: 2024-07-02 08:16:43

##Introduction:

[AWS (Amazon Web Services)](https://aws.amazon.com/) is a comprehensive cloud computing platform provided by Amazon, offering a wide range of services including computing power, storage, and databases. It enables businesses and developers to access and use scalable and cost-effective cloud resources on-demand. 

**What is AWS EC2?**
[Amazon Elastic Compute Cloud (EC2)](https://aws.amazon.com/ec2/) is a core service within AWS that provides on-demand virtual machines (instances). You can select from a diverse range of instance types to match your specific computational needs. AWS EC2 enables elastic scaling, allowing you to adjust compute power up or down based on requirements. 


This guide will concentrate on AWS EC2, demonstrating how to use its virtual machine features to set up a server environment tailored for hosting your static website with Nginx web server.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypre9zb35lm4n3ygtfm2.png)

##Prerequisites
To begin this tutorial, the following are good to have:
1.	To complete this project you should have a fully verified AWS account, to get on visit [here](https://aws.amazon.com/).
2.	Also a good to have would be basic knowledge of linux commands.
3.	Basic understanding of HTML and CSS


The complete the project above i will walk you through  as step by step procedure:
###Creating an AWS EC2 instance:
Firstly, sign into your AWS console and click on the EC2 under the Compute section:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwpjd6wgdmzoaprjix7k.png)

Next, to launch an EC2 instance click on the `Launch Instance` button 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp7b3wnhda042llq7dux.png)

**Name and tags** 
Next, give your EC2 Instance a desired name,  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/156h6xtlxfmkh3ekx4ld.png)




**Application and OS images**
For this project select Ubuntu as the application image for the instance.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pr4xz5qijt9s3nug129d.png)

**Amazon Machine Image (AMI)**
Select the Ubuntu Server and free tier, you don’t want to spend money when it can be free.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yn8j45q4v2nye3jewtd.png)

**Key-Value Pair:** Key-value pairs are used in instance metadata to securely configure access, retrieve instance-specific information, and automate initial setup tasks.
Next, create a new key pair and choose the .pem format.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yo5c836xb1limk33vn9.png)

Give the Key pair a name and ensure the fields are selected, this should download a file on your browser.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z97ot21xclpfblkr7s18.png)

**Network Settings:** 
Network settings configure firewall rules to control the traffic to your instance. In this section, enable options for Allow SSH traffic from Anywhere, Allow HTTPS traffic from the Internet, and Allow HTTP traffic from the Internet. 
Click on the launch Instance button to continue.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur5pjej5hsf4uqucihu0.png)

After a successful launch, you should see the screen below 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65oc7ga0z56nfjz4mtel.png)

click on the instances button on the left sidebar to view your running instance, select the checkbox of your instance to see more details on the instance as it’s displayed below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx76ktcfuivo6pfl6j8n.png)
To  use your  instance, click on the `Connect` button, this should open the screen below, 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz9dymy7vyh7u06vuw26.png)


Click  the orange connect button to launch the terminal of your EC2 instance Virtual machine.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pinginli905xuxg7drl.png)
 

Once connected you will see your EC2 ubuntu terminal.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu0oy4huxk8rhhuc8j7l.png)

###Installing Nginx
**What’s Nginx?**
Nginx is a free, open-source web server known for its high performance and efficient resource usage. It excels in reverse proxy, load balancing, and caching, while also providing HTTPS server capabilities. Designed for maximum performance and stability, Nginx can also serve as a proxy for email protocols like IMAP, POP3, and SMTP, making it a versatile tool for building robust and scalable web applications.

Firstly  to operate as a root  user,  run the command on your  terminal
```
sudo -i
```
update the package list on your instance by running
```
apt-get update
```
When the package is fully updated, install Nginx by running the command 
```
apt-get install nginx
```

Once that is installed, to check the status of nginx web server with this command
```
service nginx status
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eke9g7dx9zxd8rhs1xqu.png)

To access nginx template html  run
```
cd /var/www/html
```
Then run  view the nginx template 
```
curl localhost
``` 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/licu1r4c6xq2f7wkmqhk.png)


Alternatively, to view the default nginx template, copy the PublicIP address at the bottom of the page and open on a new browser

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgob8ajroji7dhf34vhd.png)

**Customising your Nginx server**
At the same file directory to view the current files in the directory,  run 
```
ls
``` 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96hndqy05nntp1sxijx7.png)


Now to change the template of your nginx server, run
```
nano index.nginx-debian.html
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ivh5sqiwo037cqtu5rm.png)


using your arrow key clean up the content 

Copy and paste the Html and css file below 
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalio Princewill</title>
    <style>
    body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
    font-family: 'Montserrat', sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.glass {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
}

h1, a {
    color: #fff;
    margin: 0;
    font-size: 1em;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="glass">
            <h1>Hello world, l just deployed a my status site on AWS EC2</h1>
        </div>
    </div>
</body>
</html>
```


After you have adding your desire html and css, to save the file use `Control + O` , then `Enter` finally use `Control + X` to exit the the editor.
Refresh your public IP address to see the final result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv9irltruhhbba9bb1hn.png)

Your static website is now online and accessible!

### In summary
This guide provides a step-by-step tutorial on how to deploy a static website using an Nginx web server on an AWS EC2 instance. It begins by introducing AWS EC2, a service for on-demand virtual machines, and outlines the prerequisites such as an AWS account, basic Linux knowledge, and understanding of HTML and CSS. The guide details the process of creating and configuring an EC2 instance, including selecting an Ubuntu image, setting up network security rules, and establishing a key pair for secure access. It then covers the installation and configuration of the Nginx web server on the EC2 instance. The final steps involve customizing the Nginx template to host the static website, resulting in a live and accessible web page.