The step-By-Step Guide to Deploy your MERN Stack App on AWS

You put in all the hard work of writing the code, but once it’s time to deploy it, you feel stuck.

There are lot of different tools out there, But you want to deploy it on AWS.

Wow this AWS looks complicated. Well, guess the app has to sit on your local machine forever then, right?

No, here is the step-By-Step Guide to Deploy your MERN Stack App on AWS

So, what is AWS ? AWS stands for Amazon Web Services,  it’s a cloud computing platform that provides developers with a wide array of cloud services.

Step 1 – Signup on AWS

If you’ve already got an Amazon account usually it’s fairly easy to link them up.

Otherwise the process is very straightforward.

Step 2 – Create an AWS instances.

1- Login to console and under the services, click on EC2

2 – Pick the nearest server from navbar and scroll below and click on launch instances.

3 – Choose an Amazon Machine Image (AMI)

4 – Choose an Instance Type.

5- Review Instance Launch (Make sure it falls into free tier)

6 – To allow you to connect your instance securely aws let you Create a private key pair. name it using camelCase ie: taniskAws 

7 – Download the key Pair (Attention : You won’t be able to download it again so keep it in secure location)

8 – Launch the instances.

Step 3 –  Connect your VM Server with Command line

1 – On your ec2 instance Dashboard click on connect button.

2 –  Make a directory using mkdir and move your private key pair inside that folder. mv ~/Downloads/taniskAws.pem ~/awsDeploy/

3 – key must not be publicly viewable for SSH to work, After moving private key into newly created directory, use the command to change permission to read only : – sudo chmod 400 taniskAws.pem

4-  Select A standalone ssh client Connection method.

5 – To Connect your Server with the Command line, copy the command line given by aws  and paste it on the terminal. Now you should be logged in.

Congratulations! You now have Successfully connected your server with command line

Step 4 – Serve React Build within Express app.

1 – Make a production build of the react app, by running the command npm run build

2 – Copy the production build folder to the server folder, by running the command, cp -r build/ ../server

3 – Inside server, Go into your main app.js folder, and under the const app = express(); write code: app.use(express.static(‘build’))

4 – Remove the proxy from package.json that was used for development.

5 – Your app is now ready for production, push it on github

Step 5 – Install nodejs and Clone your app from github.

1 – To get the latest version of node run the curl command – curl -sL | sudo -E bash -

2 -Install the nodeJs by running the command –  sudo apt install nodejs

3 – Check the node version, node --v

4 – Make a directory by running the command mkdir appName

5 – Go inside your appName by running the command, cd appName

6 – clone your project by running the command – git clone

7- inside your app server, install dependencies by running the command, npm install

8 – Test app successfully installed or not by running the command, npm start.

Now you can access your app on your default express port, but to make it secure.

We need to do a reverse proxy it, which will redirect the traffic from your App’s PORT to PORTs 80 & 443.

Step 6 – Setup process manager to keep your app running forever like nodemon do in development.

1- install process manager pm2 globally by running the command npm i -g pm2

2 – Instead of running npm start, now run the app by command pm2 start fileName.js

3 – Try checkking status by running command, pm2 status

4 – Try stopping the pm2 by running command pm2 stop fileName.js

5 – Try restarting the app by running command pm2 restart app.js

7 –  To see the apps pm2 is running, run the command pm2 list

8 – At last To make sure app starts when reboot, run the command pm2 startup ubuntu.

Step 7 – Setup uncomplicated firewall (ufw)

We want to setup a firewall blocking default port and then in next step we’ll setup NGINX as a reverse proxy so we can access it directly using port 80 and 443.

1 – First Check the ufw status by running the command, ufw status, you should get a status as inactive.

2 – Now enable the firewall by running the command, sudo ufw enable

3 – Now try Checking the ufw status again by running the command, ufw status, you should get a status as active this time.

4 – Now allow our ssh port, by running the command, sudo ufw allow ssh

5 – Now allow http port, by running the command, sudo ufw allow http

6 – Now allow https port by running the command, sudo ufw allow https

Step 8 – Install NGINX for Reverse Proxy.

We want to use nginx to redirect the trafic from your app default port to port 80.

1 – Install nginx by running the command,sudo apt install nginx

2 – You need to Configure sites available default file to do that run the command, sudo nano /etc/nginx/sites-available/default

3 – Scroll below to the location block, and remove current block and, copy paste the following command, this will redirect whatever default port your app is running to port 80.

server_name; # configure by whatever domain your app is using

    location / {
        proxy_pass http://localhost:5000; #configure by whatever port your app is running
        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;

4 – Now restart the nginx, by running the command, sudo service nginx start

Congratulations! You have successfully redirected the traffic from local port to port 80

Step 9 – Connecting your domain to your server.

1- Whatever domain provider you are using, Locate to the DNS section.

2 – Copy Ip address from Ec2.

3 – Click on Edit DNS Record ( Type A) – Delete the current ip address and paste Ec2 Ip Address. This will Point your Domain to your Server

Step 10 – Add Secure Socket layer

1 – Install ppa by running the Command sudo add-apt-repository ppa:certbot/certbot

2 – Now run the Update by following the Command sudo apt-get update

3 – Install python certbot nginx by running the command sudo apt-get install python-certbot-nginx

4 – Add our installed certificate by running the command sudo certbot --nginx -d -d

5 – Renew the certificate by running the command, certbot renew --dry-run

Closing Notes: –

I hope all of you would have enjoyed reading this article. We at always aspire to deliver the best stuff that we can serve to our readers. Your satisfaction is our topmost priority.

In the end, we request you to share this post to all social media platforms of your choice. And please float it into your friend circle as well.

Thanks for reading, If you have any questions , please ask questions in the comments below.

More Posts:-

I Was Scared of JS Promises In 2017, But I’m Super-Brave in 2020 (Learn My Tricks)

Step by Step plan that will Get You From ZERO to PASSING a coding interview (at Google, Facebook, Amazon)

Calling All New Developers. Understand How do JS closures work?

The Ultimate Guide to become a full stack web developer in 3 easy step

7 Amazing Array Methods to Boost your Javascript Skills Today

33 Most Powerful linux Commands To Run in Terminal

Who Else Wants to Clear confusion about Javascript Hoisting [Step-by-Step]

Tanisk jha

Mission-Driven Self taught Software Developer with a passion for thoughtful UI Design, collaboration and writing.
Tanisk jha

Leave a Reply

Your email address will not be published. Required fields are marked *