React Router 生产构建后如何用 @react-router/serve 启动服务并配置 HOST 与 PORT？

React Router 生产构建后如何用 @react-router/serve 启动服务并配置 HOST 与 PORT？

【免费下载链接】react-routerDeclarative routing for React项目地址: https://gitcode.com/GitHub_Trending/re/react-router

完成react-router build之后，你需要一个 Node.js 服务器来托管构建产物。React Router 官方提供了@react-router/serve包（可执行命令为react-router-serve），它是一个基于 Express 的、开箱即用的生产服务器：默认挂载了compression、express.static（含serve-static）和morgan中间件，不需要你手写服务器代码。本文介绍如何在生产构建后用react-router-serve启动应用，并通过HOST、PORT环境变量控制监听地址和端口。

前提条件

• 一个 Framework mode 的 React Router 项目（例如通过npx create-react-router@latest生成的模板，或按 Quick Start 手动搭建的项目），项目根目录已安装依赖。
• 生产运行需要以下运行时依赖，Quick Start 给出的完整安装命令为：

npm i react-router @react-router/node @react-router/serve isbot react react-dom npm i -D @react-router/dev vite

其中@react-router/serve是本文要用的生产服务器包，@react-router/dev（提供react-router build命令）应放在devDependencies，不要部署到服务器。

第一步：执行生产构建

在项目根目录运行：

npx react-router build

该命令通过 Vite 构建生产产物，构建时会将process.env.NODE_ENV设为production并对输出做压缩。构建完成后会生成build目录，其中包含：

• server/：服务端版本的构建产物（server build，即一个可以在 Node.js 服务器里运行的模块）；
• client/：浏览器端静态资源。

构建输出位置由 react-router.config.ts 控制：buildDirectory默认"build"，serverBuildFile默认"index.js"，因此默认的服务端入口文件是build/server/index.js。如果你改过这两个配置项，后一步要传入的实际路径会相应变化。

第二步：用 react-router-serve 启动服务

react-router-serve接受一个参数：server build 的路径（serverBuildPath）。命令文档见 @react-router/serve：

react-router-serve <server-build-path> # 例如 react-router-serve build/server/index.js

默认配置下使用 Quick Start 中的写法即可：

npx react-router-serve build/server/index.js

启动后，服务默认运行在 3000 端口。可以在浏览器打开http://localhost:3000验证——Quick Start 中的预期结果是看到 "hello world" 页面（以你项目实际渲染的内容为准）。react-router-serve的 CLI 源码 中，监听成功时会向控制台打印形如[react-router-serve] http://localhost:3000的地址日志，可作为服务已启动的判断依据。

第三步：用 HOST 环境变量配置监听主机名

HOST的值会传递给 Express 内部app.listen方法，用于指定服务绑定的主机名/地址：

HOST=127.0.0.1 npx react-router-serve build/server/index.js

不设置HOST时，服务监听所有可用地址，此时启动日志会额外打印本机局域网 IP 对应的地址（如[react-router-serve] http://localhost:3000 (http://192.168.x.x:3000)）；设置HOST后服务只绑定你指定的地址。

第四步：用 PORT 环境变量修改端口

端口同样通过环境变量指定：

PORT=4000 npx react-router-serve build/index.js

未设置PORT时，react-router-serve会优先尝试 3000 端口；若 3000 不可用（被占用或无权限），它会自动改用一个可用端口。HOST与PORT可以组合使用：

HOST=127.0.0.1 PORT=4000 npx react-router-serve build/server/index.js

模板项目通常把这个启动方式写进package.json的start脚本，仓库中的 playground 项目即为：

"start": "react-router-serve ./build/server/index.js"

验证与注意事项

验证方式：

1. 看启动日志：react-router-serve监听成功后打印[react-router-serve] http://localhost:<port>（文档示例中端口为 3000）。
2. 浏览器或 HTTP 客户端访问该地址，确认返回你应用的页面。

需要注意的边界：

• 生产/开发模式由NODE_ENV决定。根据process.env.NODE_ENV，服务器以开发模式或生产模式启动。在开发模式下，@react-router/serve会为每个请求清空require缓存以确保运行最新代码，这会导致模块作用域的值（如模块级缓存）在每个请求间被重置；生产模式下服务器启动一次即固定，不会发生该行为。如果服务器代码依赖模块级缓存，文档建议改用自定义@react-router/express服务器配合pm2-dev或nodemon之类的热重载工具。
• server-build-path必须指向真实的构建产物。生产环境只部署构建产物（build/、public/build/），react-router.config.ts本身不保证在生产环境可用，所以必须通过命令行参数显式告诉 React Router server build 在哪里。
• @react-router/serve不提供任何定制选项。这是有意为之：如果需要定制底层 Express 服务器（比如加中间件、改请求处理逻辑），文档给出的路径是迁移到@react-router/expressadapter 完全自建服务器，参见 adapter 文档中的 "Migrating from the React Router App Server" 章节。对于不需要定制的场景，react-router-serve+HOST/PORT就足够覆盖启动需求。

build/server目录本身只是一个模块，也可以不经过react-router-serve直接放进 Express 等任意服务器中运行（Quick Start 的 "Bring Your Own Server" 一节有完整示例）。但就"构建后直接启动生产服务"这个任务而言，react-router-serve加上HOST、PORT两个环境变量就是文档给出的最短路径。

【免费下载链接】react-routerDeclarative routing for React项目地址: https://gitcode.com/GitHub_Trending/re/react-router