Как развернуть приложение React / Apollo GraphQl в Heroku? - PullRequest
Новая
       1

Как развернуть приложение React / Apollo GraphQl в Heroku?

0 голосов
/ 24 октября 2019

У меня есть (относительно) законченное приложение здесь . На данном этапе я просто хочу развернуть.

Я выбрал Heroku на данный момент, так как это кажется самым простым вариантом, и он бесплатный. Тем не менее, я не могу понять, как на самом деле выполнить развертывание, используя интеграцию с CLI или GitHub.

I получал ошибки о 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 , но, к сожалению, они не очень помогают. Я пытался найти здесь дополнительные ответы и общий поиск в Интернете, но, честно говоря, я не совсем уверен, что такое проблема , не говоря уже о том, как ее исправить.

IЯ счастлив попробовать другие варианты, но бесплатный очень важен, поэтому я не уверен, что у меня есть много других вариантов.

Вся помощь приветствуется!

1 Ответ

0 голосов
/ 27 октября 2019

Вы просто получаете пустую страницу? Вы построили и запустили сервер на Heroku, это может быть так же просто, как сервер, не работающий на серверной части. Я покажу вам мои настройки: казалось, что Heroku потребовалось 50 коммитов, чтобы наконец-то получить правильную комбинацию, Heroku просто плохо настроен для совместной работы клиента и сервера, и это может сбить с толку, так как процесс сборки изменилlot.

Сначала в package.json, убедитесь, что у вас есть скрипт heroku-postbuild для установки и запуска клиента. Под сценариями вам нужно "heroku-postbuild": "cd client/ && npm install && npm run build" Этот сценарий может потребоваться изменить в зависимости от того, используется ли на Mac Linux или ПК я Windows.

В моем файле индекса сервера путь к серверу Apollo указан на server.applyMiddleware({ app, path: "/graphql" });

Я использую экспресс для получения моего клиента 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"));
  });
}

Я сделал Procfile в корневой папке с единственной командой внутри web: npm run server Heroku прослушивает этот файл для запуска команд в npmавтоматически.

В моих индексных файлах клиента Apollo у меня указан httpLink uri /graphql. Моя ссылка на веб-сокет (которая может не иметь значения для вашего проекта) указывает непосредственно на Heroku wss://yourappname.herokuapp.com/graphql.

Возможно, этого будет достаточно, чтобы приблизить вас к решению.

...