Production Grade Deployment of a Full Stack Web App (React + Node) With Docker and EC2 | HackerNoon

Deployment.. Don’t know about you, but no matter how many times I deployed my apps, I always keep a stash of notes somewhere on stickies to remember what to do, why, and when.

So, finally, I decided to put together this practical step-by-step guide for deploying a React + Node app on an EC2 virtual machine using Docker, Docker Compose, and Nginx.

Although beginner-friendly, this guide is suitable for production-grade applications. We’ll cover setting up SSL and HTTPS, restricting inbound traffic, and using Docker Compose for easier instance management.

What We’ll Do in This Guide

• Create a React frontend app
• Create a Node backend app
• Create a Dockerfile for the frontend and backend
• Create a Docker Compose file
• Launch our server / EC2 instance
• Copy project files to the server
• Configure DNS settings
• Configure the server
• Configure Nginx
• Setup SSL and HTTPS

Prerequisites

• AWS Account with necessary permissions
• Node.js and npm installed on your machine

1. Create a React Frontend App

Let’s create our boilerplate React app. I’m usually using Vite, since CRA started to give me troubles after the React 19 release.

But also, Vite’s server is faster, and it has smaller, better-optimized bundles.

Next, we’ll create a root project directory (I called it my-sample-app) and in this directory, create your React app.

When prompted, provide:

• The name for your frontend React app (in my case, it’s called client)
• Framework → React
• Variant → JS or TS as you prefer

Create a Node Backend App

In the root project directory, create a directory for your backend project (I called mine backend).

In the backend folder, initiate npm and install the Express server:

npm init -y
npm i express

In the backend folder, create an index.js file with basic server configurations and a sample API endpoint (GET /api):

This is how your folder structure should look, at this point:

Create a Dockerfile for the Frontend and Backend

Inside the client folder (where your React app is), create a Dockerfile:

Create a Dockerfile in your backend folder as well:

Create Docker Compose File

In the root project directory, create a docker-compose.yml file:

Launch Server / EC2 instance

Now it’s time to create our server, i.e., launch the EC2 instance.

Log in to AWS Console → Search for EC2 in the search bar → Go to EC2 Console:

Click on the “Launch instance” button.

Give your instance a name:

Select OS for your server, in my case – Amazon Linux 2023 AMI:

Select instance type for your server, in my case – t2.micro, which is free tier eligible:

If you don’t already have a .pem key, create one here. Click on “Create new key pair”:

Provide a name for your key pair, select RSA key pair type, .pem format and click on “Create key pair”:

In the network settings section, select the following options (can be tweaked later to for “tighter” access):

Leave the rest as default and finally, click “Launch instance” and wait a few minutes until the instance is in running state and has all checks passed in status check columns:

Copy Project Files to the Server

Now that we have created our server, let’s connect to it using SSH and a .pem key pair.

First, please note the public IP of the server. Click on the created EC2 instance ID and copy its public IPv4 address:

Open the terminal on your local machine, go to the directory where your .pem file is stored, and connect to the server as shown in Picture 15. Enter “yes” when prompted:

Now that you have ensured a successful SSH connection to the server, exit the server by typing “exit”.

We now have to copy our project files to the server.

You can do this in numerous ways. Usually, you would establish an SSH connection between EC2 and where your code is stored (i.e., BitBucket, GitHub, Azure DevOps, etc.).

In our case, we will just copy the project from our local machine directly to the server, and we already have an established SSH connection for this, so in your terminal run:

scp -i <path_to_your_key> -r <path_to_your_project_folder> ec2-user@<public_ip_of_your_ec2>:~/

Replace the path to your key, the path to your project, and the public IP of your EC2 instance as required.

For example:

scp -i my-sample-app-key-pair.pem -r /Users/marinka/Desktop/my-sample-app [email protected]:~/

The above command will copy your project to the server.

Now SSH back to your server (ref. Picture 15) and check that your project files are now available on the server by running ls

Configure DNS settings

To make your app available on a chosen domain or, in our case, subdomain, you need to log into your DNS provider.

For the sake of this article, I will deploy my sample app to sampleapp.catbytes.io.

Log in to your DNS provider (in my case, IONOS) and find where you can add a new DNS record.

If you want to deploy to a subdomain, add a new “A record” with the following values:

• Host name: your preferred subdomain name, the part that comes before the domain itself

• Points to: the public IP of your EC2 instance

• TTL: time to live, i.e., time that specifies how long a DNS record can be cached before it needs to be refreshed, and display your deployed changes

After you add a new DNS record, it will take some time to propagate.

You can use a website like dnschecker.org to check the propagation status.

After full propagation, your subdomain/domain should point to the public IP of your EC2 instance:

Configure the Server

Since we’re using Amazon Linux 2023, we will proceed with dnf for installing the required packages.

Connect to your server using SSH (ref. Picture 15).

Update packages

sudo dnf update -y

Install Docker

sudo dnf install docker -y

Start and enable Docker

sudo systemctl start docker

sudo systemctl enable docker

Add your user to the Docker group

sudo usermod -aG docker ec2-user

Download the Docker Compose binary:

`sudo curl -L "https://github.com/docker/compose/releases/download/v2.24.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose`

Run the below command to make it executable:

sudo chmod +x /usr/local/bin/docker-compose

Run the below command to verify Docker Compose installation:

docker-compose version

Run your project

docker-compose up --build

Result

You should now have both frontend and backend containers running:

Configure Nginx

Now let’s install Nginx.

Nginx is an open-source software used as a web server, reverse proxy, load balancer, and more.

We will use it to serve our static build files from the React frontend, and also to act as a reverse proxy that forwards API requests to our Node backend. This allows us to expose a single, secure HTTPS endpoint for the entire application while keeping our internal services hidden and modular.

Install Nginx:

sudo dnf install nginx -y

Start and enable Nginx:

sudo systemctl start nginx

sudo systemctl enable nginx

Update the Nginx config file

First, open the main Nginx config file:

sudo nano /etc/nginx/nginx.conf

Then you need to update the server section of the nginx.conf file to include:

• server name (your subdomain name)
• proxy configurations for frontend (in our case deployed on http://localhost:3000)
• proxy configurations for backend (in our case deployed on http://localhost:4000)

See example below:

To save changes in nginx.conf file, press Control + X and Y

You can check the nginx.conf syntax for errors by running sudo nginx -t

After saving the configuration changes, reload Nginx by running sudo systemctl reload nginx

Set up SSL and HTTPS

Finally, let’s set up SSL certificates and HTTPS.

Install Certbot + Nginx plugin

sudo dnf install -y certbot python3-certbot-nginx

Issue the SSL certificate for your domain/subdomain

sudo certbot --nginx -d <your_subdomain_or_domain_name>

For example,e in our case:

sudo certbot --nginx -d sampleapp.catbytes.io

Deployment Complete!

Ta-daa!

Congratulations, you have successfully deployed your application!

You should now see your React app available at your domain/subdomain and API available at your domain/subdomain/api, for example:

• React is available at https://sampleapp.catbytes.io
• Node available at https://sampleapp.catbytes.io/api

Security Tips

Depending on your app and requirements, you might want to consider a few security best practices to make your app and/or API more rigid and secure.

Consider the tips below:

• Restrict SSH access as required, currently, you can SSH from anywhere (0.0.0.0/0). You might want to restrict that to, for example, only your local machine IP or your company VPN. Configure this in AWS EC2 Console → your EC2 instance → Security Group → Inbound rules
• Set up a cron task on your server to automatically renew the SSL certificates. This is important, as when they expire (and they do expire in 90 days), your app will be down. You can use certbot for this
• In Dockerfile, try not to usethe root user; better create a non-root user to run the commands
• Consider hardening the Nginx configurations to limit the possibility of DoS attacks, e.g. add basic rate limiting and security headers

Conclusion

In this guide, we covered the following:

• Docker basics
• AWS EC2 setup and traffic security rules
• Nginx reverse proxy setup
• HTTPS certificates with Certbot
• Full-stack deployment

---

Hope you enjoyed it and found it easy to follow.

If you encountered any issues, please reach out.

Would also love to hear what you’re building and deploying 🚀