前端React与后端Node.js/Express分属不同文件夹时如何执行npm run build

你的项目结构是React前端在./client、Express后端在./server，两个目录依赖独立，按实际需求选对应操作即可：

单跑前端构建的基础流程 #

npm run build是React项目的打包命令，产物默认输出到前端目录下的build文件夹，操作步骤：

• 终端切换到前端目录：执行cd ./client
• 首次构建前先安装依赖：执行npm install，后续依赖没变更不用重复执行
• 执行构建命令：npm run build

构建完成后可直接在./client/build路径拿到压缩后的静态生产资源。

后端托管前端产物的配套配置 #

如果不需要单独部署前端服务，直接让Express托管前端打包产物，在完成上述前端构建步骤后，给后端加对应配置即可：

1. 打开Express服务的入口文件（通常是index.js/app.js），添加静态资源托管和路由兜底逻辑：

const path = require('path')
// 保留你原有的Express配置、接口路由逻辑
// 托管前端build目录下的静态文件
app.use(express.static(path.join(__dirname, '../client/build')))
// 适配React单页应用路由，避免刷新页面报404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'))
})

2. 切换到server目录正常启动后端服务即可，访问后端服务地址就能直接打开前端页面。

简化操作：根目录配置统一脚本 #

不想每次手动切换目录的话，可以在client、server的上级根目录做一层脚本配置，实现根目录直接执行命令：

• 在项目根目录执行npm init -y初始化package.json文件
• 打开根目录的package.json，在scripts字段添加对应命令：

{
  "scripts": {
    "build": "cd client && npm run build",
    "install:all": "cd client && npm install && cd ../server && npm install",
    "start:server": "cd server && npm start"
  }
}

配置完成后，直接在根目录执行npm run build就会自动进入client目录完成前端构建，执行npm run install:all可以一次性安装前后端所有依赖，不用反复切换目录。

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