How to Deploy a MERN Stack application to AWS Amazon EC2
In this tutorial we're going to set up a production-ready web server from scratch on the Amazon EC2 (Elastic Compute Cloud) service, then deploy a custom MERN Stack application to it that supports user registration and authentication.
What is a MERN Stack App, and how does it work?
A MERN Stack framework is made up of a React front-end app that connects to a Node.js + Express + MongoDB backend API, hence the name MERN Stack (Mongo, Express, React, Node). and we can also use MEAN Stack, which uses an Angular front-end, and the MEVN Stack, which uses Vue.js, which are two other variants of the stack and all are full-stack development.
Scope in this tutorial blog.
This tutorial will cover setting up the server on AWS Amazon EC2, as well as deploying and configuring the MERN stack app's front-end and back-end components to function together. Check out the following tutorials blog for more details on the React app and Node.js API used in this post:
step1: Create a new Ubuntu server on AWS EC2
Before doing anything we need a server that we can work on, follow these steps to spin up a new Ubuntu 18.04 server instance on AWS EC2.
step2: Connect to Ubuntu EC2 Instance via SSH
Once the EC2 instance reaches a running state you can connect to it via SSH using the private key downloaded in the previous step.
step3: Cloning the projects in the ubuntu os in amazon ec2.
Commands should follow and type this command in ubuntu amazon ec2
Step4: Setup server with Node.js + MongoDB in amazon ec2 ubuntu server.
Option 1 - How to Install Nodejs On Ubuntu 20.04
Option 2- Another way to Installing Node.js with Apt Using a NodeSource PPA
Option 3- Installing Node Using the Node Version Manager
How to Install MongoDB On Ubuntu 20.04
or if this not work try this command to install
Run MongoDB Community Edition
Uninstall MongoDB Community Edition
To completely remove MongoDB from a system, you must remove the MongoDB applications themselves, the configuration files, and any directories containing data and logs. The following section guides you through the necessary steps.
How To Installing PM2 on Ubuntu 20.04
Next let’s install PM2, a process manager for Node.js applications. PM2 makes it possible to daemonize applications so that they will run in the background as a service.
npm to install the latest version of PM2 on your server:
Step5: Setup and install all the packages in the clone project in ec2.
1. Install packages on server-side
2. install packages on the client-side
If you face any error in client permission denied error
and start the build again sudo npm start
Step6: Change proxy server in server.js in the ubuntu server.
change proxy server URL into http://127.0.0.1:5000 and click ctrl+x - Y - enter
Step7: install pm2 and run the pm2 in both server and client in AWS ec2
PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.
Start Run pm2 in server Side of the Mern Stack
Start Run pm2 in client of the Mern Stack
Managing application state in pm2 and this is optional is simple here are the commands:
Step8: Test your new MERN Stack application running on AWS
- Enter the hostname of your AWS EC2 instance in a browser to access and test your new MERN stack application.
- The hostname is the "Public DNS (IPv4)" property located on the instance description tab in the AWS Console.
- open the public IP in the instance and with port number http:// 220.127.116.11 :3000 and you will get.
Step 9: Setting Up Nginx as a Reverse Proxy Server On MERN Applications:
Your application is up and running on localhost, but you need to make it accessible to your users. For this, we will use the Nginx web server as a reverse proxy.
You put up your Nginx settings in the /etc/nginx/sites-available/notes4free.in a file in the required instruction. To edit this file, go to:
You should already have a location/block within the server block. The following configuration should be used to replace the contents of that block. Update the highlighted area to the correct port number if your application is set to listen on a different port:
This tells the server to reply to requests from the root directory. Assuming our server is available at notes4free.in, a web browser request to https://example.com/ would be sent to hello.js, which is listening on port 3000 at localhost.
To enable access to other applications on the same server, you can add other location blocks to the same server block. If you had another Node.js application running on port 3001, for example, you might use this location block to allow access to it via https://notes4free.in/app2:
Once you are done adding the location blocks for your applications, save the file and exit your editor.
Make sure you didn’t introduce any syntax errors by typing:
If your Node.js application is up and running, and your application and Nginx configurations are proper, you should be able to access it using the Nginx reverse proxy now. Try it out by going to the URL of your server (its public IP address or domain name).
The page will open with the public IP and MongoDB and reactjs is connected with each other with the help of pm2, and the MERN application works good in the public IP and link this public IP to the domain name