Dockerizing Your Frontend Application with Nginx for Seamless Deployment

Introduction

Most often, deploying a frontend application requires separating the serving of static assets from backend APIs. A good approach is to couple Nginx as the reverse proxy and web server with Docker for containerization. This guide takes you through the process of how to deploy a frontend application using Nginx and Docker.

Prerequisites

To follow this guide, you should have:

• Basic knowledge of React (or any frontend framework).
• Familiarity with Docker and Nginx.

Setting Up the Application

A clear project structure simplifies deployment. Place all necessary files in a folder to build your Docker image. These files should include:

• build/ folder (contains the production-ready static files).
• Dockerfile (defines how the image is built).
• nginx.conf (custom Nginx configuration).
• sites-enabled/ (optional additional Nginx configurations).

For an in-depth explanation of the Nginx configuration, refer to this article: Elevating React — Unleashing the Power of Nginx for Effortless Deployment

Steps

1. Build the production version of your application:

npm run build

This command creates a build/ directory containing optimized static files.

2. Create a Dockerfile:

FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Building the Docker Image

Once your files are ready, build the Docker image:

docker build -t my-app-img:prod .

If deploying on another VM, you can package the image as a .tar file:

docker save my-app-img > my-app-img.tar

Running the Docker Image

Option 1: Running the image directly

1. Load the Docker image from a .tar file (if transferring between systems):

cat my-app-img.tar | docker load

2. Run the container:

docker run -itd -p 80:80 --name my-app my-app-img

This starts the container, exposing it on port 80.

Option 2: Using Docker Compose

Create a docker-compose.yml file:

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled

Then start the container:

docker-compose up -d

Conclusion

Using Nginx and Docker to deploy a frontend application gives a robust, scalable solution by separating static assets from backend APIs. Customize your Nginx configuration to meet your needs, such as:

• Adding SSL/TLS for HTTPS support.
• Enabling caching for better performance.

This setup enables your frontend application to run reliably in production-ready environments.

If you have any suggestions for improving the process, please leave them in the comments. If you found this post helpful, please like and share it.

Happy Coding!