如何部署到 Apollo Graphql 服务器和客户端到生产环境？

Posted 2023-03-08

【中文标题】如何部署到 Apollo Graphql 服务器和客户端到生产环境？

【英文标题】：How to deploy to Apollo Graphql serer and client to production?

【发布时间】：2020-10-28 03:02:59

【问题描述】：

我正在尝试将示例项目部署到 Heroku。我尝试的一切都会导致 404。这是我的设置

server.js

const port = normalizePort(process.env.PORT || 9000);
...
const context = (req) => (user: req.user && db.users.get(req.user.sub));
const apolloServer = new ApolloServer(typeDefs, resolvers, context);
apolloServer.applyMiddleware(app, path: '/graphql');

app.listen(port, () => console.info(`Server started on port $port`));

当我执行 heroku open 并转到 site.herokuapp.com/graphql 时，我得到一个 404，对于 site.herokuapp.com 也是如此。

request.js

我还有一个 request.js，用于将数据从 graphql 导入我的项目，如下所示：

import  ApolloClient, HttpLink, InMemoryCache, ApolloLink  from 'apollo-boost';
import gql from 'graphql-tag';
 //The gql conver the string into a grapghql query that is required by apollo client
const endpointURL = '/graphql';

const client = new ApolloClient(
    link: ApolloLink.from([
        new HttpLink(uri: endpointURL)
    ]),
    cache: new InMemoryCache()
);

我似乎不知道如何正确地将我的项目部署到heroku；

项目结构

-root/
 -client/
   request.jsx
   package.json
 -server.js
 -package.json

服务器

package.json

  "scripts": 
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "build": "cd client && npm run build",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  ,

客户

package.json

  "proxy": "http://localhost:9000",
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,

【参考方案1】：

终于解决了问题。我错过了一些像 bodyParser 和 cors 这样的包。我也忘了指向'index.html'。我还发现你可以在根目录中添加一个 Procfile 来帮助 heroku 启动 npm start。

更新 server.js

const  ApolloServer, gql = require('apollo-server-express');
const express = require('express');
const firebase = require('firebase/app');
require('firebase/firestore');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');

if (process.env.NODE_ENV !== 'production') require('dotenv').config();

const  config = 
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID ,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID
;

firebase.initializeApp(config);

const firestore = firebase.firestore()

const normalizePort = port => parseFloat(port, 10);

const port = normalizePort(process.env.PORT || 9000);

const app = express();

app.use(cors());

const apolloServer = new ApolloServer(typeDefs, resolvers, context);
apolloServer.applyMiddleware(app, path: '/graphql');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));

app.use(cors());
if (process.env.NODE_ENV === 'production') 
  app.use(express.static(path.join(__dirname, 'client/build')));

  app.get('*', function(req, res) 
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  );

app.listen(port, error => 
  if (error) throw error;
  console.log('Server running on port ' + port);
);

将 Procfile 添加到 root 然后添加以下行

web: npm start