无法链接后端 API 路由 - NextJS答案

【问题标题】：Unable to link backend API routes - NextJS无法链接后端 API 路由 - NextJS
【发布时间】：2020-06-07 15:37:29
【问题描述】：

我正在制作一个 shopify 应用程序，并创建了一个 Koa + NodeJS 后端和在前端运行的 NextJS，在同一个端口中，我还创建了一个自定义 server.js 文件当在我的 PC 上本地运行时，它运行正常，所有路由都按预期工作，并且我能够从后端 (Koa) 中定义的路由从前端 (React) 获取数据。

现在的问题是，当我将应用程序部署到 vercel 时，它似乎无法识别我的 Koa 路由，并且在控制台中针对我对后端路由发出的所有请求抛出 404 错误。这是我第一次与 NextJS 合作，所以我对这里出了什么问题一无所知，所以我希望得到一些支持。

此外，当我部署它时，shopify 身份验证似乎也不再像在本地开发中运行时那样工作了。

我的代码： server.js：

require('isomorphic-fetch');

const dotenv = require('dotenv');
dotenv.config();

const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');
const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy');
const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');
const Router = require('koa-router');
const { receiveWebhook, registerWebhook } = require('@shopify/koa-shopify-webhooks');
const getSubscriptionUrl = require('./server/getSubscriptionUrl');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const {
  SHOPIFY_API_SECRET_KEY,
  SHOPIFY_API_KEY,
  HOST,
} = process.env;

app.prepare().then(() => {
  const server = new Koa();
  const router = new Router();
  server.use(session({ sameSite: 'none', secure: true }, server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products', 'write_products'],
      async afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none'
        });
        const registration = await registerWebhook({
          address: `${HOST}/webhooks/products/create`,
          topic: 'PRODUCTS_CREATE',
          accessToken,
          shop,
          apiVersion: ApiVersion.October19
        });

        if (registration.success) {
          console.log('Successfully registered webhook!');
        } else {
          console.log('Failed to register webhook', registration.result);
        }
        await getSubscriptionUrl(ctx, accessToken, shop);
      }
    })
  );

router
  .get('/api', ctx => {
    ctx.res.statusCode = 200;  
    ctx.body = "API Route"
  })

  const webhook = receiveWebhook({ secret: SHOPIFY_API_SECRET_KEY });

  router.post('/webhooks/products/create', webhook, (ctx) => {
    console.log('received webhook: ', ctx.state.webhook);
  });

  server.use(graphQLProxy({ version: ApiVersion.April19 }));

  router.get('*', verifyRequest(), async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

  server.use(router.allowedMethods());
  server.use(router.routes());

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

【问题讨论】：

标签： node.js shopify next.js koa

【解决方案1】：

如果我说的没错，我发现 Vercel 不再支持自定义服务器了。从这个https://github.com/vercel/next.js/issues/9397#issuecomment-556215227

所以，我改用 Heroku 来部署我的应用程序，现在它可以正常工作了。

【讨论】：