如何在Docker容器中配置NGINX实现Directus(/admin)与Nuxt3反向代理及热重载

我有一个运行NGINX、Nuxt3和Directus 10.8的Docker容器栈，遇到两个核心问题：

1. 已成功将Nuxt映射到根路径/，但将Directus映射到/admin时出现大量静态资源加载错误（控制台报404，无法加载CSS、JS等资源）。
2. Nuxt无法实现热重载，推测需要反向代理Vite的24678端口，但不清楚具体配置方式。

同时有两个疑问：

• 如何正确将Directus暴露在/admin路径下？
• 配置完成后，Nuxt能否通过directus-nuxt正常调用Directus？

目录结构 #

/
|__docker-compose.yml
|__nuxt
| |__docker-compose.yml
| |__Dockerfile
| |__ # ...nuxt相关文件
|__directus
| |__docker-compose.yml
| |__Dockerfile
| |__ # ...directus相关文件
|__nginx
| |__Dockerfile
| |__default.conf

当前配置文件 #

根目录docker-compose.yml

version: "3"

include:
  - nuxt/docker-compose.yml
  - directus/docker-compose.yml

services:
  nginx:
    container_name: nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - nuxt
      - directus
    volumes:
      - ./nginx:/etc/nginx/conf.d
    networks:
      - stack

networks:
  stack:

Nuxt子目录docker-compose.yml

version: "3"

volumes:
  node_modules:
services:
  nuxt:
    container_name: nuxt
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - "3001:3000"
      - "24678:24678"
    volumes:
      - .:/src
      - node_modules:/src/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
    networks:
      - stack

Directus子目录docker-compose.yml

version: "3"
services:
  directus:
    container_name: directus
    image: directus/directus:10.8.3
    ports:
      - 8055:8055
    volumes:
      - ./extensions:/directus/extensions
    environment:     
      PUBLIC_URL: "http://localhost:8055"
      # ...其他directus环境变量（密钥、数据库连接等）
    networks:
      - stack

NGINX配置default.conf

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://nuxt:3000;
    }

    location /admin {
        proxy_pass http://directus:8055;
    }
}

1. 修复Directus /admin路径反向代理问题 #

当前NGINX配置的核心问题是：Directus默认基于根路径生成静态资源链接，当通过/admin反向代理时，前端会去请求/assets/xxx而非/admin/assets/xxx，导致404。需要修改两处配置：

修改Directus环境变量 #

更新directus/docker-compose.yml中的PUBLIC_URL，使其匹配反向代理后的路径：

environment:     
  PUBLIC_URL: "http://localhost/admin"
  # ...保留其他原有环境变量

修改NGINX配置 #

更新nginx/default.conf，添加路径重写和必要的代理头，确保Directus能正确识别请求前缀：

server {
    listen 80;
    server_name localhost;

    # Nuxt根路径配置
    location / {
        proxy_pass http://nuxt:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Directus /admin路径配置
    location /admin {
        proxy_pass http://directus:8055/;  # 末尾加斜杠，将/admin/xxx转发为directus:8055/xxx
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Prefix /admin;  # 告知Directus请求前缀

        # 替换Directus返回HTML中的资源路径
        sub_filter 'href="/' 'href="/admin/';
        sub_filter 'src="/' 'src="/admin/';
        sub_filter 'action="/' 'action="/admin/';
        sub_filter_once off;
    }

    # Nuxt热重载相关代理
    location /__nuxt/ {
        proxy_pass http://nuxt:3000/__nuxt/;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /ws {
        proxy_pass http://nuxt:24678/ws;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

2. 修复Nuxt热重载问题 #

上述NGINX配置已添加Vite热重载所需的代理规则：

• /__nuxt/代理到Nuxt 3000端口，处理静态资源更新
• /ws代理到Nuxt 24678端口，处理WebSocket连接（热重载核心）

同时你已配置的CHOKIDAR_USEPOLLING=true是Docker卷挂载下监听文件变化的必要项，无需修改。

3. directus-nuxt调用验证 #

配置完成后，Nuxt可以通过directus-nuxt正常调用Directus，有两种配置方式：

方式1：通过NGINX反向代理调用（前端/客户端） #

在nuxt.config.ts中配置反向代理后的地址：

export default defineNuxtConfig({
  modules: ['directus-nuxt'],
  directus: {
    url: 'http://localhost/admin'
  }
})

方式2：容器内部直接调用（服务端/性能更优） #

在Nuxt插件或API路由中，直接使用Docker内部网络地址：

const directus = createDirectus('http://directus:8055')
  .with(authentication('json'))
  // ...其他配置

验证步骤 #

1. 重启所有容器：docker-compose down && docker-compose up -d
2. 访问http://localhost，修改Nuxt文件验证热重载是否生效
3. 访问http://localhost/admin，确认Directus控制台无404错误
4. 在Nuxt中编写测试代码调用Directus API，验证数据返回正常

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