使用默认 Next.js 开发服务器代理到后端答案

【问题标题】：Proxy to backend with default Next.js dev server使用默认 Next.js 开发服务器代理到后端
【发布时间】：2020-07-10 12:03:06
【问题描述】：

以前，当我使用 create-react-app 制作应用程序时，我会拥有一个 setupProxy.js 文件来路由类似于此的 API 请求

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use('/api',
        proxy({
            target: 'http://localhost:8000',
            changeOrigin: true,
        })
    );
};

但这似乎不适用于 next.js。当我做同样的事情时，我会遇到各种错误。

谷歌搜索解决方案，很多人说使用某种自定义服务器。但是我将如何使用默认的 nextjs 开发服务器完成像上面这样的代理呢？（当我的 package.json 中的 dev 是 next dev 时，相当于 npm run dev。

【问题讨论】：

标签： javascript node.js reactjs next.js

【解决方案1】：

我的server.js设置好了，希望对你有帮助

import express from 'express';
import next from 'next';
import proxy from 'http-proxy-middleware';

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

app.prepare().then(() => {
    const server = express();

    server.use(
        '/api',
        proxy({
            target: process.env.API_HOST,
            changeOrigin: true,
        }),
    );

    server.all('*', (req, res) => handle(req, res));

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

package.js

"scripts": {
    "dev": "NODE_ENV=development node -r esm server.js",
    "build": "NODE_ENV=production next build",
    "start": "NODE_ENV=production node -r esm server.js",
},

【讨论】：

NODE_ENV=development node -r esm server.js
如果使用require 那么const { createProxyMiddleware } = require('http-proxy-middleware');
导入 { createProxyMiddleware } from 'http-proxy-middleware';
另外，我做了node server.mjs 并删除了所有 ESM 自定义标记。节点 15 在 mjs 文件中使用 esm 可以很好地播放 :)
嗨，你这样做了吗？我做了 ti，但 build/nodemon 太长了

【解决方案2】：

最终使用了类似于发布的内容。从这里使用的配置文件

https://github.com/zeit/next.js/tree/master/examples/with-custom-reverse-proxy

【讨论】：

【解决方案3】：

现在在配置中有一个官方特性：重写

除了正常的路径重写之外，他们还可以将请求代理到另一个网络服务器

next.config.js：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8000/:path*' // Proxy to Backend
      }
    ]
  }
}

见Next.js Docs Rewrites

【讨论】：

当我想要 WebSocket 代理时，这个不起作用。握手失败。
@nemishzalavadiyaneel socket.io 对我来说也不管用重写...你能找到不涉及创建自定义服务器的解决方案吗？
我还是没有。我正在创建 const 对象并在那里存储硬编码的 URL。如果您找到任何解决方案，请分享。
我相信Rewrites 只是基本的代理设置。更多代理配置需要设置自定义服务器
如果有人在生产中的 nginx 配置中处理这个问题，这里只介绍如何进行配置选项开发。 nextjs.org/docs/api-reference/next.config.js/introduction

【解决方案4】：

重写对我不起作用，使用 axios config.proxy 也不起作用。

我使用了一个很好的旧常量：

const SERVER_URL = 
  process.env.NODE_ENV === 'production' ? 'https://produrl.com : 'http://localhost:8000';

export async function getStaticProps() {
  const data = axios.get(`${SERVER_URL}/api/my-route`)
  // ...
}

我更愿意代理请求并保持我的请求更干净，但我没有一天时间与这个搏斗。

也许这个非常简单的设置会对其他人有所帮助。

【讨论】：