DevOps Learning Journey
Week # 05: DevOps Learning Journey - How to Deploy a Static Website on AWS EC2: A Step-by-Step Guide

Week # 05: DevOps Learning Journey - How to Deploy a Static Website on AWS EC2: A Step-by-Step Guide

Malik Muneeb Asghar's photo
Malik Muneeb Asghar
·

4 min read

Table of contents

Introduction

Hosting a static website on AWS EC2 is a powerful way to gain complete control over your web server environment. In this guide, we'll walk through the steps to launch an EC2 instance, configure it with an Ubuntu machine, and host a static website. By the end of this tutorial, you will have a live static website running on an AWS EC2 instance.

Prerequisites

Before we begin, ensure you have the following:

  • An AWS account

  • Basic knowledge of using the terminal

  • A static website ready to be deployed

Step 1: Launch an EC2 Instance

  1. Log in to your AWS Management Console

    • Navigate to the EC2 Dashboard.

  2. Launch Instance

    • Click on the “Launch Instance” button.

  3. Choose an Amazon Machine Image (AMI)

    • Select “Ubuntu Server 20.04 LTS (HVM), SSD Volume Type” from the list of available AMIs.

  4. Choose an Instance Type

    • Select the “t2.micro” instance type, which is eligible for the free tier.

  5. Configure Instance

    • Keep the default settings and click “Next: Add Storage”.

  6. Add Storage

    • The default settings are usually sufficient, but you can adjust the size if needed. Click “Next: Add Tags”.

  7. Add Tags

    • Add a tag to name your instance. For example, “Name: MyStaticWebsite”. Click “Next: Configure Security Group”.

  8. Configure Security Group

    • Create a new security group with the following rules:

      • Type: SSH | Protocol: TCP | Port Range: 22 | Source: Anywhere (0.0.0.0/0)

      • Type: HTTP | Protocol: TCP | Port Range: 80 | Source: Anywhere (0.0.0.0/0)

    • Click “Review and Launch”.

  9. Review and Launch

    • Review your instance settings and click “Launch”.

    • You will be prompted to create a new key pair or use an existing one. Choose “Create a new key pair”, download it, and click “Launch Instances”.

  10. View Instances

    • Click “View Instances” to see your running instance.

Step 2: Connect to Your EC2 Instance

  1. Connect via SSH

    • Open your terminal and navigate to the directory where your key pair file (.pem) is located.

    • Run the following command to change the permissions of your key pair file:

        chmod 400 your-key-pair.pem

    • Connect to your instance using the following command:

        ssh -i "your-key-pair.pem" ubuntu@your-instance-public-dns

Step 3: Install Git, Node.js, and npm

  1. Update the Package List

    • Once connected, update your instance’s package list:

        sudo apt-get update

  2. Install Git

    • Install Git using the following command:

        sudo apt-get install git -y

  3. Install Node.js and npm

    • Install Node.js and npm using the following commands:

        sudo apt-get install nodejs -y
  sudo apt-get install npm -y

Step 4: Clone Your Repository and Install Dependencies

  1. Clone Your Git Repository

    • Navigate to the desired directory and clone your static website’s repository:

        git clone https://github.com/your-username/your-repository.git
  cd your-repository

  2. Install Project Dependencies

    • Install the necessary dependencies using npm:

        npm install

Step 5: Start the Server

  1. Run Your Application

    • Start your application server:

        npm start

Step 6: Configure Security Group for Port 3000

  1. Open Security Groups in AWS

    • Go to the EC2 Dashboard and select “Security Groups” from the left-hand menu.

  2. Edit Inbound Rules

    • Select the security group associated with your EC2 instance.

    • Click on “Edit inbound rules” and add the following rule:

      • Type: Custom TCP | Protocol: TCP | Port Range: 3000 | Source: Anywhere (0.0.0.0/0)

    • Save the rules.

Step 7: Access Your Website

  1. Visit Your Website

    • Open your web browser and enter the public DNS address of your EC2 instance followed by :3000. For example:

        http://your-instance-public-dns:3000

    • You should see your static website live and accessible.

Conclusion

Congratulations! You have successfully deployed a static website on an AWS EC2 instance. This guide covered launching an EC2 instance, installing Git, Node.js, and npm, cloning your repository, installing dependencies, and starting your server. By following these steps, you now have a solid understanding of how to host a static website using AWS EC2.

Stay tuned for more tutorials as we continue our journey with AWS and other cloud technologies.
Happy hosting! 🚀

AWSWeb DevelopmentUbuntu