Question

我运行的是简单的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能够部署并且我是能够访问主页。

Answer 1

我没有使用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脚本来自定义构建过程：

来自您的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以获得更多详细信息

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

1 个答案: