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

编程入门行业动态更新时间:2024-10-05 05:14:24

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

我有简单运行的React Server Side App。

GitHub Link for the 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主体应该在heroku上给出任何错误，但是在尝试访问该应用程序时它显示错误，并要求我检查应用程序日志，但是我没有使用heroku cli，也没有计划使用它，因此，

考虑来自github的自动部署。

我对脚本非常陌生，主要是尝试构建脚本以进一步了解它们。

我们如何确定这个小的React SSR git repo已部署，我是能够访问主页。

回答如下：

我没有使用heroku cli，也没有计划使用它

您应该而且我真的建议，因为这是查看构建后发生的错误，为什么您的应用崩溃并查看完整日志的最佳方法。即使您可以从heroku dashbord中查看日志（更多->查看日志），但这仅会为您提供日志的结尾。

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

确保服务器在正确的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脚本自定义构建过程：

来自您的githubrepo：

"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",
}