如何在 Heroku 上正确部署 Vue + Apollo 服务器和客户端应用程序？答案

【问题标题】：How to properly deploy a Vue + Apollo Server & Client app on Heroku?如何在 Heroku 上正确部署 Vue + Apollo 服务器和客户端应用程序？
【发布时间】：2018-12-15 03:12:05
【问题描述】：

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

【问题讨论】：

标签： heroku vue.js graphql vue-cli-3 vue-apollo

【解决方案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。
然后您应该构建您的 Vue 应用程序并指定您的 GraphQL 服务器路径作为您的 Heroku 应用程序的链接加上 /graphql（我通过 .env 文件完成）。
部署到 Heroku，仅此而已！我花了大约 10 分钟。

另外，你可以在这里查看我的源代码 https://github.com/kravchenkoegor/fullstack-vue-graphql/blob/master/src/server.js

【讨论】：