Easy MERN Project Setup on AWS EC2 Instance

Easy MERN Project Setup on AWS EC2 Instance

Initially, when I started developing MERN Projects, my question was how to showcase them to recruiters, friends, classmates, or anyone.
 
Through research, I discovered a free method for deploying my projects, which I will share here.
 
In this blog, I will guide you step-by-step on how to deploy your MERN Project on an AWS EC2 Instance for almost free.

1. Push code to GitHub

  • Push the project to a public GitHub repository, so it is easy to clone the repository.
  • I assume that the project includes client/ and server/
  • Run the commands below outside of the folders, i.e., the root directory of the project.
Copy to clipboard
git init .
git remote add origin [replace-github-repo-url]
git add .
git commit . -m "Initial Commit."
git push -u origin main

2. Create an AWS Account

3. Launch an EC2 Instance

After successfully creating and setting up the AWS Account, follow the steps below:
  • Search for “EC2” and navigate.
  • Click the “Launch Instance” button visible on the screen.
  • Name the EC2 instance.
  • Choose the latest Ubuntu AMI.
  • Create/Download a .pem key.
  • If required, increase the storage from 8GB to 30GB (max).
  • Launch
We name the EC2 instance for easier identification in the AWS Console.
The .pem key is required to log in to the EC2 Instance by SSH.

4. Connect and Set up the EC2 Instance

Open the folder where you have saved the .pem key and open the terminal in that particular folder by entering “cmd” in the folder address bar.
Copy to clipboard
ssh -i [saved_file_name].pem ubuntu@[ec2_instance_public_ip]
Once SSH is successful and you are logged in, run the commands below to update all the packages installed on the system to their latest versions.
Copy to clipboard
sudo apt update
sudo apt upgrade -y

5. Clone and Set up the Project

Clone the Project

Copy to clipboard
git clone [github_repo_url]

Setup the Project

Copy to clipboard
cd ./[Folder_Name]
cd ./server
npm install
cd ../client
npm install
Add .env files to both the folders client/ and server/.

Build Frontend Code (React installed by Vite)

Copy to clipboard
npm run build

6. Run the Server Code with PM2

Install PM2 Globally

Copy to clipboard
npm install -g pm2

Run the Server Code

Copy to clipboard
pm2 start server.js --name mern-project

7. Access the Project

Finally to access project, we have to setup Nginx (Reverse Proxy). This will include the steps to install Nginx and add SSL certificates.

Install NGINX

Copy to clipboard
sudo apt install nginx -y

Create config files in /etc/nginx/sites-available

ui-mern.conf Config File

Copy to clipboard
cd /etc/nginx/sites-available
sudo nano ui-mern.conf
Copy to clipboard
server {
        server_name [domain_name];
        root /home/ubuntu/[FolderName]/client/dist/;
        
        location / {
                index index.html;
                try_files $uri $uri/ /index.html;
        }
}

api-mern.conf Config File

Copy to clipboard
sudo nano api-mern.conf
Copy to clipboard
server {
	listen 80;
        server_name [domain_name];
        location / {
                proxy_pass http://127.0.0.1:[Server_PORT];
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

Test and Restart Nginx

Copy to clipboard
sudo nginx -t
sudo systemctl restart nginx
You can now access the website through any browser using the domains you provided.
 

To enable SSL (https) check this 👉 Add SSL (HTTPS) to your website.

That's It!

If you have followed all the steps above with no errors, then you are good to go. If you face any error, do let me know in the comments or email me at imagarwal05@gmail.com
 
This is a lengthy process. Once you are familiar with the process, you will understand the basic concepts of project deployment.

Leave a Reply