使用docker部署koa+react前后端项目

项目结构：

• Koa + React 在同一个项目中
• 共用一个 package.json
• 使用 Docker 部署
• 前端构建产物由 npm run build 生成（比如输出到 build/ 或 dist/）

---

✅ 最小改动方案（推荐）

🔧 1. 前端：确保 package.json 中 homepage 正确

json
深色版本
{
  "name": "aftersales-user-feedback",
  "version": "1.0.0",
  "homepage": "/user-feedback",
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "dev": "concurrently "npm run server" "npm run client"",
    "server": "node server.js",
    "client": "cd client && npm start"
  }
}

✅ homepage: "/user-feedback" 是关键，它会让 React 构建时把所有静态资源路径前缀设为 /user-feedback/

---

🐳 2. Dockerfile.frontend —— 只用于运行前端静态服务（可选）

但你其实不需要单独的前端容器！因为：

你想用 宿主机 Nginx 来服务前端静态文件，而不是用容器里的服务。

---

✅ 推荐架构：宿主机 Nginx 直接读取构建文件（最优）

✅ 方案：Docker 只跑后端（Koa），前端由宿主机 Nginx 直接服务

📁 项目结构示例

深色版本
/opt/aftersales-user-feedback/
├── package.json
├── server.js                 # Koa 后端
├── src/                      # React 源码
├── build/                    # 构建产物（npm run build 生成）
├── Dockerfile.backend        # 只跑 Koa
├── docker-compose.yml
└── ...

---

✅ 步骤 1：本地或 CI 构建前端

在部署时，先在宿主机上构建前端（实际操作时直接在本地构建好前端然后上传到ubuntu服务器上即可）：

# 在 /opt/aftersales-user-feedback 目录下
npm run build

这会生成 build/ 文件夹，包含 index.html, static/, asset-manifest.json 等。

---

✅ 步骤 2：宿主机 Nginx 配置（直接服务静态文件）

编辑 /etc/nginx/sites-available/aftersales-user-feedback：

server {
    listen 80;
    server_name jt-eletech.com www.jt-eletech.com;

    # SSL 配置（如果你有）
    listen 443 ssl;
    ssl_certificate /etc/nginx/cert/fullchain.pem;
    ssl_certificate_key /etc/nginx/cert/privkey.pem;

    access_log /var/log/nginx/applet.jt-eletech.com_access.log;
    error_log /var/log/nginx/applet.jt-eletech.com_error.log;

    # 前端：直接服务 build/ 目录下的静态文件
    location /user-feedback {
        alias /opt/aftersales-user-feedback/build;
        try_files $uri $uri/ /opt/aftersales-user-feedback/build/index.html;
    }

    # 后端 API：代理到 Docker 中的 Koa 服务
    location /aftersaleFeedBackApi {
        proxy_pass http://localhost:6000;
        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;
        proxy_http_version 1.1;
    }
}

✅ alias 指向 build/ 目录，Nginx 直接返回静态文件，不经过任何容器

---

✅ 步骤 3：Dockerfile.backend —— 只跑 Koa 后端

FROM node:24-alpine
WORKDIR /app

# 复制 package.json 和 package-lock.json 到镜像中
COPY package*.json ./
RUN npm ci --omit=dev

# 复制 server 目录到镜像中
COPY server/ ./server/

# 创建用户和组，并设置权限
RUN addgroup -g 1001 -S nodejs && \
    adduser -S nodejs -u 1001 && \
    chown -R nodejs:nodejs /app

USER nodejs

EXPOSE 6000
ENV NODE_ENV=production
ENV PORT=6000

# 指定启动命令
CMD ["node", "server/server.js"]

---

✅ 步骤 4：docker-compose.yml

version: '3.3'

services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile.backend
    ports:
      - "6000:6000"
    restart: unless-stopped

✅ 只启动后端服务，前端由宿主机 Nginx 直接服务

---

需要上传哪些目录文件到ubuntu服务器上？

- package.json
- package-lock.json
- 后端server目录
- 前端build目录
- Dockerfile.backend
- docker-compose.yml

✅ 部署流程

# 1. 构建前端（这里演示的/opt目录是ubuntu宿主机上面构建前端，但是实际操作的时候我们直接在本地先build好前端就行)
cd /opt/aftersales-user-feedback
npm run build

# 2. 重启 Nginx
sudo nginx -t && sudo systemctl reload nginx

# 3. 构建并启动后端服务
docker-compose up -d --build