node.js - 具有不同路径的代理下的 Next.js

Question

使用 next.js 版本 8.0.3 我不知道如何在具有不同子路径的代理下提供自定义服务器。

我在做:

npm run build && npm start

为了构建和打开自定义服务器。

而不是打开 http://localhost:3000 ，我正在使用另一个子路径的代理 http://localhost:8000/example .

代理很简单，重现它:

proxy.js

const express = require('express')
const proxy = require('http-proxy-middleware')

const options = {
  target:'http://localhost:3000/',
}
const exampleProxy = proxy(options)
const app = express()

app.use('/example', exampleProxy)
app.listen(8000)

然后:

node proxy.js

但是，当我打开 http://localhost:8000/example url 正在加载主页，但没有样式、静态、javascript...任何...

我怎样才能正确地做到这一点？

非常感谢!

Answer 1

作为警告，我首先要说我不相信 NextJS 可以很好地处理代理，尤其是在子路径上。

话虽这么说，但以下内容应该有效，但有局限性:

const express = require('express')
const proxy = require('http-proxy-middleware')

const options = {
  target:'http://localhost:3000/',
  pathRewrite: {
    '^/example': ''
  }
}
const exampleProxy = proxy(options)
const app = express()

app.use(['/example', '/_next', '/static'], exampleProxy)
app.listen(8000)

pathRewrite 选项确保代理上的 /example/xyz 重定向到 NextJS 服务器上的 /xyz。

您需要代理 /_next(或您将构建目录重命名为)，以便您的页面找到所有构建的 Assets (脚本、样式表、webpack block 、 ETC。)。如果您检查 Next 的任何项目页面，您会发现这些 Assets 链接是绝对链接，因此也需要代理该目录。

出于同样的原因，您需要代理 /static，除了该目录用于保存您的静态 NextJS Assets (图像等)。

您还会注意到 Next 中的页面链接通常也是绝对的(我知道我的所有项目中都有)。

以上就是我所说的原因，在我看来，NextJS 并不真正适合子路径代理使用。

更新:

您可以在 NextJS 项目根目录下的 next.config.js 文件中添加以下配置:

module.exports = {
  assetPrefix: '/example'
}

这会将 /example 添加到所有构建的资源中，因此您将链接到 /example/_next/pages 而不是 /_next/pages/xyz/xyz。通过此更新，您可以删除代理端的 /_next 代理，您的可构建 Assets (脚本、样式表等)应该仍会加载。

关于您的 NextJS 应用程序中的导航(即“页面”)链接，如我的评论所述，您可以设置您自己的 Link 版本并添加您的子路径:

import Link from 'next/link'

// for proxied server
const PROXY_PATH= '/example'
// for non-proxied server
// const PROXY_PATH= ''

export default MyLink = ({ as, children, ...props }) => <Link {...props} as={`${PROXY_PATH}${as}`}>{children}</Link>

您必须确保所有的 MyLink 组件都定义了一个 as 属性。您不想更改href prop 本身(链接是)，只更改as prop(链接出现)。

最后，对于 /static Assets ，您只需在 NextJS 应用程序中重写静态链接，即转

<img src='/static/mylogo.svg' />

到

<img src=`${PROXY_PATH}/static/mylogo.svg` />

并且代理端的路径重写应该能正确处理。有了这个，您可以在项目范围内在单独的配置文件中定义 PROXY_PATH 或从环境变量加载它。