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

Question

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

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，但出于某种奇怪的原因，它永远不会工作，并且 returns 503。我没有对 package.json 中的构建脚本添加任何更改，并尝试按原样部署。

我认为它应该工作，因为 build log dosent 在 heroku 上给出任何错误但是在尝试访问该应用程序时它显示错误并要求我检查应用程序日志但我没有使用 heroku cli 并且没有计划关于使用它，

thinking of auto deployment from github.

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

How can we make sure this small React SSR git repo deploys and i am able to access the home page .

Answer 1

I am not using heroku cli and not planning on using it

你应该而且我真的推荐，因为这是查看构建后发生的错误的最佳方式，为什么你的应用程序崩溃并查看完整的日志。即使您可以从 heroku dashbord（更多 -> 查看日志）中看到日志，这也只会给您日志的尾部。

How can we make sure this small React SSR git repo deploys and i am able to access the home page.

确保服务器在右边监听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？

How to deploy a React SSR application to Heroku?

heroku

node.js

reactjs

server-side-rendering