将 react/apollo-server 应用程序部署到 Heroku

Question

我想做的是将 react / apollo-server 全栈应用程序部署到 heroku。因此，我尝试从 express/apollo-server 后端提供静态客户端文件，如下所示：

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 设置为启用我可以看到它，我可以玩解析数据。但是客户端没有呈现。我猜测 app.get 和 * 不工作，然后 index.html 没有被捕获。

我该如何解决？

谢谢！

Answer 1

您收到的错误是因为您仅将 ApolloServer 中的 server 公开到端口 4000，而不是将 app 公开给前端客户端应用程序。

为了部署全栈应用程序，您还必须公开 app，为此您可以使用 ApolloServer 中的 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 并查看您的客户端应用程序。

将 react/apollo-server 应用程序部署到 Heroku

Deploying react/apollo-server app onto Heroku

express

apollo

reactjs

graphql

apollo-server