Question

我是新手，刚刚在Graphql中试用Vue.js。经过一番学习之后，我去用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上？我尝试通过网络进行搜索，但是信息零散，对我来说没有太大意义。谁能给我一个更清晰的方向来帮助我解决这个问题，以便我可以学习并了解更多有关此的信息。

Answer 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

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

1 个答案: