API Platform添加/api前缀后内置Admin面板报错求助

核心问题分析 #

Admin面板的Next.js应用默认从根路径获取API文档和静态资源，当API新增/api前缀后，需让Admin应用知晓正确的API入口，同时确保Next.js静态资源路由正常。

优雅配置步骤 #

1. 修正docker-compose.yaml环境变量 #

针对Admin服务（通常为pwa服务），配置两个关键环境变量：

services:
  pwa:
    environment:
      # 指向Caddy代理后的完整API入口
      NEXT_PUBLIC_ENTRYPOINT: "http://caddy/api"
      # 指定Next.js静态资源的基础路径
      BASE_PATH: "/admin"

2. 调整Caddyfile路由规则 #

更新@pwa规则，排除/admin*路径的PWA转发逻辑，并添加Admin路径的反向代理：

@pwa expression `(
        header({'Accept': '*text/html*'})
        && !path(
           '/api*', '/admin*', '/docs*', '/graphql*', '/bundles*', '/contexts*', '/_profiler*', '/_wdt*',
            '*.json*', '*.html', '*.csv', '*.yml', '*.yaml', '*.xml'
        )
    )
    || path('/favicon.ico', '/manifest.json', '/robots.txt', '/_next*', '/sitemap*')`

# 将Admin及Next.js静态资源请求转发到PWA服务
reverse_proxy /admin* pwa:3000
reverse_proxy /_next* pwa:3000

3. 配置Next.js的next.config.js #

在PWA目录的next.config.js中添加basePath配置，匹配环境变量设置：

module.exports = {
  basePath: process.env.BASE_PATH || "",
};

该配置确保Next.js生成的静态资源路径自动带上/admin前缀，避免404错误。

4. 重启服务验证 #

执行命令重启Docker Compose：

docker-compose down && docker-compose up -d

访问https://localhost/admin，此时Admin面板会自动从/api获取文档，静态资源请求也能正确路由，不再出现404报错。

之前配置失效的原因 #

仅修改NEXT_PUBLIC_ENTRYPOINT未配置Next.js的basePath，会导致静态资源请求仍指向根路径，同时Admin面板的API请求因路径解析逻辑问题，未正确使用配置的入口地址。组合配置BASE_PATH和NEXT_PUBLIC_ENTRYPOINT，可从根本上解决路由与API入口问题，无需修改源码。

内容的提问来源于stack exchange，提问作者HaraldB