DEV Community

Kalio Princewill
Kalio Princewill

Posted on

Deploying a Static Website on AWS EC2 with Nginx: A Comprehensive Guide

Introduction:

AWS (Amazon Web Services) 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) 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

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

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

Image description

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

Image description

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

Image description

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

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

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

Image description

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

After a successful launch, you should see the screen below

Image description

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
To use your instance, click on the Connect button, this should open the screen below,

Image description

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

Image description

Once connected you will see your EC2 ubuntu terminal.

Image description

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
Enter fullscreen mode Exit fullscreen mode

update the package list on your instance by running

apt-get update
Enter fullscreen mode Exit fullscreen mode

When the package is fully updated, install Nginx by running the command

apt-get install nginx
Enter fullscreen mode Exit fullscreen mode

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

service nginx status
Enter fullscreen mode Exit fullscreen mode

Image description

To access nginx template html run

cd /var/www/html
Enter fullscreen mode Exit fullscreen mode

Then run view the nginx template

curl localhost
Enter fullscreen mode Exit fullscreen mode

Image description

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

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

ls
Enter fullscreen mode Exit fullscreen mode

Image description

Now to change the template of your nginx server, run

nano index.nginx-debian.html
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (2)

Collapse
 
andrea_from_italy profile image
andrea_fazzi

Great,helpful explanation,
Thank you sincerely

Collapse
 
kalio profile image
Kalio Princewill

Glad the article was helpful