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

Question

我有一个（相对）完成的应用程序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，但不幸的是，它们并没有真正地帮助您。我曾尝试在此处寻找更多答案和常规的网络搜索，但老实说，我不太确定issue是什么，更不用说如何解决它了。

我很乐于尝试其他选项，但是免费很重要，因此我不确定我还有很多其他选择。

感谢所有帮助！

Answer 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"));
  });
}

我用web: npm run server中的唯一命令在根文件夹中创建了一个Procfile，Heroku会监听该文件以自动在npm中运行命令。

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

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