在Heroku上部署React/Apollo服务器应用程序 [英] Deploying react/apollo-server app onto Heroku

问题描述

我要做的是将React/Apollo-SERVER全堆栈应用程序部署到Heroku。因此，我尝试从Express/Apollo服务器后端提供静态客户端文件，如下所示：

const path = require('path');

const express = require('express');
const app = express();
const cors = require('cors');
const { ApolloServer } = require('apollo-server');

const { schema } = require('./schema');
const { resolvers } = require('./resolvers');

app.use(cors());

app.use(express.static('public'));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

const server = new ApolloServer({
  typeDefs: schema,
  resolvers,
});

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

出于某些原因，我不明白客户端在部署到Heroku时没有得到服务。在Heroku URL上我得到：GET query missing.如果我在生产中将GraphQL设置为Enable，我可以看到它，我可以尝试解析数据。但未呈现客户端。我正在使用app.get with*不起作用，然后未捕获index.html。

我如何修复它？

谢谢！

推荐答案

您收到的错误是因为您只将ApolloServer中的server暴露到端口4000，而不是将app与前端客户端应用程序一起暴露。

为了部署全栈应用，您还必须公开app，为此您可以使用applyMiddleware并绑定Apollo服务器和前端客户端，如下所示：

.....

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

const server = new ApolloServer({
  typeDefs: schema,
  resolvers,
});

server.applyMiddleware({
  path: '/my-frontend', // you should change this to whatever you want
  app,
});

app.listen({ port: process.env.PORT || 4000 }, () => {
  console.log(`🚀  Server ready at http://localhost:4000`);
});

现在您应该能够导航到http://localhost:4000/my-frontend并查看您的客户端应用程序。

希望它能有所帮助。

这篇关于在Heroku上部署React/Apollo服务器应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！