Hosting an HTML Site on AWS EC2 instance: A Step-by-Step Journey for Newbies using AWS Management Console.
In this blog, I’m going to guide you through the process of hosting an HTML website on an Amazon EC2 instance, a powerful and flexible option that can be customized to handle your specific hosting needs. Let’s dive into the process and learn how you can do it too.
Embarking on the AWS voyage, one of the fundamental milestones you will encounter is learning how to host an HTML site. There are numerous methods to host a website in AWS, each with its own set of advantages. As a member of the Group 2 Team participating in a Cloud Mentorship program with AOS Note, I recently had the opportunity to dive deep into this experience. We accomplished this through two distinct tasks assigned to us, and in this post, I’m going to provide a step-by-step guide on how we did it!
To complete this project we are going to follow these steps and then the two (2) tasks assigned by our coach:
- Choose your region to launch your EC2 instance.
- Create a Security Group and open ports 80 and 22 to access your EC2 instance if necessary.
(TASK 1) Create an S3 Bucket
- Upload web files to an S3 bucket and assign a bucket policy.
- The Script Creation.
- Adding the script to EC2 User Data and launching an EC2 instance (add the Security Group and Key Pair).
(TASK 2) GitHub’s Entry into the Game
- Upload Web Files to a GitHub Repository.
- Another script.
- Adding the script to EC2 User Data and launching an EC2 instance (add the Security Group and Key Pair).
Choosing an AWS Region
It is assumed that you already have an AWS account set up. If that’s not the case, there are plenty of instructional videos on YouTube that can guide you through the process.
Starting off, navigate to the AWS Management Console. Once there, you’ll notice in the upper right-hand corner, that the default region selected is Northern Virginia. However, AWS offers several other regions globally that you can opt for based on your requirements such as data regulations, latency, and cost. If you wish to change the region, simply click on the current region in the upper right-hand corner and select from the dropdown menu the region that best suits your needs.
Create a Security Group to allow access to Port 80 and Port 22
By opening port 80, you’re granting Internet users access to your website, as this is the default port for HTTP traffic. Meanwhile, opening port 22 enables Secure Shell (SSH) connections to your EC2 instance. To create the security group, type vpc in the search bar located at the top of the console, and under Services select VPC.
In your AWS VPC dashboard, locate the ‘Security’ section in the left-hand menu by scrolling down. Once there, click on ‘Security groups’, followed by the ‘Create security group’ button.
When setting up your security group, you’ll need to assign it a unique name and provide a concise description for future reference. For simplicity, we’ll be using the default VPC (Virtual Private Cloud). The default VPC (selected) is preconfigured to allow you to start deploying instances right away, making it a convenient choice for this tutorial.
Under ‘Inbound rules’, you will need to add two new rules. To do this, click the ‘Add rule’ button. First, set up a rule for HTTP. Click the drop-down menu in the ‘Type’ column and select ‘HTTP’. In the ‘Source’ column, choose ‘Anywhere-IPv4’. Repeat the same process for SSH, but in the ‘Source’ column, select ‘My IP’. This will restrict access to your EC2 instance via SSH only to your IP address, which aligns with security best practices.
Next, scroll to the bottom of the page and click on the ‘Create security group’ button. This will finalize the creation of your security group with the settings you’ve defined.
(TASK 1) Create an S3 bucket
To create a new S3 bucket, type s3 in the search bar located at the top of the console, and under Services select S3, this will take you to the S3 management console, where you can create and manage your storage buckets.
Next, click on the ‘Create bucket’ button to proceed with the creation of your new S3 bucket.
As you set up your new S3 bucket, you need to give it a unique name. Under the ‘Object Ownership’ section, make sure that Access Control Lists (ACLs) are left disabled, as recommended. This step helps maintain the security of your bucket contents.
Scroll down and uncheck the option that says ‘Block all public access’. Doing this allows the objects in your bucket to be accessible to the public, which is crucial for a public website. However, Amazon S3 also warns you about the implications of this action. So, you’ll need to confirm your understanding by checking the box that says “I acknowledge that the current settings might result in this bucket and the objects within becoming public”.
After you’ve filled out all necessary information for your S3 bucket, navigate to the bottom of the page and click on the ‘Create bucket’ button. This will finalize the creation of your new S3 bucket.
Download the sample mole.zip web file here. Once it’s downloaded, go to the S3 bucket you’ve created, which in this instance is named ‘my-mole-bucket’ and click it. If you’ve named your bucket differently, just make sure to select the correct one.
Step 1 on (TASK 1): Upload Web Files to an S3 Bucket
Begin by uploading your web files to an S3 bucket on AWS. The process is fairly straightforward if you’ve familiarized yourself with the AWS interface. Click the Upload button. Click the Add file button and locate the mole.zip file that you downloaded (typically in your Download folder if using Windows system) then click the Open button shown in the screenshot below.
Click the ‘Upload’ button. Once the upload process completes, you should be able to verify its success. After the upload, click on the link ‘s3://my-mole-bucket’ to view your uploaded file in the bucket.
Navigate to the ‘Permissions’ tab. From there, look for the ‘Bucket policy’ section and click on the ‘Edit’ button. This will allow you to modify the policy for this specific S3 bucket.
To configure your bucket policy, you’ll need to input a script written in JSON format. This policy will grant the necessary permissions to allow for downloading any object stored within your specific bucket. Remember to replace the placeholder ‘your_bucket_name’ in the ‘Resource’ field with the actual name of your bucket. For instance, in my case, the bucket is named ‘my-mole-bucket’. Here’s an example of what the policy should look like:
{
"Version": "2012-10-17",
"Id": "GetObjectPolicy",
"Statement": [
{
"Sid": "GetObjectStatement",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your_bucket_name/*"
}
]
}
Once you’ve made the necessary changes to the bucket policy, scroll down and hit the ‘Save changes’ button. You should then see a message at the top left of your screen indicating ‘Successfully edited bucket policy’. This confirms that your changes have been saved successfully.
Step 2 on (Task 1): Script Creation
Once you’ve stored your files, it’s time to create a script. This script should be capable of downloading the web files from the S3 bucket and hosting your HTML website on an EC2 instance. Remember, getting the script right is key to the success of the operation.
1. sudo su — allows you to change to the root user
sudo su2. yum update -y — will allow us to update our EC2 instance
yum update -y3. yum install -y httpd — download Apache in our EC2 instance
yum install -y httpd4. The command ‘cd /var/www/html’ — cd is short for change directory, instructs to navigate to the HTML directory
cd /var/www/html5. The ‘wget’ — this is a Linux command that you can use to download a file from your S3 bucket to your EC2 instance. (e.g., download to your /var/www/html folder or directory
wget https://my-mole-bucket.s3.amazonaws.com/mole.zip6. The ‘unzip’ command — is to extract what is inside the mole.zip file and put it into the /var/www/html folder or directory
unzip mole.zip7. cp — copy the file(s) that was extracted from the mole.zip into the /var/www/html folder. The extracted mole.zip web file contains a mole-main folder with several files. The * means copy everything on it.
cp -r mole-main/* /var/www/html8. rm — is used to remove or delete the mole.zip file we downloaded and the mole-main folder that was extracted (unzip) since we no longer need it.
rm -rf mole-main mole.zip9. systemctl — utility that enables the service to start at boot. In our case start the Apache server
systemctl enable httpd
systemctl start httpdStep 3 on (TASK 1): Adding Script to EC2 User Data
The final step in Task 1 involves incorporating the script above into the EC2 user data at launch. Doing so will perform particular tasks to enable the hosting of your HTML website on the instance.
Let us first launch an EC2 instance
To begin launching an EC2 instance, type ‘ec2’ into the search bar at the top of the console. Under ‘Services’, select ‘EC2’. This will direct you to the EC2 management console. Here, you have the ability to create and launch an instance.
To initiate the process, click on the dropdown arrow next to “Launch Instance” which reveals the “Launch Instance” button.
While initiating an instance, you’re given the opportunity to name it. For the purpose of this exercise, I’m going to name our instance “My Web Server”.
As you navigate through the process of launching an instance, under the ‘Application and OS Images (Amazon Machine Image)’ category, select the Quick Start option. Next, opt for the Amazon Linux 2 AMI (Free tier eligible) machine image, using a 64-bit (x86) architecture.
Finally, set the instance type as t2.micro, which is eligible for the free tier.
As you proceed to the ‘Key pair (login)’ stage, you’re required to generate a new key pair. Click on ‘Create new key pair’ and label it as ‘MyEC2KeyPair’. For ‘Key pair type’, pick RSA, and for ‘Private key file format’, opt for .ppk. Lastly, hit the ‘Create key pair’ button. This action will save the new key pair in your Downloads folder if you’re using a Windows system. Remember, this becomes your private key pair, while the public counterpart stays safely stored in the AWS management console.
During the ‘Network settings’ stage, keep the Network, Subnet, and Auto-assign public IP set to their default values. When you reach the Firewall (security groups) section, select the ‘Select existing security group’ option. From the ‘Common Security groups’ dropdown list, choose ‘MyWebServer-SG’.
When you reach the ‘Configure storage’ step, you can leave it as it is, set to default. To access further options, click on ‘Advanced details’.
When you’re in the ‘Advanced details’ section, scroll down to the bottom until you find the ‘User data’ section. This is optional, but for our purposes, you’ll need to input the script we created in Step 2 of Task 1: Script Creation.
Once you’ve inputted all necessary details and you’re ready to launch your EC2 instance, simply click on ‘Launch instance’. You should see a green checkmark, along with the message ‘Success! Successfully initiated launch of instance’. After that, scroll down to the bottom of the page and click ‘View all instances’ to monitor the status of your instance.
Once you’ve launched your instance, you’ll be redirected to the EC2 dashboard where you can see your newly created ‘My Web Server’. To confirm it’s operational, ensure that the ‘Instance state’ shows ‘Running’ and the ‘Status check’ indicates ‘2/2 checks passed’. To get the public IPv4 address of your instance, click on the box next to ‘My Web Server’ and then click on the overlapping square symbol. This will copy the Public IPv4 address to your clipboard.
To check if your website is successfully hosted, simply open a new web browser window or tab. Then, paste the Public IPv4 address that you’ve just copied into the URL address bar and hit Enter. If everything has been set up correctly, you should be able to see your website.
And there you go, our Mole HTML website is displayed successfully.
(Task 2) GitHub’s Entry into the Game
Step 1 on (TASK 2): Upload Web Files to a GitHub Repository
In the second task, the approach changes slightly. Instead of an S3 bucket, you upload your web files to a public GitHub repository.
It is assumed that you already have a GitHub account set up and created a public repository. If that’s not the case, there are plenty of instructional videos on YouTube that can guide you through the process.
In your Windows system, find the mole.zip web file that you downloaded earlier in the Create an S3 Bucket section. Right-click on it and choose the extract option to open the contents.
Once you’ve opened the extracted ‘mole’ folder, locate the files named ‘index.html’, ‘script.js’, ‘style.css’, and ‘README.md’ in the mole-main folder.
You can either copy or drag ‘index.html’, ‘script.js’, ‘style.css’, and ‘README.md’ files into your public GitHub repository. After moving these files, don’t forget to confirm the action by clicking the ‘Commit changes’ button.
Step 2 on (TASK 2): Another Script
Create another script for this task. Its purpose is similar to the previous one: to download the web files from the GitHub repository and host the HTML site on an EC2 instance.
1. git clone — create a copy of a remote public repository on your EC2 instance. It creates a new directory on the EC2 instance with the same name as the remote public repository.
git clone https://github.com/eardavid/static-html.git2. cp — copy the file that was extracted from the static-html folder into the /var/www/html folder. The * means copy everything on it.
cp -r static-html/* /var/www/html3. rm — is used to remove or delete the static-html folder we downloaded into the EC2 instance since we no longer need it.
rm -rf static-htmlStep 3 on (TASK 2): Adding Script to EC2 User Data
As in TASK 1, the final step is to add the script to the EC2 user data at launch. This will set up your website hosting on AWS, this time using the web files from your GitHub repository.
To check if your website is successfully hosted, simply open a new web browser window or tab. Then, paste the Public IPv4 address that you’ve just copied into the URL address bar and hit Enter. If everything has been set up correctly, you should be able to see your website.
And there you go, our Mole HTML website is displayed successfully.
Acceptance Criteria and Key Learning
The primary acceptance criterion for both tasks was to create two distinct scripts that can be added to the EC2 user data at launch. These scripts would then host the HTML website using the provided web files.
This hands-on experience was a blend of technical learning and soft skills development. We learned the nuances of AWS operations, how to adapt our methods to suit different tasks, and the importance of scripting. Furthermore, the teamwork required to complete the tasks effectively was a valuable lesson in itself.
Thanks for joining me in today’s post! Feel free to leave your thoughts, feedback, or any questions you might have.
Until next time, happy learning and exploring in the cloud!
#DevOps #CloudEngineering #JourneyToDevOps #LearningJourney #CareerTransition
