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

Posted 2023-03-08

【中文标题】无法在 Heroku 上渲染 Vue、Graphql 应用程序

【英文标题】：Unable to render Vue, Graphql app on Heroku

【发布时间】：2018-07-01 08:20:27

【问题描述】：

只有当我尝试推送到 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/>'
)

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

【参考方案1】：

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

【讨论】：

我尝试将所有设置代码包装到一个调用中，但由于它是一个异步进程，所以应用程序根本不会被渲染