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 to this 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

How to Deploy a Frontend Application Using Nginx and Docker
Introduction
Efficiently deploying a frontend application often involves separating the serving of static assets from backend APIs. A powerful approach is combining Nginx as a reverse proxy and web server with Docker for containerization. This guide walks you through the process of deploying 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

Elevating React: Unleashing the Power of Nginx for Effortless Deployment

Amit Kumar Rout ・ Dec 9 '23

#javascript #tutorial #react #nginx

Steps:

1. Build the production version of your application:

npm run build

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

1. Create a Dockerfile: Write the following Dockerfile to define the container:

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

1. 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: Running the Docker Compose

Creating 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

The use of Nginx and Docker to deploy a frontend application gives a strong, scalable solution. This is because it separates static assets from backend APIs, giving the best performance. Customize your Nginx configuration to meet your needs, such as:

• Adding SSL/TLS for HTTPS support.
• Turn on caching for high performance.

This setup enables your frontend application to be reliable in production-ready environments.

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

Happy Coding!

Comments

[intermundos]

Would suggest looking into the Caddy server. Much simpler and got hot reload for config.