如何在Linux服务器上部署Webpack构建的React项目

先明确核心前提：默认配置下Webpack打包的React客户端项目产物是纯静态文件，不存在“把浏览器端bundle.js直接当服务端程序跑”的操作逻辑。

1. Linux服务器托管React客户端项目所需技术栈 #

纯客户端React项目（普通单页应用，无服务端渲染需求）不需要复杂的运行环境，按需选以下方案即可：

• 生产环境首选：Nginx
  只需要在Linux上安装Nginx，不需要额外装Node、Python等运行时，资源占用低、并发性能强、配置简单，是绝大多数生产环境的选择。
• 轻量备选：Caddy、Apache
  都是静态Web服务器，Caddy默认自动配置HTTPS，适合个人快速搭站；Apache适合有旧配置兼容需求的场景。
• 带扩展需求可选：Node.js + Web框架
  如果后续需要加接口代理、权限校验、服务端渲染等逻辑，可以安装Node.js环境，配合Express/Koa这类框架同时托管静态资源和处理服务端逻辑。

提醒：如果只是托管纯静态页面，完全没必要装Node.js，Nginx足够，资源占用比Node服务低一个量级。

2. Webpack构建产物的正确部署方式 #

先讲最容易踩的坑：针对浏览器环境打包出来的bundle.js不能作为服务端程序运行，它的设计运行环境是用户的浏览器，不是你的Linux服务器。
正确部署流程：

1. 本地执行项目的构建命令（通常是npm run build），拿到完整的构建输出目录（一般命名为dist或build，目录内必须包含入口index.html、打包后的bundle.js、样式文件、静态资源文件夹，缺任何一个都可能导致页面白屏）
2. 把整个构建输出目录上传到Linux服务器的指定路径，比如/var/www/react-app/
3. 配置Web服务器将站点根目录指向这个上传的文件夹，设置默认首页为index.html，同时配置前端路由重写规则（否则React Router控制的子路由刷新时会报404）
   以最常用的Nginx为例，基础配置参考：

server {
    listen 80;
    server_name 你的域名或服务器公网IP;
    root /var/www/react-app;
    index index.html;

    # 适配前端路由，刷新子路由不404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

配置完成后执行Nginx重载命令，外部就能正常访问站点了。

3. 选用Node.js作为服务端的具体部署步骤 #

Node.js适合两类场景：一是需要在服务端增加接口代理、权限校验等轻量逻辑；二是需要做React服务端渲染（SSR）。两类场景的部署操作如下：

场景A：Node仅用于托管静态React资源 #

1. 在Linux服务器上安装Node.js LTS长期支持版本，配置好npm/pnpm/yarn包管理器
2. 把本地构建好的完整dist目录上传到服务器指定路径，比如/opt/react-app/
3. 在同目录下新建服务入口文件server.js，用Express写最简静态服务，代码参考：

const express = require('express')
const path = require('path')
const app = express()
const PORT = 3000

// 托管dist目录下的静态资源
app.use(express.static(path.join(__dirname, 'dist')))
// 适配前端路由，所有未匹配的请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

app.listen(PORT, () => {
  console.log(`服务已启动，监听${PORT}端口`)
})

4. 在对应目录执行npm init -y初始化项目，再执行npm i express安装依赖
5. 生产环境不要直接用node server.js启动，建议用pm2做进程守护：全局安装pm2后执行pm2 start server.js，可以实现服务异常自动重启、开机自启。
6. 建议在Node服务前再加一层Nginx做反向代理，把80/443端口的公网请求转发到Node服务的3000端口，同时配置HTTPS证书、静态资源缓存规则，比直接暴露Node端口更安全、性能更好。

场景B：Node运行React SSR服务 #

这种场景需要提前修改Webpack配置，新增target: 'node'的服务端打包规则，打出来的服务端bundle才是可以在Node环境运行的代码。部署逻辑和上面的静态服务一致：把客户端构建产物+服务端bundle一起传到服务器，用pm2启动服务端bundle入口，前端挂Nginx反向代理即可。

再次提醒：不要直接拿给浏览器用的客户端bundle.js在Node里执行，代码里依赖的window、document等浏览器专属API在Node环境不存在，运行会直接报错。

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