无法在 Heroku 上渲染 Vue、Graphql 应用程序

Question

只有当我尝试推送到 Heroku 时，我才在渲染我的应用程序时遇到问题。不过在本地运行时一切正常。

我有一个 webpack cli vue 设置。这是我的 package.json 文件的 sn-p：

 "scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node server.js",
    "heroku-postbuild": "npm install --no-shrinkwrap && npm run build",
  },

我从 online tutorial 得到的 heroku-postbuild 命令

我认为我的主要问题在于我的 server.js 文件，该文件位于根文件夹中：

const cors = require('cors')
const express = require('express')
const graphqlHTTP = require('express-graphql')
const schema = require('./server/schema.js')
const serveStatic = require('serve-static');

const app = express()
app.use(cors())
app.use('/graphql', graphqlHTTP({
    schema: schema,
    graphiql: (process.env.NODE_ENV === 'development')
}))

if (process.env.NODE_ENV === 'production') {
    // app.use(serveStatic(__dirname + "/dist"));
    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, 'dist/index.html'));
    })
}

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log('GraphQL API server running at localhost:'+ port);
})

最后，在我的 vuejs ma​​in.js 文件中，我必须定义我的 graphql uri。我怎么知道要使用哪个端口号，因为它在部署后是动态的？

import Vue from 'vue'

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

import App from './App'
import router from './router'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

require('./main.css')

Vue.config.productionTip = false
Vue.use(BootstrapVue)

const httpLink = new HttpLink({
    uri: (process.env.NODE_ENV === 'development' ? 'http://localhost:3000/graphql' : 'https://localhost:5667/graphql')
})

const apolloClient = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
    connectToDevTools: true
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
        $loadingKey: 'loading'
    }
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    apolloProvider,
    router,
    components: { App },
    template: '<App/>'
})

我一直在尝试许多不同的配置，但似乎无法克服这一点。我搜索了很多帖子和教程都没有成功

Answer 1

如果您的端口是为 GraphQL 服务器动态设置的，而不是您的 http 服务器，那么您可以采用的解决方案是在您的服务器上添加一个路由来获取 GraphQL 的端口并将其返回给客户端。然后，您将启动您的 HTTPLink 对象并使用从服务器返回的端口。