如何将 React + GraphQL 部署到 Heroku？答案

【问题标题】：How do I deploy react + GraphQL to Heroku?如何将 React + GraphQL 部署到 Heroku？
【发布时间】：2019-09-05 08:38:21
【问题描述】：

我有一个全栈应用程序，它在前端使用 React，在后端使用 GraphQL Yoga。我正在尝试将应用程序部署到 Heroku，但无法为我的前端提供服务。当我访问 Heroku URL 时，我看到的只是 GraphQL 游乐场。

这是启动我的服务器的内容：

const options = {
        port: process.env.PORT || 4000
      }

    server.start(options, ({ port }) =>
        console.log(
            `Server started, listening on port ${port} for incoming requests.`,
        ),
    )

在前端我有这个连接到我的服务器：

const client = new ApolloClient({
    uri: "http://localhost:4000"
})

但我不知道如何让这一切都在 Heroku 上运行。

【问题讨论】：

在将 uri: "localhost:4000" 发布到 heroku 时，您是否也在前端包含它？
包含它是什么意思？你的意思是像一个特殊的配置？抱歉，我之前从未部署到 Heroku
如果您将 uri 设置为 (const client = new ApolloClient({uri: "http://localhost:4000"}))，它将无法在 heroku 上运行，因为您的服务器应用程序未在 heroku 的 localhost:4000 上运行。您是否还尝试使用相同的 graphql 服务器为反应页面提供服务？
哦，是的，我的客户确实有这个。我应该把它改成什么？是的，我正在尝试使用服务器提供反应页面，除非有更好的方法。

标签： reactjs heroku deployment graphql apollo

【解决方案1】：

将您的 apolloClient uri 更改为：

const client = new ApolloClient({
  uri: "/graphql"
})

然后再次部署。

如果您使用的是 create-react-app，您应该为您的客户端添加代理以供开发使用：

在您的 setupProxy.js 文件中：

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy('/',
    { target: 'http://localhost:4000' } //your server
    ));
}

希望对你有帮助。

【讨论】：