React项目Docker部署的简单配置

守护砂之国泰裤辣2026-01-28 12:05

先远程服务器上已Docker部署后端服务，在此基础上(同一台机器)补充前端的Docker部署。

主要思路还是使用nginx转发后端请求，流程如下:

项目根目录新增Dockerfile, docker-compose.yml和nginx.conf

bash 复制代码

FROM nginx:alpine

# 复制静态资源
COPY ./dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

XML 复制代码

version: '3.8'

services:
  frontend:
    build: .
    ports:
      - "80:80"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    restart: unless-stopped

bash 复制代码

server {
    listen 80;
    server_name localhost;

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

    location /api/v1/ {
        proxy_pass http://host.docker.internal:8000/api/v1/;  # 这里填你实际后端的端口+转发路径
        proxy_set_header Host  $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
    }
}

npm run build打包后将dist目录和这三个文件放到同一个文件夹下，将这个文件夹发到远程机器上，命令行进入该目录下，运行命令:

bash 复制代码

docker compose up -d

可进一步查看log，没报错后访问ip看到页面即部署成功

这只是个很基本的部署...