What is MERN Application ?

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

• MongoDB - Document database (BSON object or Binary JSON)
• Express - Open source Node.js web framework
• React - A client-side JavaScript framework developed by Facebook
• Node - Node.js is an open source server environment

What is EC2 service in AWS- amazon web service ?

Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud. It is designed to make web - scale cloud computing easier for developers.

What is NGINX server ?

NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. NGINX is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption.

Deployment

We can deploy Mern Application with many ways. Two common ways are:

• Deploy Frontend at different place and Backend at different place

• Deploy the Frontend and Backend at same place ( Setting up proxy server)

In this post, we will follow second approach. We will create proxy to backend server and then deploy it to AWS using NGINX server.

Setting up proxy in Frontend

Suppose your Frontend (React app) is running on port 3000 and Backend is running on port 4001 . Then we have to add proxy on port 4001 for backend accessible.

Steps:

• Open package.json file in your react app.
• Paste "proxy": "localhost:4001" in last line of package.json file.

In my case package.json looks like:

{
  "name": "projfrontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "history": "^5.0.0",
    "query-string": "^6.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-stripe-checkout": "^2.6.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:4001"
}

Setup The server on AWS

Now, we will make instance in EC2 service given by AWS and then we wil setup Nginx server.

• Sign up to AWS (Amazon web serive)

• Select EC2 service from the search box

• Go to Instances section

• Click on Launch Instances.