如何将 React / Apollo GraphQl 应用程序部署到 Heroku？答案

【问题标题】：How does one deploy a React / Apollo GraphQl app to Heroku?如何将 React / Apollo GraphQl 应用程序部署到 Heroku？
【发布时间】：2019-10-27 10:42:20
【问题描述】：

我有一个（相对）完成的应用程序here。在这个阶段，我只是想部署。

此时我选择了 Heroku，因为它似乎是最简单的选择，而且它是免费的。但是，我似乎无法弄清楚如何使用 CLI 或 GitHub 集成来实际部署。

我遇到关于 buildpack 的错误，我设法通过更改包含 Git Repo 的文件夹（从一个文件夹到两个子文件夹）来解决这个问题。但是，我不知道如何将部署链接在一起（客户端/服务器），因此页面上实际上没有任何内容。

文件夹设置

App
    client
        ...
        [Apollo Client / React]
        package.json <- used for the buildpack in Heroku
        ...
    server
        ...
        [Apollo Server / Mongoose / MongoDb Server]
        package.json <- same thing
        ...

我尝试过使用Apollo Docs，但不幸的是它们并没有真正提供帮助。我尝试在这里寻找更多答案和一般网络搜索，但老实说，我不确定问题是什么，更不用说如何解决它了。

我很乐意尝试其他选择，但免费非常重要，所以我不确定我还有很多其他选择。

感谢所有帮助！

【问题讨论】：

标签： reactjs heroku graphql react-apollo

【解决方案1】：

你只是得到一个空白页？你有没有在 Heroku 上构建并运行过服务器，它可能就像服务器不在后端运行一样简单。我将向您展示我的设置，似乎需要对 Heroku 进行 50 次提交才能最终使正确的组合正常工作，Heroku 的设置并不适合一起运行客户端和服务器，而且由于构建过程已经改变，因此可能会令人困惑很多。

首先在 package.json 中，确保你有一个 heroku-postbuild 脚本来安装和运行客户端。在你需要的脚本下"heroku-postbuild": "cd client/ && npm install && npm run build" 这个脚本可能需要根据Mac Linux 或PC 进行调整，我使用Windows。

在我的服务器索引文件中，我将 Apollo 服务器的路径指向 server.applyMiddleware({ app, path: "/graphql" });

我使用 express 来获取我的 React 客户端...

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "../client/build/index.html"));
  });
} else {
  app.use(express.static(path.join(__dirname, "/client/public")));
  app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "./client/public/index.html"));
  });
}

我在根文件夹中创建了一个 Procfile，其中只有 web: npm run server 中的命令，Heroku 侦听此文件以自动在 npm 中运行命令。

在我的 Apollo 客户端索引文件中，我将 httpLink uri 指向了 /graphql。我的 websocket 链接（对您的项目可能无关紧要）直接指向 Heroku wss://yourappname.herokuapp.com/graphql。

也许这足以让您更接近解决方案。

【讨论】：