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

【问题标题】：How to deploy to Apollo Graphql serer and client to production?如何部署到 Apollo Graphql 服务器和客户端到生产环境？
【发布时间】：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"
  },

【问题讨论】：

标签： express heroku graphql apollo apollo-server

【解决方案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

【讨论】：