在 Heroku 上部署 react/apollo-server 应用程序

Posted 2023-03-08

【中文标题】在 Heroku 上部署 react/apollo-server 应用程序

【英文标题】：Deploying react/apollo-server app onto Heroku

【发布时间】：2019-10-21 10:37:12

【问题描述】：

我正在尝试将 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 没有被捕获。

我该如何解决这个问题？

谢谢！

【参考方案1】：

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

为了部署全栈应用程序，您还必须公开app，为此您可以使用ApolloServer 中的applyMiddleware 并绑定阿波罗服务器和前端客户端，例如：

.....

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 并查看您的客户端应用程序。

希望对你有帮助。