我的 CRUD 应用程序可以在本地运行，但不能在 Heroku 上运行

Question

我创建了一个 CRUD 应用程序，它可以在本地运行，但我无法让它在 heroku 上正常运行。它部署正确，网站似乎可以工作，但是我无法从数据库中获取我需要的项目，因为它一直说连接被拒绝。 我将 .env 变量添加到 Heroku，并将端口设置为 process.env.PORT || 5000 和 app.listen(port)，我不确定是什么导致了错误。我还有一个带有 web 的 Procfile：node server.js，以及 package.json 中指向 server.js 的“启动”脚本。服务器似乎根本没有启动。
这里是 repo，如果你想看看 https://github.com/ThomYorke7/inventory，这里是 heroku 上的应用程序 https://boardgamenerd.herokuapp.com/

Answer 1

问题在于您的应用程序有一个后端（服务器）和一个前端（客户端），它们在本地提供的服务与在 Heroku 上不同。

我想您的客户端在本地运行在 localhost:3000 上（因为它是您引导的 create-react-app 的默认设置）。 当您的后端在 localhost:5000 上运行时，您客户端的 package.json 包含此行以使其在本地工作：

"proxy": "http://localhost:5000",

如果我访问您应用的此页面：https://boardgamenerd.herokuapp.com/ > boardgames， 然后我在浏览器控制台上遇到这些错误：

boardgames-list.jsx:18

Error: Network Error
    at e.exports (createError.js:16)
    at XMLHttpRequest.p.onerror (xhr.js:83)

xhr.js:178

GET http://localhost:5000/boardgames/ net::ERR_CONNECTION_REFUSED

它告诉你你的生产版本仍然在localhost:5000调用后端。

I.) 首先我会尝试通过更改为相对 URL 来修复这些提取。

例如上面的例子（boardgames-list.jsx:18）

❌ 您当前的脚本目前已硬编码 localhost 获取：

useEffect(() => {
    axios
      .get('http://localhost:5000/boardgames/')
      .then((response) => {
        setBoardgames(response.data);
        setLoading(false);
      })
      .catch((err) => console.log(err));
  }, []);

✔️ 通过删除“http://localhost:5000”使其相对于根：

useEffect(() => {
    axios
      .get('/boardgames/')
      .then((response) => {
        setBoardgames(response.data);
        setLoading(false);
      })
      .catch((err) => console.log(err));
  }, []);

它适用于 Heroku。如果它不会：请参阅下面的建议。

II.) 二、建议： 现在您的 https://boardgamenerd.herokuapp.com/boardgames 路由使用以下后端端点来获取数据：https://boardgamenerd.herokuapp.com/boardgames/

区别仅在于最后一个斜杠 ("/") 字符，这可能会造成混淆并在以后引起更多问题！ 最佳做法是向后端端点添加差异化路径元素，例如/api/。例如：https://boardgamenerd.herokuapp.com/api/boardgames 所以你一眼就可以确定哪个GET 请求与后端相关，哪个与客户端相关。

如果您使用此解决方案，您需要将以下内容添加到您的server.js：

app.use(express.static(path.join(__dirname, 'client', 'build')))
    // required to serve SPA on heroku production without routing problems; it will skip only 'api' calls
    if (process.env.NODE_ENV === 'production') {
      app.get(/^((?!(api)).)*$/, (req, res) => {
        res.sendFile(path.join(__dirname, 'client/build', 'index.html'))
      })
    }

/^((?!(api)).)*$/ 正则表达式会跳过路径中包含“api”的 URL，因此它们不会作为客户端/构建文件夹的内容静态提供 - api 调用不会从静态提供并且可以正常工作。