在Heroku上部署react/apollo服务器应用程序

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设置为enabled，我可以看到它，我可以尝试解析数据。但未呈现客户端。我假设*的app.get不起作用，然后index.html就不会被捕获。

我怎么才能修复它呢？

谢谢!

Answer 1

您得到的错误是因为您只将server从ApolloServer公开到端口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并查看您的客户端应用程序。

希望能有所帮助。