使用 Nuxt 部署到 Heroku 时为 API 路由获取 404答案

【问题标题】：Getting a 404 for API routes when deploying to Heroku with Nuxt使用 Nuxt 部署到 Heroku 时为 API 路由获取 404
【发布时间】：2019-10-18 09:41:47
【问题描述】：

我不知道这里发生了什么。我的应用程序在开发中运行良好，但是当我推送到 Heroku 时，每当我尝试使用 Postman（或使用 Axios）访问任何路由时，它都会引发 404 错误。我在这里做错了什么？

这是我的 index.js：

const express = require("express");
const consola = require("consola");
const { log } = console;

const { Nuxt, Builder } = require("nuxt");

const app = express();

// Import and Set Nuxt.js options
let config = require("../nuxt.config.js");

// Use routes
app.use("/api/search", require("./api/search"));

app.get("/test", (req, res) => {
    return res.send("Received");
});

config.dev = process.env.NODE_ENV !== "production";

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

    const { host, port } = nuxt.options.server;

    const PORT = process.env.PORT || port;
    const HOST = process.env.PORT ? "myapp.heroku.com" : host;

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

    // Give nuxt middleware to express
    app.use(nuxt.render);

    // Listen the server
    app.listen(PORT, HOST);

    consola.ready({
        message: `Server listening on http://${HOST}:${PORT}`,
        badge: true
    });
}

process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;

start();

还有我的nuxt.config.js

const pkg = require("./package");

module.exports = {
    mode: "universal",

    head: {
        title: "My app",
        meta: [
            { ...
            },
            { ...
            },
            { ...
            },
            { ...
            }
        ],
        link: [
            { ...
            },
            { ...
            },
            { ...
            }
        ],
        script: [ ...
        ]
    },

    /*
     ** Nuxt.js modules
     */
    modules: [
        [
            "@nuxtjs/axios",
            {
                baseURL: "https://myapp.herokuapp.com"
            }
        ],
        "bootstrap-vue/nuxt",
    ],

    router: {
        scrollBehavior: async (to, from, savedPosition) => {
            if (savedPosition) {
                return savedPosition;
            }

            const findEl = async (hash, x) => {
                return ( ...
                );
            };

            if (to.hash) {
                let el = await findEl(to.hash);

                if (el) { ...
                }
            }

            return { ... };
        }
    },

    /*
     ** Build configuration
     */
    build: {
        optimization: { ... 
        },
        analyze: false
    }
};

如你所见，我有一条测试路线：

app.get("/test", (req, res) => {
    return res.send("Received");
});

使用 Postman 向 localhost:3000/test 发出 GET 请求可以正常工作。但它不适用于 myapp.herokuapp.com/test。这是怎么回事？

【问题讨论】：

您解决了这个问题了吗？我遇到了同样的问题

标签： node.js express vue.js heroku nuxt.js

【解决方案1】：

我在您的 nuxt.config.js 文件中没有看到您的服务器中间件设置。你加了那些？如果没有，很有可能这就是它不起作用的原因。这是有关如何使用 nuxt 设置服务器中间件的部分文档的副本。

import serveStatic from 'serve-static'

export default {
  serverMiddleware: [
    // Will register redirect-ssl npm package
    'redirect-ssl',

    // Will register file from project api directory to handle /api/* requires
    { path: '/api', handler: '~/api/index.js' },

    // We can create custom instances too
    { path: '/static2', handler: serveStatic(__dirname + '/static2') }
  ]
}

这里是nuxt server middleware docs 的链接，了解更多信息。

我觉得因为您在快递服务器中定义了路线，所以您不需要采取上述步骤，但尝试一下也无妨。甚至可以尝试像在文档中那样将路由移动到 api 目录中。只是为了确保 nuxt 正确注册路由。

我不确定，但我认为 nuxt 可能会将 api 路由注册为 url/api/yourRoute。也许试试 myapp.herokuapp.com/api/test。这就是我能想到的所有可能的问题，除非项目的部署方式存在问题。不幸的是，我还没有部署到 heroku，所以我真的无法提供任何进一步的建议。

【讨论】：

【解决方案2】：

为我解决这个问题的方法是将 Procfile 中的命令从 nuxt start 更改为 npm run start，否则服务器端代码都不会运行。

【讨论】：

【解决方案3】：

对于未来的读者，请确保您使用的是server as your target

静态模式下不能使用express等服务器中间件。

所以你的应用程序的nuxt.config.js 可以是ssr = true 或false，但你的target 需要是server 而不是static。然后确保您已正确连接您的服务器中间件：https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/

您可以通过运行nuxt build 和nuxt start 来测试一切是否在本地运行。（不要测试您的服务器中间件是否使用nuxt 命令）：

 "scripts": {
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run build"
  },

【讨论】：