Question

我一直在尝试将全栈chatkit Messenger应用程序从localhost部署到Heroku的生产环境中。我不确定必须在代码中进行哪些更改才能使其在heroku上正常运行，因为我目前遇到404“未找到”错误。

我添加了一个Procfile和一个App.json文件作为推荐。我不确定是应归咎于package.json的开始脚本，还是需要更新代码中HTTP请求的URL（从本地主机到heroku的站点URL）。

或者如果我需要将应用程序推送到生产环境并下载静态文件，我对此不太有经验。该代码托管在我的Github（https://github.com/aladin94/MyChatterbox）上。我在做什么错了？

`{
  "name": "react-chat-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@pusher/chatkit-client": "^1.0.2",
    "@pusher/chatkit-server": "^1.0.1",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "lodash": "^4.17.15",
    "lodash.template": "^4.5.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1",
    "concurrently": "^3.5.1"
  },
  "devDependencies": {
    "concurrently": "^3.5.1"
  },
  "scripts": {
    "start": "node server.js"
  },
  "engines": {
    "node": "10.14.1",
    "npm": "6.4.1"
  }
}
`

Answer 1

尝试将构建版本置于项目的根目录，并将代码更改为：

app.use(express.static('build')) app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'build', 'index.html')) })

要运行构建，您需要将脚本添加到package.json：“构建”：“反应脚本构建”

将静态路由 http://localhost:3001/users 更改为“ /用户” ，因为后端和前端在同一服务器上。

Answer 2

我能够使它像这样工作。

1。

server.js

app.post('/authenticate', (req, res) => {
  const authData = chatkit.authenticate({ userId: req.query.user_id })
  res.status(authData.status).send(authData.body)
})

// if (process.env.NODE_ENV === 'production') { // This is your thang, I commented it out to reach a solution, but probably not necessary for you
  app.use(express.static('build')); // 'react-scripts build' places a /build directory at root, not /client/build

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'build', 'index.html')); // Removed client here also
  });
// }

这在我的机器上运行正常，打开了chatterbox应用程序的主屏幕。

2。

package.json

将这些脚本添加到您的package.json：

"scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "postinstall": "npm run build"
  },

Heroku在上载代码后将运行npm postinstall脚本，并为您运行npm install。

调试将全栈应用程序部署到Heroku

2 个答案: