Question

我有一个全栈应用程序，该应用程序在前端使用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上使它们全部运行。

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

希望有帮助。

如何将React + GraphQL部署到Heroku？

1 个答案: