How to Launch React/Vue Frontend Projects with Docker

In this guide, I will explain how to use Docker to launch React or Vue frontend projects. By containerizing your frontend application, you can easily deploy it across different environments without worrying about compatibility issues. We will walk through the steps required to set up Docker and configure the necessary files for launching your project.

Step 1: Prepare the Project

Assuming your React or Vue project has been built and the output directory is named "build," make sure the project structure looks like this:

- project/
  - build/
  - docker/
    - docker-compose.yml
    - Dockerfile
    - conf.d/
      - default.conf

Step 2: Set Up docker-compose.yml

Open the docker-compose.yml file located in the docker/ directory. This file defines the services and configurations for your Docker setup. Here's an example configuration for a React project:

version: '3'
services:
  my_project_react:
    build:
      dockerfile: Dockerfile
      context: ../
    ports: ["8080:80"]
    logging:
      options:
        max-size: 50m
    entrypoint: ["nginx", "-g", "daemon off;"]
    restart: always

Adjust the ports setting if you want to use a different port for accessing your application.

Step 3: Configure the Dockerfile

Open the Dockerfile located in the docker/ directory. This file specifies the instructions for building the Docker image. Here's an example configuration for a React project:

FROM nginx

ADD docker/conf.d/default.conf /etc/nginx/conf.d/
ADD build/ /usr/share/nginx/html/
CMD nginx -t

Make sure the ADD command points to the correct location of your project's build directory.

Step 4: Customize default.conf

Open the default.conf file located in the docker/conf.d/ directory. This file contains the Nginx server configuration. Here's an example configuration:

server {
  listen       80;
  server_name  _;

  charset  utf-8;

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

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Step 5: Launch the Application

Open your terminal or command prompt and navigate to the root directory of your project. Run the following command to start the frontend service using Docker:

docker-compose -f docker/docker-compose.yml up -d --build

Wait for the build process to complete, and then you can access your application by visiting http://localhost:8080 in your web browser.

By utilizing Docker to launch your React or Vue frontend projects, you can simplify the deployment process and ensure consistent performance across different environments. Docker's containerization technology allows for easy scalability and portability, making it an excellent choice for hosting your frontend applications.