DEPLOYING A STATIC WEB PAGE ON NGINX WEB SERVER

Beginner's Guide: Deploying a Landing Page on Nginx (Azure & AWS EC2)

1. Introduction

This guide will walk you through deploying a simple landing page (HTML, CSS, JavaScript) on Nginx, using both Azure and AWS EC2. The webpage will be fetched from a GitHub repository. Additionally, we will address common SSH key access issues on Windows for AWS users and their solutions.

---

2. What is Nginx and Why Use It?

What is Nginx?

Nginx (pronounced "Engine-X") is a high-performance web server commonly used for hosting websites and acting as a reverse proxy.

Why Use Nginx?

• ✅ Fast & Efficient – Handles multiple connections efficiently.
• ✅ Serves Static Files – Ideal for hosting HTML, CSS, JavaScript pages.
• ✅ Reverse Proxy & Load Balancing – Used for forwarding requests and balancing traffic.
• ✅ Security & Scalability – Works well with SSL and large-scale applications.

---

3. Setting Up a Virtual Machine (VM)

We will set up a Ubuntu 20.04 LTS VM on both Azure and AWS EC2.

🔹 Option 1: Create an Azure Virtual Machine

1. Log in to Azure Portal → https://portal.azure.com
2. Go to "Virtual Machines" → Click "Create New"
3. Choose Configuration:
   • OS: Ubuntu 20.04 LTS (Recommended)
   • Size: B1s (Cheapest for basic usage)
   • Authentication: SSH Key (Download & Save the key)
4. Allow HTTP & SSH Ports:
   • Go to Networking → Add inbound rule for:
     • SSH: Port 22 (For remote access)
     • HTTP: Port 80 (For web traffic)
5. Click "Review + Create" → Wait for Deployment to Complete

🔹 Option 2: Create an AWS EC2 Instance

1. Log in to AWS Console → https://aws.amazon.com/
2. Go to EC2 Dashboard → Launch Instance
3. Choose Configuration:
   • OS: Ubuntu 20.04 LTS
   • Instance Type: t2.micro (Free Tier)
   • Key Pair: Create or use an existing key (Save .pem file)
4. Configure Security Group:
   • Allow SSH (Port 22) and HTTP (Port 80)
5. Click "Launch" → Wait for Instance to Start

---

4. Creating & Uploading Your Landing Page to GitHub

Step 1: Create a New Repository on GitHub

1. Go to GitHub, log in, and click New Repository.
2. Enter a repository name (e.g., landing-page).
3. Select Public or Private.
4. Click Create Repository.

Step 2: Push Your Code to GitHub

In your local project folder, run:

cd path/to/your/project

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin YOUR_GITHUB_REPO_URL
git push -u origin main

---

5. Connecting to Your Server (Resolving SSH Key Issues on Windows)

Common Issue: Key Not Accessible (AWS)

When trying to connect:

ssh -i "C:\Users\USER\Downloads\aws-key.pem" ubuntu@YOUR_EC2_IP

You might get:

Warning: Identity file not accessible: No such file or directory.
Permission denied (publickey).

Solution

1. Move Key to a Secure Folder:

   mkdir C:\Users\USER\.ssh
   move "C:\Users\USER\Downloads\aws-key.pem" C:\Users\USER\.ssh\

1. Change File Permissions (Windows Alternative to chmod 400):

   • Open PowerShell as Administrator and run:

    icacls C:\Users\USER\.ssh\aws-key.pem /inheritance:r
    icacls C:\Users\USER\.ssh\aws-key.pem /grant:r USER:F
   

2. Connect Again Using Correct Path:
   

   ssh -i "C:\Users\USER\.ssh\aws-key.pem" ubuntu@YOUR_EC2_IP

---

6. Installing & Configuring Nginx

Once connected to your server (Azure or AWS EC2):

Step 1: Update and Install Nginx

sudo apt update && sudo apt install -y nginx

Step 2: Start & Enable Nginx

sudo systemctl start nginx
sudo systemctl enable nginx

Step 3: Allow Traffic on Port 80

sudo ufw allow 'Nginx HTTP'
sudo ufw enable
sudo ufw status

---

7. Fetching the Landing Page from GitHub

Step 1: Install Git (if not installed)

sudo apt install git -y

Step 2: Clone Your GitHub Repository

Replace YOUR_GITHUB_REPO_URL with your actual repository URL:

cd /var/www/html
sudo git clone YOUR_GITHUB_REPO_URL landing-page

Step 3: Set Permissions

sudo chown -R www-data:www-data /var/www/html/landing-page
sudo chmod -R 755 /var/www/html/landing-page

---

8. Configuring Nginx for Your Website

Step 1: Create Nginx Configuration File

sudo nano /etc/nginx/sites-available/landing-page

Step 2: Add This Configuration

server {
    listen 80;
    server_name YOUR_SERVER_IP;
    root /var/www/html/landing-page;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Save and exit (CTRL + X → Y → ENTER).

Step 3: Enable the Configuration

sudo ln -s /etc/nginx/sites-available/landing-page /etc/nginx/sites-enabled/

Step 4: Restart Nginx

sudo systemctl restart nginx

---

9. Verify Deployment

1. Open a browser and visit:

   http://YOUR_SERVER_IP

1. Your landing page should be visible! 🎉

---

10. Conclusion

✅ You have successfully deployed your landing page on Nginx using Azure or AWS EC2.
✅ Your site is now live and accessible via the internet.
✅ You also learned how to fetch files from GitHub and fix common SSH key issues in AWS.