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-routerlatest生成的模板或按 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默认buildserverBuildFile默认index.js因此默认的服务端入口文件是build/server/index.js。如果你改过这两个配置项后一步要传入的实际路径会相应变化。第二步用 react-router-serve 启动服务react-router-serve接受一个参数server build 的路径serverBuildPath。命令文档见 react-router/servereact-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方法用于指定服务绑定的主机名/地址HOST127.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 环境变量修改端口端口同样通过环境变量指定PORT4000 npx react-router-serve build/index.js未设置PORT时react-router-serve会优先尝试 3000 端口若 3000 不可用被占用或无权限它会自动改用一个可用端口。HOST与PORT可以组合使用HOST127.0.0.1 PORT4000 npx react-router-serve build/server/index.js模板项目通常把这个启动方式写进package.json的start脚本仓库中的 playground 项目即为start: react-router-serve ./build/server/index.js验证与注意事项验证方式看启动日志react-router-serve监听成功后打印[react-router-serve] http://localhost:port文档示例中端口为 3000。浏览器或 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-serveHOST/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考