如何在 Heroku 上部署 GraphQL API 及其 React 客户端？答案

【问题标题】：How can I deploy a GraphQL API and its React Client on Heroku?如何在 Heroku 上部署 GraphQL API 及其 React 客户端？
【发布时间】：2022-08-06 14:19:46
【问题描述】：

我创建了一个带有 GraphQL API 和 React 客户端的应用程序。我的项目结构如下：

project
│   README.md    
│
└───server
│   │   package.json
│   │   
│   └───src
│       │   index.ts
│       │
│       └───entity/migration/resolver/etc.
│       │   ...
│   
└───client
│   │   package.json
│   │
│   └───public
│   │   │   index.html
|   |   |   ...
│   │   │
│   └───src
│       │   index.js
│       │
│       └───components
│       │   ...

我想将整个应用程序部署到 Heroku，但我不太确定该怎么做。在我的本地机器上，我的服务器在localhost:4000 上运行，我的客户端在localhost:3000 上运行，我的客户端使用@apollo/client 向我的服务器发出请求。我需要将两个单独的应用程序部署到 Heroku，还是有办法将这两个应用程序部署为一个应用程序？

这是我的server/src/index.ts 的代码：

import dotenv from \"dotenv\"
import \"reflect-metadata\"
import { ApolloServer } from \"apollo-server\"
import { buildSchema } from \"type-graphql\"
import { createConnection } from \"typeorm\"

(async () => {  
  await createConnection()  

  const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [`${__dirname}/resolver/*.ts`],
    })
  })

  const port = process.env.PORT || 4000
  apolloServer.listen(port, () => {
    console.log(`Server started on port: ${port}`)
  })
})()

这是我client/src/index.js 的代码：

import React from \"react\"
import ReactDOM from \"react-dom\"
import { ApolloClient, ApolloProvider, InMemoryCache } from \"@apollo/client\"

import App from \"./components/App\"

const client = new ApolloClient({
    uri: process.env.ENDPOINT || \"http://localhost:4000\",
    cache: new InMemoryCache()
})

ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById(\"root\"))

标签： node.js reactjs heroku graphql apollo

【解决方案1】：

这是一个很长的话题，这正是我最近开始开发的，整个源代码都可以在 Github 上的https://github.com/mdarif/project-management

这是 MERN 应用程序，我在 Heroku 上一次性部署了服务器/客户端和 MongoDB，还有一个使用 Github Actions 的相同 MERN 应用程序的 Dockerize 版本。

应注意以下重要事项：

Heroku 上 Dev 和 Config Vars 的环境变量
在server/index.js or server.js 中添加处理程序到客户端构建

// Serve Frontend
if (process.env.NODE_ENV === 'production') {
  // Set build folder as static folder
  app.use(express.static(path.join(__dirname, '../client/build')))

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build/index.html'))
  })
} else {
  app.get('/', (req, res) => {
    res.status(200).json({ message: 'Welcome to the Project...' })
  })
}

将脚本添加到 package.json（服务器）

  "scripts": {
    ...
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },

确保分别测试您的客户端和服务器版本
将 Heroku 连接到 GitHub
- 访问 heroku.com
- 选择连接到 GitHub 作为部署方法
- 如果您的 GitHub 帐户未连接到 Heroku，请执行此操作
- 搜索并选择我们在上一步中创建的项目存储库
- 启用自动部署并选择部署分支
- 单击部署分支

就是这样！你完成了。现在将部署您的应用程序。如果遇到错误，可以使用 Heroku 的日志进行调试。

【讨论】：