为啥我的 GraphQL 订阅在本地服务器上运行，但在实时服务器上部署时却不行

Posted 2023-03-08

【中文标题】为啥我的 GraphQL 订阅在本地服务器上运行，但在实时服务器上部署时却不行

【英文标题】：Why my GraphQL subscriptions are working on local server but not when deployed on live server为什么我的 GraphQL 订阅在本地服务器上运行，但在实时服务器上部署时却不行

【发布时间】：2020-12-18 14:55:17

【问题描述】：

我正在构建一个 GraphQL 服务器并在其中进行订阅。一旦我在本地机器上部署服务器并检查 Playground 中的订阅，它就可以工作，即它监听事件并获得新添加的数据。这意味着订阅实现是正确的，它们没有任何问题。当我在本地（即本地主机）上运行时，订阅工作正常，但是当我在实时（Heroku）上部署服务器时，当我在Playground 中收听订阅时，它会给出以下错误：

  "error": "Could not connect to websocket endpoint wss://foodesk.herokuapp.com/graphql. Please check if the endpoint url is correct."

只是为了了解更多信息，我的查询和突变也在实时服务器上运行，只是订阅不起作用。

这是我的代码：

/**
 * third party libraries
 */
const bodyParser = require('body-parser');
const express = require('express');
const  ApolloServer  = require('apollo-server-express');
const helmet = require('helmet');
const http = require('http');
const mapRoutes = require('express-routes-mapper');
const mkdirp = require('mkdirp');
const shortid = require('shortid');
/**
 * server configuration
 */
const config = require('../config/');
const auth = require('./policies/auth.policy');
const dbService = require('./services/db.service');
const  schema  = require('./graphql');

// environment: development, testing, production
const environment = process.env.NODE_ENV;


const graphQLServer = new ApolloServer(
  schema,
  uploads: false
);

/**
 * express application
 */
const api = express();
const server = http.createServer(api);

graphQLServer.installSubscriptionHandlers(server)

const mappedRoutes = mapRoutes(config.publicRoutes, 'api/controllers/');
const DB = dbService(environment, config.migrate).start();

// allow cross origin requests
// configure to allow only requests from certain origins
api.use(function (req, res, next) 

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', '*');

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', '*');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', '*');

  // Pass to next layer of middleware
  next();
);

// secure express app
api.use(helmet(
  dnsPrefetchControl: false,
  frameguard: false,
  ieNoOpen: false,
));

// parsing the request bodys
api.use(bodyParser.urlencoded( extended: false ));
api.use(bodyParser.json());

// public REST API
api.use('/rest', mappedRoutes);

// private GraphQL API
api.post('/graphql', (req, res, next) => auth(req, res, next));

graphQLServer.applyMiddleware(
  app: api,
  cors: 
    origin: true,
    credentials: true,
    methods: ['POST'],
    allowedHeaders: [
      'X-Requested-With',
      'X-HTTP-Method-Override',
      'Content-Type',
      'Accept',
      'Authorization',
      'Access-Control-Allow-Origin',
    ],
  ,
  playground: 
    settings: 
      'editor.theme': 'light',
    ,
  ,
);

server.listen(config.port, () => 
  if (environment !== 'production'
    && environment !== 'development'
    && environment !== 'testing'
  ) 
    console.error(`NODE_ENV is set to $environment, but only production and development are valid.`);
    process.exit(1);
  
  return DB;
);

【问题讨论】：

你解决了这个问题吗？

不，先生，我不能。

【参考方案1】：

根据您的错误；

  "error": "Could not connect to websocket endpoint wss://foodesk.herokuapp.com/graphql. Please check if the endpoint url is correct."

您的应用正在 heroku 应用服务上运行，即“herokuapp.com”。就此服务而言，您无法控制服务器配置。

在开发中，您在“ws://”协议下提供订阅服务，当您部署到 heroku 时，该协议会转换为安全版本“wss://”。我的解决方案需要您通过 ssh 访问服务器。这意味着您升级您的 heroku 订阅以拥有一个具有专用 IP 地址或任何其他云提供商的虚拟机。如果你有，请执行以下操作；

在 vm 上托管您的应用程序并为其提供服务，然后编辑 apache 以代理“yourdomain.com”以在端口 3000 上为应用程序提供服务，如下所示

<VirtualHost *:80>
 ServerName yourdomain.com
 ProxyPreserveHost on
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
RewriteEngine on


</VirtualHost>

转到您的域注册商并添加一个子域，您将通过该子域为您的订阅提供服务，也就是 web-sockets。 这是通过添加带有子域名的 A 记录来完成的，例如“websocket”指向您的 vm ip 地址。这将使“websocket.yourdomain.com”可供使用。

在您的服务器上安装 apache 服务器并包含如下所示的虚拟主机

<VirtualHost *:80>
 ServerName websocket.yourdomain.com
 ProxyPreserveHost on
 ProxyPass / ws://localhost:3000/
 ProxyPassReverse / ws://localhost:3000/
RewriteEngine on


</VirtualHost>

重启apache服务器

此时，您的应用程序正在“yourdomain.com”上运行，您的所有 graphql 突变和查询也都在这里提供服务。但是所有订阅都将在“websocket.yourdomain.com”上建立，这会将所有请求代理到“ws://”协议，从而到达您的订阅服务器而不会出现错误。

N/B 您的客户端代码将使用“wss://websocket.yourdomain.com”进行订阅连接