Deploy React project with Docker in just 6 steps

1. Front-end Dockerfile

If the backend API path is http://localhost:8000/api

FROM node:14

WORKDIR /app

COPY. /App

ENV REACT_APP_REST=/api

RUN npm install

RUN npm i -g serve

RUN npm run build

EXPOSE 5000

CMD ["serve", "-s", "build"]

2. Back-end Dockerfile

FROM node:14

WORKDIR /app

COPY. /App

RUN npm install

EXPOSE 8000

CMD ["npm", "run", "serve"]

3. Use the backend endpoint of Express JS

The endpoint starts with the /api we defined on the front end

const express = require("express");
const app = express();
const games = require("./api");
const cors = require("cors");

app.use(cors());
app.use(express.json());

app.get("/api/games", ({res}) => {
  res.status(200).json(games);
});

const port = 8000;

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

4. Nginx's DockerFile

FROM nginx:latest

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

5. Create Nginx configuration

events {
        worker_connections 768;
        # multi_accept on;
}

http {
    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri /index.html =404;

        location / {
            proxy_pass http://frontendreact:5000;
        }

        location /api {
            proxy_pass http://backendnode:8000;
        }
    }
}

6.docker-compose

version: "3.9"
services:
  backendnode:
    build: ./backendnode
    expose:
      -"8000"
    volumes:
      -./backendnode:/usr/src/app
  frontendreact:
    build: ./frontend
    expose:
      -"5000"
    volumes:
      -./frontend:/usr/src/app
  nginx:
      build: ./nginx
      ports:
        -"80:80"
      links:
        -frontendreact
        -backendnode
      restart: always