Как правильно развернуть приложение Vue + Apollo Server & Client на Heroku? - PullRequest
Новая
       11

Как правильно развернуть приложение Vue + Apollo Server & Client на Heroku?

0 голосов
/ 15 декабря 2018

Я новичок и только что пробовал Vue.js с Graphql.После некоторого изучения я пошел и подготовил проект с помощью vue ui (vue cli 3), добавил vue-cli-plugin-apollo для клиента и сервера, поэтому моя текущая структура проекта выглядит следующим образом:

Папка проекта 

─┬── apollo-server (server folder)
 ├── node_modules
 ├── public
 ├─┬ src (client folder)
 │ └┬─ assets
 │  ├─ components
 │  ├─ graphql
 │  ├─ views
 │  ├─ App.vue
 │  ├─ main.js
 │  ├─ router.js
 │  ├─ store.js
 │  └─ vue-apollo.js
 ├── .env
 ├── package.json
 └── vue.config.js

Package.json 

{
  "name": "vue-apollo-graphql",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "apollo": "vue-cli-service apollo:watch --run \"vue-cli-service serve\"",
    "apollo:run": "vue-cli-service apollo:run"
  },
  "dependencies": {
    "graphql-import": "^0.7.1",
    "graphql-type-json": "^0.2.1",
    "lowdb": "^1.0.0",
    "merge-graphql-schemas": "^1.5.8",
    "mkdirp": "^0.5.1",
    "shortid": "^2.2.8",
    "vue": "^2.5.17",
    "vue-apollo": "^3.0.0-beta.11",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-prettier": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-graphql": "^2.1.1",
    "eslint-plugin-vue": "^5.0.0-0",
    "graphql-tag": "^2.9.0",
    "vue-cli-plugin-apollo": "^0.18.0",
    "vue-template-compiler": "^2.5.17"
  }
}

При локальной разработке npm run apollo работает для приложения в localhost: 8080 (client) & localhost: 4000 / graphql

Итак, мой вопрос : как мне развернуть их вместе на heroku?Я пробовал искать в Интернете, и информация фрагментирована и не имеет особого смысла для меня.Может кто-нибудь дать более четкое указание, чтобы помочь мне решить эту проблему, чтобы я мог узнать и понять о ней больше.

1 Ответ

0 голосов
/ 19 декабря 2018

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

  1. Перейдите на https://www.apollographql.com/docs/apollo-server/essentials/server.html#middleware и посмотрите раздел «Промежуточное программное обеспечение».Они говорят, что вы можете добавить сервер Apollo в качестве промежуточного программного обеспечения к существующему серверу Express.Итак, вам следует установить пакет apollo-server-express и импортировать из него ApolloServer.Затем запустите ваш сервер Express, и сервер Apollo будет работать на path-to-your-server/graphql.
  2. . Затем вы должны создать приложение Vue и указать свой путь к серверу GraphQL в виде ссылки на приложение Heroku плюс /graphql (я так и сделал)через .env файл).
  3. Развертывание в Heroku и все!Это заняло у меня около 10 минут.

Кроме того, вы можете увидеть мой исходный код здесь https://github.com/kravchenkoegor/fullstack-vue-graphql/blob/master/src/server.js

...