Nuxt 后端的 API Koa 服务器不在 Heroku（生产）上运行

Question

我在基于Koa template 的后端使用 Koa 作为 API / 控制器在通用模式下运行 Nuxt。我正在部署到 Heroku。 API 在本地工作正常，但在生产中返回 404。我认为该应用程序在部署时作为 SPA 运行，其他一切运行良好。

这是我的服务器/index.js

const Koa = require('koa')
const consola = require('consola')
const Router = require('koa-router');
const { Nuxt, Builder } = require('nuxt')
const api = require('./api');

console.log('server works'); // ------> This line gets ignored by the Heroku console

const app = new Koa()
const router = new Router();

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = app.env !== 'production'

router.use('/api', api.routes(), api.allowedMethods());
app.use(router.routes());

async function start () {
  // Instantiate nuxt.js
  const nuxt = new Nuxt(config)

  const {
    host = process.env.HOST || '127.0.0.1',
    port = process.env.PORT || 3000
  } = nuxt.options.server

  // Build in development
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  app.use((ctx) => {
    ctx.status = 200
    ctx.respond = false // Bypass Koa's built-in response handling
    ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
    nuxt.render(ctx.req, ctx.res)
  })

  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`, //  ------>  Neither this line appears in Heroku console
    badge: true 
  })
}

start()

过程文件

web: nuxt start

来自 package.json 的脚本

"scripts": {
    "dev": "cross-env HOST=192.168.1.65 NODE_ENV=development nodemon server/index.js --watch server ",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "test": "ava",
    "test:unit": "cross-env TEST=unit ava --config unit.config.js",
    "test:e2e": "cross-env TEST=e2e ava --config e2e.config.js",
    "heroku-postbuild": "nuxt build"
  }

我想我在阅读 all these 部署文档并没有看到明显的内容后得到了 nu(x)ts。

谢谢。

Answer 1

我没有遇到任何问题，附上我的 package.json、server/index.js 文件和 Heroku 环境设置。你可以从here查看herokuapp

package.json

{
  "name": "testkoa",
  "version": "1.0.0",
  "description": "My first-class Nuxt.js project",
  "author": "Ahmet Zeybek",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "cross-env": "^5.2.0",
    "koa": "^2.6.2",
    "koa-router": "^7.4.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

服务器/index.js

const Koa = require("koa");
const Router = require("koa-router");
const consola = require("consola");
const { Nuxt, Builder } = require("nuxt");
const app = new Koa();
// Import and Set Nuxt.js options
const config = require("../nuxt.config.js");
config.dev = app.env !== "production";

async function start() {
  app.use(async function handleError(ctx, next) {
    try {
      await next();
    } catch (err) {
      ctx.status = err.statusCode || err.status || 500;
      ctx.body = err;
    }
  });
  const router = new Router({ prefix: "/api" });
  router.get("/:name", async ctx => {
    ctx.response.body = `Hello ${ctx.params.name}`;
  });
  // Instantiate nuxt.js
  const nuxt = new Nuxt(config);

  const {
    host = process.env.HOST || "127.0.0.1",
    port = process.env.PORT || 3000
  } = nuxt.options.server;

  // Build in development
  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build();
  } else {
    await nuxt.ready();
  }

  app.use(router.routes());
  app.use(router.allowedMethods());
  app.use(ctx => {
    ctx.status = 200;
    ctx.respond = false; // Bypass Koa's built-in response handling
    ctx.req.ctx = ctx; // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
    nuxt.render(ctx.req, ctx.res);
  });

  app.listen(port, host);
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  });
}

start();

Heroku 配置变量

HOST=0.0.0.0
NODE_ENV=production
NPM_CONFIG_PRODUCTION=false

你不需要Procfile 来使用你在 Heroku 上的 Nuxt 应用程序 配置，从你的项目文件夹中删除它