如何将 React s-s-r 应用程序部署到 Heroku？

Posted 2023-03-07

【中文标题】如何将 React s-s-r 应用程序部署到 Heroku？

【英文标题】：How to deploy a React s-s-r application to Heroku?

【发布时间】：2020-09-02 11:10:52

【问题描述】：

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

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 s-s-r git repo 并且我是 可以访问主页。

【参考方案1】：

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

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

我们如何确保这个小型 React s-s-r 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 启动您的应用程序。

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

通过添加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",

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

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

查看link了解更多详情

【讨论】：

非常感谢，我仍然不热衷于使用 CLI，因为我不太担心一些复杂的连接，但我明白你的意思并感谢指出的细节。只是对于担心设置配置的人，他们可以转到dashboard-classic.heroku.com/appsyour-app-name/settings 并设置配置变量。如果您能添加一些关于我们从何处获取这些信息的详细信息，我也将不胜感激，这将是脚本和 heroku 所查看的命令。对我和一些寻找类似答案的人来说，这将是一本很好的读物

我的回答主要是根据回答中提供的链接（devcenter.heroku.com/articles/…）。这里还有一些有用的链接devcenter.heroku.com/articles/…和help.heroku.com/P1AVPANS/…