React + Node.js on AWS - How to Deploy a MERN Stack App to Amazon EC2
In this tutorial we're going to setup 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?
A MERN Stack application is made up of a front-end app built with React that connects to a back-end api built with Node.js + Express + MongoDB, hence the name MERN Stack (Mongo, Express, React, Node). Other variations of the stack include the MEAN Stack that has an Angular front-end, and the MEVN Stack that has a Vue.js front-end.
Scope of this tutorial
This tutorial will be focused on setting up the server on AWS EC2, then deploying and configuring the front-end and back-end pieces of the MERN stack app to work together. For more in-depth information about the React app or Node.js api used in this post, check out the following tutorials which cover them in detail:
- React + Redux - User Registration and Login Tutorial & Example
- NodeJS + MongoDB - Simple API for Authentication, Registration and User Management
Tutorial Contents
- Create a new Ubuntu server on AWS EC2
- Connect to Ubuntu EC2 instance via SSH
- Setup server with Node.js + MongoDB + NGINX
- Deploy Node.js + MongoDB back-end API
- Deploy React + Redux Front-end app
- Configure NGINX to serve API and front-end
- Test the MERN Stack app in a browser
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.
- Sign into the AWS Management Console at https://aws.amazon.com/console/. If you don't have an account yet click the "Create a Free Account" button and follow the prompts.
- Go to the EC2 Service section.
- Click the "Launch Instance" button.
- Choose AMI - Check the "Free tier only" checkbox, enter "Ubuntu" in search box and press enter, then select the "Ubuntu Server 18.04" Amazon Machine Image (AMI).
- Choose Instance Type - Select the "t2.micro" (Free tier eligible) instance type and click "Configure Security Group" in the top menu.
- Configure Security Group - Add a new rule to allow HTTP traffic then click "Review and Launch".
- Review - Click Launch
- Select "Create a new key pair", enter a name for the key pair (e.g. "my-aws-key") and click "Download Key Pair" to download the private key, you will use this to connect to the server via SSH.
- Click "Launch Instances", then scroll to the bottom of the page and click "View Instances" to see details of the new Ubuntu EC2 instance that is launching.
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.
- Open a terminal window and update the permissions of the private key file with the command
chmod 400 <path-to-key-file>e.g.chmod 400 ~/Downloads/my-aws-key.pem, the key must not be publicly viewable for SSH to work. - Copy the "Public DNS (IPv4)" property from the instance description tab in the AWS Console, then connect to the instance from the terminal window with the command
ssh -i <path-to-key-file> ubuntu@<domain name>e.g.ssh -i ~/Downloads/my-aws-key.pem [email protected] - Enter
yesto the prompt "Are you sure you want to continue connecting (yes/no)?" to add the url to your list of known hosts.
NOTE: If you're using Windows you can connect to your instance via SSH using the PuTTY SSH client, for instructions see Connect Using PuTTY in the AWS docs.
Setup Web Server with Node.js + MongoDB + NGINX
The below command executes a script to automatically setup and configure a production ready MERN Stack web server on Ubuntu that includes Node.js, MongoDB, PM2, NGINX and UFW.
For more details about how the script works see Setup Node.js + MongoDB Production Server on Ubuntu.
While connected to the new AWS EC2 instance in the terminal window, run the following command:
curl https://gist.githubusercontent.com/cornflourblue/f0abd30f47d96d6ff127fe8a9e5bbd9f/raw/e3047c9dc3ce8b796e7354c92d2c47ce61981d2f/setup-nodejs-mongodb-production-server-on-ubuntu-1804.sh | sudo bash
For instructions on how to securely connect to the remote MongoDB server from your local machine using Mongo Shell or MongoDB Compass see Connect to remote MongoDB on AWS EC2 simply and securely via SSH tunnel.
Deploy Node.js + MongoDB Back-end API
Follow these steps to setup the Node.js API on the server and configure NGINX to enable access to it.
- Clone the Node.js + MongoDB API project into the
/opt/back-enddirectory with the commandsudo git clone https://github.com/cornflourblue/node-mongo-registration-login-api /opt/back-end - Navigate into the back-end directory and install all required npm packages with the command
cd /opt/back-end && sudo npm install - Start the API using the PM2 process manager with command
sudo pm2 start server.js
The API is now running on Node.js under the PM2 process manager and listening on port 4000. Only port 80 (HTTP) is publicly accessible on the server so we can't hit the API yet, this will be possible after we've configured NGINX as a reverse proxy to pass through HTTP traffic to the api (more on this shortly).
Deploy React + Redux Front-end app
Follow these steps to setup the React application on the server.
- Clone the React + Redux project into the
/opt/front-enddirectory with the commandsudo git clone https://github.com/cornflourblue/react-redux-registration-login-example.git /opt/front-end - Navigate into the front-end directory and install all required npm packages with the command
cd /opt/front-end && sudo npm install - Update the app to use real backend API:
- Run the command
sudo nano /opt/front-end/src/index.jsxto open the main react entry file in the nano text editor. - Delete the following lines from the file to remove the fake backend that the react app uses by default:
// setup fake backend import { configureFakeBackend } from './_helpers'; configureFakeBackend(); - Save the file by pressing
ctrl+xand selectingYesto save.
- Run the command
- Configure the path to API:
- Run the command
sudo nano /opt/front-end/webpack.config.jsto open the webpack config file in the nano text editor. - Change the
apiUrlconfig property to'/api'like below so it points to the public path we configured in NGINX in the previous section:// global app config object config: JSON.stringify({ apiUrl: '/api' }) - Save the file by pressing
ctrl+xand selectingYesto save.
- Run the command
- Build the front end app with the command
sudo npm run build
The React app is now built and ready to be served from the /opt/front-end/dist directory, in the next step we'll configure our NGINX web server to enable access to it.
Configure NGINX to serve the Node.js API and React front-end
Since our MERN Stack application is made up of two separate projects that both need to be accessed via the same port (HTTP on port 80), we're going to use NGINX as our public facing web server to receive requests for both the front-end and back-end, and decide where to send each request based on its path. Requests beginning with the path /api/* will be proxied through to the Node.js api running on port 4000, while other requests will serve the React front-end app and associated files (js/css/images).
Follow these steps to configure NGINX for the MERN stack app.
- Delete the default NGINX site config file with the command
sudo rm /etc/nginx/sites-available/default - Launch the nano text editor to create an new default site config file with
sudo nano /etc/nginx/sites-available/default - Paste in the following config:
server { listen 80 default_server; server_name _; # react app & front-end files location / { root /opt/front-end/dist; try_files $uri /index.html; } # node api reverse proxy location /api/ { proxy_pass http://localhost:4000/; } } - Save the file by pressing
ctrl+xand selectingYesto save. - Restart NGINX with the command
sudo systemctl restart nginx
NGINX Config Reference
server { ... } defines a server block which contains the configuration for a virtual server within NGINX.
listen 80 default_server; uses the listen directive to configure the virtual server to accept requests on port 80 and sets it as the default virtual server on this NGINX server.
server_name _; uses the server_name directive to set the server name to an underscore (_) to make this server block a catch-all block that matches any domain name that doesn't match another more specific server block. Since this example has only one server block it will match all domain names.
location / { ... } defines a location block which contains the configuration for requests that have a URI beginning with a forward slash (/), unless the request URI matches another more specific location block.
root /opt/front-end/dist; uses the root directive to set the root directory to the front end dist folder (/opt/front-end/dist) for requests matching this location block.
try_files $uri /index.html; uses the try_files directive to first check for the existence of a file matching the request URI ($uri) and returning it if there is one. If no file matches the request URI then it defaults to returning /index.html.
location /api/ { ... } defines a location block which contains the configuration for requests that have a URI beginning with /api/.
proxy_pass http://localhost:4000/; uses the proxy_pass directive to proxy requests beginning with /api/ through to the Node.js API running at http://localhost:4000/.
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.
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!