2

我是新手，刚刚尝试了 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

包.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 上？我曾尝试在网上搜索，但信息是零散的，对我来说没有多大意义。任何人都可以给出更清晰的方向来帮助我解决这个问题，以便我可以了解和了解更多相关信息。

4

1 回答 1

0

我也遇到了这个问题，这就是我管理它的方式。

  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

于 2018-12-19T12:34:17.047 回答