企业官网建设流程全解析

• 前端
• 示例工程

isomorphic500 是一个基于 React + Fluxible + Express 的同构（isomorphic）照片展示应用，本文带你完成它的Heroku 部署全流程，并给出生产环境的调优建议。无需复杂背景，跟着步骤走即可完成上线。

一、部署前了解 isomorphic500

isomorphic500 同时运行在服务端与浏览器端（即"同构"渲染）：服务端用 Express 做首屏渲染，浏览器端再用 React 接管交互。核心技术栈如下：

了解两个部署关键设计：

• 端口：服务器监听process.env.PORT || 3000（见 src/server.js）。Heroku 会自动注入PORT环境变量，无需额外配置。
• 构建产物：生产包由 Webpack 输出到static/dist目录，文件名带 hash，并通过stats.json记录（见 webpack/prod.config.js），该目录已在 .gitignore 中忽略——构建必须发生在部署时。

二、本地预检：先跑通生产模式

推送到 Heroku 前，建议本地先验证生产模式是否可用：

git clone https://gitcode.com/gh_mirrors/is/isomorphic500 cd isomorphic500 npm install # 触发 postinstall，自动执行生产构建 npm run prod # 以生产模式启动，监听 8080 端口

打开localhost:8080确认页面正常。这些命令脚本定义在 package.json：

• npm run build：执行webpack --config ./webpack/prod.config.js，生成static/dist
• npm run prod：NODE_ENV=production PORT=8080 node index
• npm start：NODE_ENV=production node index（Heroku 默认启动命令）

💡 开发模式npm run dev依赖 nodemon 和 webpack-dev-server（见 nodemon.json），仅用于本地开发，生产部署不需要。

三、Heroku 部署完整步骤

步骤 1：推送项目到 Heroku

git remote add heroku https://git.heroku.com/<你的应用名>.git git push heroku main

步骤 2：理解自动构建流程（关键）

isomorphic500不需要编写 Procfile，Heroku 的 Node.js Buildpack 会自动按以下链路完成部署，这也是同构应用部署最容易出错的地方：

1. npm install安装依赖
2. 触发 package.json 中的postinstall钩子 → 自动执行npm run build
3. Webpack 将src/client.js打包为带 hash 的 JS/CSS，并写出static/dist/stats.json
4. Heroku 执行npm start启动 Express 服务

⚠️ 顺序很重要：生产模式下 src/containers/Html.js 会直接require构建产物stats.json来注入页面脚本。如果跳过构建就启动服务，页面会报错。postinstall机制保证了构建先于启动，你无需手动干预。

步骤 3：确认环境变量

部署成功后通过heroku open打开应用即可访问。

四、生产环境调优建议

1. 锁定合适的 Node 运行时 ⚠️

package.json 声明了"node": "0.12.x"，且依赖node-sass 3.3.3、babel 5等老版本库（README 中标注在 Node 4 上测试通过）。切勿使用现代 Node 版本部署，否则node-sass会编译失败。在 Heroku 上建议显式指定旧版运行时：

heroku config:set NVM_VERSION=4

2. 静态资源缓存已内置，注意 CDN 策略

服务端对static目录设置了1 年缓存（maxAge: 365*24*60*60，见 src/server.js）。由于 Webpack 产物文件名带[hash]，内容变化时文件名自动更新，缓存是安全且高效的。若接入 CDN，直接对/dist/路径开启长缓存即可。

3. 性能优化已由构建配置兜底

生产构建中已启用（见 webpack/prod.config.js）：

• UglifyJs 压缩：减少 JS 体积
• Dedupe / OccurenceOrder 插件：去重并优化模块顺序
• NODE_ENV=production注入：让 React 等库自动走精简模式

服务端侧，src/server.js 默认启用了compression响应压缩和morgan访问日志（生产模式使用combined格式），无需重复配置。

4. 按需调整生产配置

config/prod.js 是生产环境的核心配置文件，包含四项：

• apiRoot：500px API 地址
• consumerKey：500px 的 API 密钥（建议替换为你自己的，勿用仓库默认值）
• trackingId：Google Analytics 统计 ID（src/server/ga.js 会将其注入页面）
• locales：支持的语种列表

语言检测由 src/server/setLocale.js 中间件完成：优先读取 Cookie 与?hl查询参数，否则嗅探浏览器accept-language头。多区域访问时确认locales列表覆盖目标用户。

5. 日志与排查

通过DEBUG环境变量控制服务端调试输出：

heroku config:set DEBUG=isomorphic500,Fluxible

请求级错误会打印完整堆栈（见 src/server.js），结合heroku logs即可快速定位线上问题。

五、常见问题速查

小结

isomorphic500 的 Heroku 部署之所以简单，得益于postinstall自动构建 +PORT自动注入的设计。真正需要动手的只有三件事：锁定旧版 Node 运行时、替换 500px consumerKey、按需开启 DEBUG 日志。掌握这套"同构应用部署 + 生产调优"的思路，可复用到所有基于 Webpack 的 Node 同构项目。

• 前端
• 示例工程