如何在 Zeit Now 上使用 GraphQL 后端部署 Next.js？答案

【问题标题】：How to deploy Next.js with GraphQL backend on Zeit Now?如何在 Zeit Now 上使用 GraphQL 后端部署 Next.js？
【发布时间】：2019-10-11 19:35:04
【问题描述】：

我有一个 Next.js/Express/Apollo GraphQL 应用程序在 localhost 上运行良好。

我尝试在 Zeit Now 上部署它，Next.js 部分工作正常，但 GraphQL 后端失败，因为 /graphql 路由返回：

502: An error occurred with your deployment
Code: NO_STATUS_CODE_FROM_LAMBDA

我的now.json 看起来像：

{
  "version": 2,
  "builds": [
    { "src": "next.config.js", "use": "@now/next" },
    { "src": "server/server.js", "use": "@now/node" }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "server/server.js" },
    { "src": "/graphql", "dest": "server/server.js" }
  ]
}

建议？

【问题讨论】：

标签： graphql apollo react-apollo next.js vercel

【解决方案1】：

直到我在 Wes Bos slack 频道上找到解决方案之前，我都遇到了这个错误。

以下内容对我有用，但您可能会因为其他原因收到该错误。

我不确定它为什么会起作用。

你可以看到它在工作here

cd backend
运行npm install graphql-import
更新package.json中的脚本：

"deploy": "prisma deploy --env-file variables.env&& npm run writeSchema",
"writeSchema": "node src/writeSchema.js"

注意：对于非 Windows 用户，请确保在 && 之前放置空格

创建src/writeSchema.js:

const fs = require('fs');
const { importSchema } = require('graphql-import');
const text = importSchema("src/generated/prisma.graphql");
fs.writeFileSync("src/schema_prep.graphql", text)

更新src/db.js:

const db = new Prisma({
typeDefs: __dirname + "/schema_prep.graphql",
...
});

更新src/createServer.js:

return new GraphQLServer({
typeDefs: __dirname + '/schema.graphql',
...
});

更新src/schema.graphql:

# import * from './schema_prep.graphql'

创建now.json

{
    "version": 2,
    "name": "Project Name",
    "builds": [
        { "src": "src/index.js", "use": "@now/node-server" }
    ],
    "routes": [
        { "src": "/.*", "dest": "src/index.js" }
    ],
    "env": {
        "SOME_VARIABLE": "xxx",
        ...
    }
}

运行npm run deploy 以初始创建schema_prep.graphql。
运行now

另一个回复是这样说的：

您不应混合使用 graphql 导入和 js/ts 导入。 graphql 文件上的语法将由 graphql-import 解释，并将被 ncc 忽略（读取 __dirname 内容并将文件移动到正确目录等的编译器）在我的示例中，“schema_prep.graphql”已经使用生成的 graphql 文件中的导入进行了预处理。

希望这会有所帮助。

【讨论】：

【解决方案2】：

这是在 Zeit Now（作为无服务器函数/lambda）和 Heroku（使用 Express 服务器）上运行的 Next.js/Apollo GraphQL 的完整示例：

https://github.com/tomsoderlund/nextjs-pwa-graphql-sql-boilerplate

【讨论】：