Развертывание приложения react/apollo-server на Heroku
То, что я пытаюсь сделать, это развернуть приложение полного стека 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.info(`? Server ready at ${url}`);
});
По какой-то причине я не понимаю, что клиент не обслуживается при развертывании на героку. На URL-адресе heroku я получаю: GET query missing. Если я включаю graphql в рабочей среде, я вижу это, я могу играть с разрешением данных. Но клиент не отображается. Я использую app.get с * не работает, а затем index.html не перехватывается.
Как я могу это исправить?
Спасибо!
Ответы 1
Ошибка, которую вы получаете, связана с тем, что вы предоставляете server из ApolloServer только порту 4000 и не предоставляете app с клиентским приложением внешнего интерфейса.
Чтобы развернуть приложение с полным стеком, вам также необходимо открыть app, для этого вы можете использовать applyMiddleware из ApolloServer и связать сервер 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.info(`? Server ready at http://localhost:4000`);
});
Теперь вы сможете перейти к http://localhost:4000/my-frontend и увидеть свое клиентское приложение.
Надеюсь, поможет.