如何配置 NGINX 以在 Docker 容器中为 Directus 提供 Nuxt 3 应用程序服务

Question

我有一个运行 3 个服务的 Docker 容器：NGINX、Nuxt3 和 Directus 10.8。 我正在努力让反向代理正常工作。我可以成功地将 Nuxt 映射到“/”，但是在将 Directus 映射到任何路由时遇到错误（但为了论证起见，我们说“/admin”）。它看起来至少可以部分工作，但 Directus 返回大量错误： Nuxt 也不是热重载的，我想我还需要为 Vite 反向代理端口 24678，但我不确定如何做到这一点。

如何正确地将 Directus 暴露在“/admin”上，并且允许 Nuxt 使用它（特别是使用 directus-nuxt）？

所有服务都包含在具有自己的 docker-compose.yml 文件的子文件夹中，整个堆栈从根级别的 docker-compose.yml 运行：

/
|__docker-compose.yml
|__nuxt
| |__docker-compose.yml
| |__Dockerfile
| |__ # ...nuxt specific files
|__directus
| |__docker-compose.yml
| |__Dockerfile
| |__ # ...directus specific files
|__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 env variables - key, secret, db connection etc
    networks:
      - stack

# NGINX config
server {
    listen 80;
    server_name localhost;

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

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

Answer 1

我已经简化了您的设置以使其正常工作。您可以概括到您的特定用例。为了透明起见，我对 Directus 一无所知，所以我只是即兴发挥。

🗎

docker-compose.yml

version: "3"

services:
  nginx:
    container_name: nginx
    image: nginx
    ports:
      - 80:80
    depends_on:
      - directus
    volumes:
      - ./nginx:/etc/nginx/conf.d
    networks:
      - stack

  directus:
    container_name: directus
    image: directus/directus:10.8.3
    volumes:
      - ./extensions:/directus/extensions
    environment:     
      PUBLIC_URL: "http://localhost:8055"
      ADMIN_EMAIL: "[email protected]"
      ADMIN_PASSWORD: "d1r3ctu5"
      KEY: "255d861b-5ea1-5996-9aa3-922530ec40b1"
      SECRET: "6116487b-cda1-52c2-b5b5-c8022c45e263"
    networks:
      - stack

networks:
  stack:

环境变量似乎对于让 Directus 容器顺利运行至关重要。

您不需要公开端口 8055，因为您可能不会从主机访问该端口上的 Directus。

🗎

nginx/nginx.conf

server {
    listen 80;
    server_name localhost;

    location /directus/ {
        proxy_pass http://directus:8055/;
        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 REMOTE-HOST $remote_addr;
        add_header X-Cache $upstream_cache_status;

        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

🚨 我已指定

/directus/

作为 Directus 服务的位置。你可以在这里选择任何东西 除了

/admin/

看起来，大概是因为这会生成某种重定向循环（Directus 已经使用了

/admin/

路径）。对 NGINX 更了解的人可能会在这里提供建议。

前往 http://127.0.0.1/directus/。您将立即被重定向到 http://127.0.0.1/directus/admin/login。