Блог

Главная - Вопросы по программированию - Как мне развернуть react GraphQL в Heroku?

Как мне развернуть react GraphQL в Heroku?

#reactjs #heroku #deployment #graphql #apollo

#reactjs #heroku #развертывание #graphql #apollo

Вопрос:

У меня есть приложение с полным стеком, которое использует React во внешнем интерфейсе и GraphQL yoga во внутреннем интерфейсе. Я пытаюсь развернуть приложение в Heroku, но я не могу получить доступ к своему интерфейсу. Когда я перехожу по URL Heroku, все, что я вижу, — это игровая площадка 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.

Комментарии:

1. Включаете ли вы uri: » localhost: 4000 » в свой интерфейс при его публикации в heroku?

2. Что вы имеете в виду, включая это? Вы имеете в виду специальную конфигурацию? Извините, я никогда раньше не развертывал Heroku

3. Если вы установите uri как (const client = new ApolloClient({uri: "http://localhost:4000"})) , это не будет работать на heroku, потому что ваше серверное приложение не запущено на localhost: 4000 heroku. Также вы пытаетесь обслуживать страницу react, используя тот же сервер graphql?

4. О, да, у меня это есть в моем клиенте. На что я должен это изменить? И да, я пытаюсь обслуживать страницу react с помощью сервера, если только нет лучшего способа сделать это.

Ответ №1:

Измените свой uri ApolloClient на:

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

Надеюсь, это поможет.