如何部署搭配双webpack配置的React服务端渲染应用

1. 生产环境构建 #

你有两套独立webpack配置，按先后顺序执行构建即可：

• 先执行客户端代码构建：对应webpack.client.config.js，可先将命令写入package.json的scripts字段：

  {
    "scripts": {
      "build:client": "webpack --config webpack.client.config.js --mode production",
      "build:server": "webpack --config webpack.server.config.js --mode production",
      "build": "npm run build:client && npm run build:server"
    }
  }
  

  执行npm run build:client后，产物默认输出到dist/client目录，包含打包后的JS、CSS、图片等静态资源。
• 再执行服务端代码构建：运行npm run build:server，产物输出到dist/server，通常为单文件server.bundle.js，包含编译后的Express服务逻辑和SSR组件解析逻辑。

注意：服务端webpack配置需要把node_modules依赖标记为external，不要打包进最终产物，避免Node原生模块打包报错，同时减小产物体积。
客户端webpack配置的output.publicPath要和实际部署的静态资源访问路径一致，直接Nginx托管配置为/，用CDN就配置为CDN域名前缀。

2. 服务器基础部署 #

环境准备 #

• 服务器安装和本地开发一致的Node.js 16+版本
• 部署目录仅需要保留三个内容：dist目录、package.json、package-lock.json/yarn.lock
• 进入部署目录执行npm install --production，仅安装生产依赖，不需要安装webpack、babel等开发依赖。

服务启动配置 #

• 测试启动直接执行node dist/server/server.bundle.js即可，生产环境建议用pm2做进程管理，保证服务稳定性：
  • 安装pm2后执行pm2 start dist/server/server.bundle.js --name ssr-react-app启动服务
  • 执行pm2 startup && pm2 save配置服务开机自启
• 外层建议加Nginx做反向代理：
  • 静态资源请求直接指向dist/client目录，不用走Express处理，大幅提升响应性能
  • 动态页面请求转发到Node服务监听的端口
  • Nginx层可统一配置gzip压缩、静态资源缓存策略、HTTPS证书。

3. 容器化部署可选方案 #

如果需要用Docker部署，可参考以下多阶段构建的Dockerfile配置，最终镜像体积更小：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY --from=builder /app/dist ./dist
EXPOSE 3000
CMD ["node", "dist/server/server.bundle.js"]

内容的提问来源于stack exchange，提问作者Uttkarsh Singh