Deploying a Full Stack Web Application on AWS has been a problem for a lot of developers. A lot of my peers at University have shared their never ending and horrible experiences while trying to deploy their Web Application to Amazon Web Services (AWS). Unlike Heroku, where the stage is set for you and you just have to push your local Git Repo to Heroku, AWS is an infrastructure as a service. In other words, AWS requires you to manually configure and maintain virtualized servers . You also have to add database instances; choose and set up an OS; and set up a load balancer to spread the load across multiple application servers. On top of that, you must select a CPU and amounts of RAM and storage that satisfy your application’s needs. This sure sounds complicated, but we will go through each and every step in detail. Let’s get started!

Setup your project before deployment

Remove Redux Dev Tools from your React Code

Since we are using React for our frontend, you might have been using the Redux Dev Tools Chrome Extension. Unfortunately, only people with the Dev Tools Browser Extension will be able to use your application. So you might want to consider removing or commenting out the part of your front end code where you integrate the Redux Dev Tools Extension in order for people to be able to use your application.

Perform a Production Build of your React Application

When inside the project directory, type the following into your terminal to perform a production build of your React Application,

(Note that client is the name of the React project directory here. If your React project folder is named as something other than client, make sure you cd into that directory and not the client directory)

cd client npm run build

Setup your Node backend to serve your static assets

Make sure you are serving the React index.html file in the client/build folder in your server.js after all other routes have been configured as follows,

**Some imports .... ** const path = require(“path”); ................

Other Routes and Code...

............... (Add below code after all other routes) //Serve Static Assets in production //set static folder app.use(express.static(“client/build”)); app.get(“*”, (req, res) => { res.sendFile(path.resolve(__dirname, “client”, “build”, “index.html”)); }); ..........

More Code.....

..........

Create your AWS EC2 Instance

Step 1 — Go to your Amazon Web Services Management Console and choose Launch a virtual machine with EC2

Step 2— Configure your instance and launch your instance

In this step all you have to do is

Select AMI (Ubuntu Server 18.04 LTS (HVM) in our case)

Choose an Instance Type ( t2.micro in our case)

in our case) Do not Review and Launch Yet!

Choose Next: Configure Instance Details

Choose Next: Add Storage

Choose Next: Add Tags

Choose Next: Configure Security Group

Here you have to add two more rules.

You will see your SSH rule already configured for you.

Choose Add Rule and input the type as HTTP, Port Range as 80 and source as Anywhere.

Repeat the process with type as HTTPS, Port Range as 443 and source as Anywhere.

Choose Review and Launch and then choose Launch.

You will be asked about Key Pairs. Choose to create a new pair and name your key pair. Make sure you download your .pem key pair file and choose Launch. You have now successfully launched your AWS EC2 instance!

Connect to your EC2 Instance

Choose View Instances. Select your newly launched instance and Choose Connect. Follow the instructions that appear on the screen to connect to your EC2 instance using SHH from your terminal.

Use your terminal to cd into the directory that contains .pem key pair file.

You will need to modify permissions of your .pem file. Type the following command into your terminal,

chmod 400 ./YOUR_KEY_PAIR_NAME.pem

You can then SSH into the EC2 Instance’s Ubuntu server using the following command,

ssh -i “YOUR_KEY_PAIR_NAME.pem” ubuntu@YOUR_PUBLIC_DNS_IPv4

You have now successfuly SSH ed into you Ubuntu Server!

Setup your Server

Type the following in your Ubuntu server’s terminal to update your server,

sudo apt-get update sudo apt-get install -y build-essential openssl libssl-dev pkg-config

Setup NodeJS, Nginx, and Git

Type the following commands into your Ubuntu Server’s terminal to setup NodeJS, Nginx and Git,

sudo apt-get install -y nodejs sudo apt-get install npm -y sudo npm cache clean -f sudo npm install -g n sudo n stable sudo apt-get install nginx -y

Setup Git

Type the following commands into your Ubuntu Server’s terminal to setup Git,

sudo apt-get install git -y

Clone your project from GitHub

This tutorial assumes that you already have a local git repo and a GitHub remote repository. If you are not sure about how to push your project to GitHub, check this guide.

Type the following commands into your Ubuntu Server’s terminal to clone your project from GitHub,

cd /var/www sudo git clone {{your project file path on github/git}}

Link your project with Nginx

Type the following commands into your Ubuntu Server’s terminal,

cd /etc/nginx/sites-available sudo vim {{your cloned repository’s name}}

Node that this file does not exist yet. Vim will open an empty file and once you write to it and save it, it will be there. Trust me.

If you have not ever used Vim before, check this guide on basic vim commands.

Add the following code to the file (editing the placeholder text off-course) and save the file by pressing the esc key and then typing :wq and then pressing the return key to save and close the vim editor.



listen 80;

location / {

proxy_pass

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;

}

} server {listen 80;location / {proxy_pass http://{{PRIVATE -IP-OF-YOUR-EC2-INSTANCE}}:{{YOUR-NODE-PROJECT-SERVER-PORT-IN-YOUR-CODE}};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;

Link the sites-enabled with sites-available by typing the following in your Ubuntu server terminal,

sudo ln -s /etc/nginx/sites-available/{{your cloned repository’s name}} /etc/nginx/sites-enabled/{{your cloned repository’s name}}

Now type the following to remove the default file from the Nginx sites-enabled and sites-available directory,

sudo rm default sudo rm /etc/nginx/sites-enabled/default

Setup MongoDB (Note: Only follow this if you are not using an external MongoDB service like Mongo Atlas etc.)

Type the following in your Ubuntu Server’s terminal,



echo “deb [ arch=amd64,arm64 ] sudo apt-key adv — keyserver hkp://keyserver.ubuntu.com:80 — recv 9DA31620334BD75D9DCB49F368818C72E52529D4echo “deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.0 multiverse” | sudo tee /etc/apt/sources.list.d/mongodb-org-4.0.list sudo apt install udo sudo apt-get update sudo apt-get install -y mongodb-org --allow-unauthenticated

Create a directory where your database files will be stored by typing the following in your Ubuntu Server’s terminal,

sudo mkdir /data sudo mkdir /data/db

Now start your MongoDB by typing the following in your Ubuntu Server’s terminal,

sudo service mongod start

To configure automatic start of MongoDB when the server starts type the following in your Ubuntu Server’s terminal,

sudo systemctl enable mongod && sudo systemctl start mongod

Install pm2

Type the following in your Ubuntu server’s terminal to install pm2 globally,

sudo npm install pm2 -g

Install Node npm dependencies of your cloned project

Type the following in your Ubuntu server’s terminal,

cd /var/www/ sudo chown -R ubuntu {{your cloned repository’s name}} cd {{your cloned repository’s name}} sudo npm install

Install React (client server) npm dependencies of your cloned project and perform a production build

Type the following in your Ubuntu server’s terminal,

(Note that client is the name of the React project directory here. If your React project folder is named as something other than client, make sure you cd into that directory and not the client directory)

cd client sudo npm install sudo npm run build

Start pm2

Type the following in your Ubuntu server’s terminal,

cd /var/www/{{your cloned repository’s name}} pm2 start server.js

Restart Nginx

Type the following in your Ubuntu server’s terminal to restart Nginx,

sudo service nginx stop && sudo service nginx start

Conclusion

Your MERN Stack Project has now been successfuly deployed on AWS EC2! You will now be able to see your project live if you type your IPv4 Public IP on your browser.

If you have any questions, feel free to leave a comment. Also, if this helped you, please like and share it with others. I publish articles related to web development regularly. Consider entering your email here to stay up to date with articles and tutorials related to web development. You can also find out more about what I do at abdullahsumsum.com