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.
Prerequisites
To begin this tutorial, the following are good to have:
- To complete this project you should have a fully verified AWS account, to get on visit here.
- Also a good to have would be basic knowledge of linux commands.
- 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:
Next, to launch an EC2 instance click on the Launch Instance button
Name and tags
Next, give your EC2 Instance a desired name,
Application and OS images
For this project select Ubuntu as the application image for the instance.
Amazon Machine Image (AMI)
Select the Ubuntu Server and free tier, you don’t want to spend money when it can be free.
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.
Give the Key pair a name and ensure the fields are selected, this should download a file on your browser.
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.
After a successful launch, you should see the screen below
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.
To use your instance, click on the Connect button, this should open the screen below,
Click the orange connect button to launch the terminal of your EC2 instance Virtual machine.
Once connected you will see your EC2 ubuntu terminal.
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
To access nginx template html run
cd /var/www/html
Then run view the nginx template
curl localhost
Alternatively, to view the default nginx template, copy the PublicIP address at the bottom of the page and open on a new browser
Customising your Nginx server
At the same file directory to view the current files in the directory, run
ls
Now to change the template of your nginx server, run
nano index.nginx-debian.html
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
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)
Great,helpful explanation,
Thank you sincerely
Glad the article was helpful