使用 apache 代理在 Docker 容器中运行的 Next.js 应用程序

Question

我确信对此有一个简单的答案...我有一个 Next.js v14 应用程序在一个暴露在端口 6502 上的容器中运行。我可以使用 http://localhost:6502 访问它，一切正常。现在我想使用 Apache 的反向代理来提供网站服务，但是当我这样做时，我会遇到各种问题，显示错误的 URL（即路径丢失）。

这是我的 next.config.mjs 文件的摘录（

isProd

已设置为

true

）：

  output: "standalone",
  assetPrefix: isProd ? "http://mydomain/myapp" : undefined,

  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  trailingSlash: true,

在我的 apache 配置文件中：

    ProxyPreserveHost On
    ProxyRequests Off
    ProxyPass "/myapp" "http://localhost:6502/"
    ProxyPassReverse "/myapp" "http://localhost:6502/"

docker 容器与 apache 运行在同一台服务器上。

使用此配置，当我访问 http://mydomain/myapp 时，页面会呈现，但没有图像（这些图像保存在我的 Next.js 项目中的 /public/images 下）。当我单击该页面中的链接时，它应该将我带到同一应用程序中的另一个页面（即 /src/app/update/page.tsx），但它会被重定向到 http://mydomain/update 而不是 http： //mydomain/myapp/update.我在 next.config.mjs 中尝试过

assetPrefix

甚至

basePath

，但都无济于事。我想我应该在这里问，而不是继续浪费时间来解决这个问题。

Answer 1

这个问题的主要解决方案是从

next.config.mjs

中的assetPrefix中删除域名并将其导出为环境变量：

const isProd = process.env.NODE_ENV === "production";
assetPrefix: isProd ? "/myapp" : "http://localhost:3000";

const nextConfig = async (phase, { defaultConfig }) => {
  return {
    env: {
      ASSET_PREFIX: assetPrefix, // Assigned at BUILD time
    },
    assetPrefix: assetPrefix,
    ...
  };
};

export default nextConfig;

然后将其作为在服务器端运行的 page.tsx 文件的 prop 传递给我的客户端组件：

"use server";

export default async function Page() {
  return Promise.resolve(
    <MyComponent assetPrefix={process.env.ASSET_PREFIX} />
  };
}

最后，在代码中的所有超链接前面添加前缀：

<Link href={`${props.assetPrefix}/mypage`}`>Click</Link>`