Deploying Web application on AWS EC2 instance with Nginx

Murali mahadeva B S

3 min readJun 3, 2021

📜 Requirement: You should have a running AWS account.

Table of contents:

Creating an AWS Ubuntu instance.
SSH into the server.
Installing and configuring Nginx.
Pushing the files to the server.

Creating an AWS Ubuntu instance

Search for ec2 and click on launch instance.
Select Ubuntu Operating system.
Click on Configure Instance Details => Add storage => Add tags.
In Configure security groups, add rules. Add HTTP, HTTPS and a custom TCP with port 8000 (replace with any port you want to server your site on) and select source to be anywhere.
Click launch. Select “Create new key pair” from the dropdow. Give keypair a name and download it. Its a “.pem” which we will later use to login into the server.
Finally launch instance.

SSH into the server

Go to EC2 instances list and you will find your newly created instance. Its instance state should be “Running” or give it some time and refresh the page.
Click on the instance id and click connect.
In EC2 instance connect tab, click on connect to open the remote ubuntu server instance from the browser. If you want to connect from your command line or terminal select SSH client tab.
Copy the command that looks similar to this ssh -i "medium-blog.pem" ubuntu@ec2-18-236-174-86.us-west-2.compute.amazonaws.com
Go to command line or terminal and paste this command. Make sure you have that “.pem” file we downloaded earlier is in that directory from where you are executing this command.

Installing and configuring Nginx

sudo apt-get update (Updates the system packages).
sudo apt install nginx (Installs Nginx).
Create a file in /etc/nginx/sites-available/ directory. Name the file as your project’s name. I’ll be naming it as sample without any extension.
I’ll be using vim as the editor. sudo vi sampleopens a file named sample in vim editor. Paste the below content into it.

🔗 If you want to learn more about vim checkout my other blog here.

server {
        listen 8000;
        listen [::]:8000;

        root /var/www/sample;
        index index.html index.htm index.nginx-debian.html;

        server_name sample;

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

It says to listen on port 8000. Root directory of the project is var/www/sample . It will search for files with the name index, index.html and so on. If it doesn’t find anything it will give you 404. Type :wq! to exit out of the vim editor.

5. Running sudo ln -s /etc/nginx/sites-available/sample /etc/nginx/sites-enabled/ will map this configuration file to sites-enabled directory. Now change the permission of directory where your project is going to be and restart the Nginx service.

⚠️ In the above command use the full path to sites-available and sites-enabled directories if not if causes some issue.

sudo chown -R $USER:$USER /var/www/samplesudo chmod -R 755 /var/www/samplesudo systemctl restart nginx sudo nginx -t

Pushing files to the server

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>
<body>
    <h1>Hello people</h1>
</body>
</html>

Create a file named index.html and paste the above content. Its just a sample html file. You can replace your html file, but make sure the name remains index.html or you have include that name in Nginx configuration file.

scp -i medium-blog.pem -r index.html ubuntu@ec2–18–236–174–86.us-west-2.compute.amazonaws.com:/var/www/sample

The above command should run in your local machine’s terminal or command line. It will push the index.html file to the remote server to the location /var/www/sample which has been set as the root directory in nginx config file.
I have used scpto copy files to a remote server here. In place of a single file you can copy any number of files or a directory.
Login to your remote server and verify whether index.html file placed within sample directory.

All the steps are done. Now go to the EC2 instance’s URL with 8000 as the port, you will see the html content.

“http://ec2-18-236-174-86.us-west-2.compute.amazonaws.com:8000/”

Not just a single html file, you can deploy even Reactjs applications. After build it will generate a build folder with index.html file. Push all the contents of that file into project folder in remote server it will work the same.

Thank yourself for learning something new

Stay curious… Stay creative… 👋

Deploying Web application on AWS EC2 instance with Nginx

Creating an AWS Ubuntu instance

SSH into the server

Installing and configuring Nginx

Pushing files to the server

Written by Murali mahadeva B S