How to Deploy a React Application with Docker and Secure it with Let’s Encrypt SSL

Deploying a React application using Docker provides a robust and portable way to manage your application. Combining this with Let’s Encrypt for SSL certificates ensures your application is secure. In this article, we will guide you through setting up a React project, containerizing it using Docker, and securing it with Let’s Encrypt SSL certificates.

Prerequisites

• A domain name pointed to your server.

• Docker and Docker Compose are installed on your server.

• Basic knowledge of Docker, Nginx, and SSL certificates.

Step 1: Create a Dockerfile for Your React Application

First, let’s set up a Dockerfile to build and serve your React application using Nginx.

Dockerfile

# Stage 1: Build the React application
FROM node:14 AS build

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
COPY .env ./

RUN npm install

COPY . ./

RUN npm run build

# Stage 2: Serve the React application using Nginx
FROM nginx:alpine

COPY --from=build /app/dist /usr/share/nginx/html

# Copy custom Nginx configuration file
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy SSL certificates (initially empty, will be replaced with Let's Encrypt certificates)
COPY ssl /etc/nginx/ssl

EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]

Step 2: Configure Nginx

Create an nginx.conf file to configure Nginx to serve your application and redirect HTTP traffic to HTTPS.

nginx.conf

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}

# HTTPS server
server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

Replace yourdomain.com with your actual domain name.

Step 3: Generate SSL Certificates with Let’s Encrypt

To generate SSL certificates using Let’s Encrypt, you’ll need to install Certbot.

Install Certbot

For Debian/Ubuntu-based systems:

sudo apt update sudo apt install certbot

Generate SSL Certificates

Run the following command to obtain the certificates:

sudo certbot certonly --standalone -d yourdomain.com -d www.yourdomain.com

This command will place the certificates in /etc/letsencrypt/live/yourdomain.com/.

Step 4: Update Dockerfile to Use SSL Certificates

Modify your Dockerfile to copy the Let's Encrypt certificates from your host machine.

Updated Dockerfile

# Stage 1: Build the React application
FROM node:14 AS build

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
COPY .env ./

RUN npm install

COPY . ./

RUN npm run build

# Stage 2: Serve the React application using Nginx
FROM nginx:alpine

COPY --from=build /app/dist /usr/share/nginx/html

# Copy custom Nginx configuration file
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy SSL certificates from the host
COPY /etc/letsencrypt/live/yourdomain.com/fullchain.pem /etc/nginx/ssl/fullchain.pem
COPY /etc/letsencrypt/live/yourdomain.com/privkey.pem /etc/nginx/ssl/privkey.pem

EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]

Step 5: Build and Run Your Docker Container

Build the Docker Image

Use the following command to build your Docker image:

docker build -t react-nginx .

Run the Docker Container

Run the container with the following command:

docker run -d --name react-app -p 80:80 -p 443:443 react-nginx

Step 6: Set Up Automatic Renewal for SSL Certificates

Let’s Encrypt certificates are valid for 90 days, so renew them periodically. A cron job can automate this process.

Create a Renewal Script

Create a script named renew_certificates.sh:

#!/bin/bash

sudo certbot renew
docker exec -it react-app nginx -s reload

Make the script executable:

chmod +x renew_certificates.sh

Set Up a Cron Job

Open the cron job editor:

crontab -e

Add the following line to run the renewal script twice a day:

0 0,12 * * * /path/to/renew_certificates.sh >> /var/log/renew_certificates.log 2>&1

Conclusion

By following these steps, you have successfully deployed your React application using Docker and secured it with SSL certificates from Let’s Encrypt. This setup ensures that your application is not only robust and portable but also secure. Regularly renewing your SSL certificates with a cron job keeps your application compliant with security best practices.

Remember to replace yourdomain.com With your actual domain name and ensure all paths in the Dockerfile and scripts are correctly set. With this configuration, you can confidently serve your React application over HTTPS.