只需 6 步使用 Docker 部署 React 项目

1. 前端的Dockerfile

如果后端API路径为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.后端的Dockerfile

FROM node:14

WORKDIR /app

COPY . /app

RUN npm install

EXPOSE 8000

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

3.使用Express JS的后端端点

端点以我们在前端定义的/api开头

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的DockerFile

FROM nginx:latest

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

EXPOSE 80

5.创建 Nginx 配置

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