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，但不幸的是，它们并没有真正地帮助您。我曾尝试在此处寻找进一步的答案和常规的网络搜索，但是老实说，我不太确定问题是什么，更不用说如何解决了。

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

感谢所有帮助！

Answer 1

您只是得到一个空白页？您已经在Heroku上构建并运行了服务器，这可能很简单，因为服务器未在后端运行。我将向您展示我的设置，似乎需要对Heroku进行50次提交才能最终使正确的组合正常工作，Heroku的设置不足以同时运行客户端和服务器，并且由于构建过程更改了很多。

首先在package.json中，确保您具有用于安装和运行客户端的heroku-postbuild脚本。在脚本下，您需要"heroku-postbuild": "cd client/ && npm install && npm run build"可能需要调整此脚本，具体取决于在Mac Linux还是PC上，我使用Windows。

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

我使用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。

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

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

1 个答案: