Express 如何部署到Apollo Graphql serer并将客户端部署到生产环境？

我正在尝试将一个示例项目部署到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}`));

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);
});

当我打开heroku并进入site.herokuapp.com/graphql时，我得到了404，site.herokuapp.com也得到了404

request.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}`));

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);
});

我还有一个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

web: npm start

服务器

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"
  },

---

终于解决了这个问题。我丢失了一些包，比如

bodyParser

和

cors

。我还忘了指向

'index.html'

。我还发现，您可以向根目录添加一个Procfile，以帮助heroku启动

npm start

更新的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}`));

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，然后添加以下行

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

web: npm start