如何将 React SSR 应用程序部署到 Heroku？

Question

我有一个简单的运行反应服务器端应用程序。

GitHub Link 对于 repo，在本地环境中，我有一个使用 npm start 运行的构建脚本，它启动客户端和服务器构建，然后我有一个监听器来监听文件的变化。这种设置在本地运行良好。

"scripts": {
    "start": "npm run dev",
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:build-server": "webpack --config webpack.server.js --watch",
    "dev:build-client": "webpack --config webpack.client.js --watch"
  },

我尝试将这些更改作为产品应用程序部署到heroku here，但出于某种奇怪的原因，它永远无法正常工作并返回 503 。我没有对 package.json 中的构建脚本添加任何更改，并尝试按原样部署。

我认为它应该可以工作，因为build log dosent 在 heroku 上给出任何错误，但是在尝试访问应用程序时它显示错误并要求我检查应用程序日志，但我没有使用 heroku cli，也不打算使用它，和

考虑从 github 自动部署。

我对脚本很陌生/主要构建脚本试图了解更多关于它们的信息。

我们如何确保部署这个小的 React SSR git repo 并且我是 可以访问主页。

Answer 1

我没有使用 heroku cli，也不打算使用它

您应该而且我真的建议您这样做，因为这是查看构建后发生的错误、应用崩溃的原因以及查看完整日志的最佳方式。即使您可以从 heroku dashbord 中看到日志（更多 -> 查看日志），但这只会给您提供日志的尾部。

我们如何确保这个小型 React SSR git repo 已部署并且我能够访问主页。

确保服务器在右侧监听port 通过使用process.env.PORT 作为heroku 公开一个动态端口。

const port = process.env.PORT || 3000
app.listen(port, () => {
    console.log('Listening on Port ' + port);
})

在 heroku 上，NODE_ENV 环境变量默认设置为production， 这意味着heroku将在构建后修剪devDependencies， 但在您的情况下，您仍然需要这些依赖项才能使用 webpack 启动您的应用程序。

您可以通过两种方式解决此问题：

1. 通过添加build 脚本自定义您的构建过程：

   来自你的 github repo ：

   "start": "webpack --config webpack.client.js; webpack --config webpack.server.js; node build/bundle.js"
   

   到

   "scripts": {
       "start": "node build/bundle.js",
       "build": "webpack --config webpack.client.js & webpack --config webpack.server.js",
       "build:start": "webpack --config webpack.client.js && webpack --config webpack.server.js && node build/bundle.js",
   }
   

2. 将NODE_ENV 设置为任何其他值以跳过修剪您的 devDependencies

   heroku config:set NODE_ENV=development //(Another reason to use the CLI)
   

查看link了解更多详情