使用Keycloak作为Directus的SSO登录时出现页面未找到问题求助

我将Keycloak用作Directus的单点登录（SSO）服务，二者处于同一Docker网络环境中，可通过Nginx正常访问Directus和Keycloak，但尝试通过Keycloak登录Directus管理面板时，出现「We are sorry... page not found」错误。相关配置如下：

Docker Compose配置 #

version: '3'
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    restart: unless-stopped
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
    networks:
      - directus_keycloak
    depends_on:
      - keycloak
      - directus_service

  postgres:
    container_name: postgres
    image: postgres:13.7-alpine
    volumes:
      - ./db:/var/lib/postgresql/data
    networks:
      - directus_keycloak
    ports:
      - ...
    environment:
      ...

  redis:
    container_name: redis
    image: redis:6
    networks:
      - directus_keycloak

  directus_service:
    container_name: directus_service
    image: directus/directus:latest
    ports:
      - 8055:8055
    volumes:
      - ./uploads:/directus/uploads
      - ./extensions:/directus/extensions
      - ./snapshots:/directus/snapshots
    networks:
      - directus_keycloak
    depends_on:
      - redis
      - postgres
      - keycloak
    env_file:
      - ./.env

  keycloak:
    image: quay.io/keycloak/keycloak:legacy
    environment:
      DB_VENDOR: postgres
      DB_ADDR: 'postgres'
      DB_PORT: '5432'
      DB_DATABASE: '...'
      DB_USER: '...'
      DB_PASSWORD: '...'
      KEYCLOAK_USER: admin
      KEYCLOAK_PASSWORD: ...
      PROXY_ADDRESS_FORWARDING: "true"
      REDIRECT_SOCKET: "proxy-http"
      KEYCLOAK_FRONTEND_URL: http://keycloak.localhost/auth
    depends_on:
      - postgres
    networks:
      - directus_keycloak
    ports:
      - "8080:8080"
networks:
  directus_keycloak:
    driver: bridge

Nginx配置 #

http {
  upstream keycloak_backend {
    least_conn;
    server keycloak:8080;
  }

  upstream directus_backend {
    least_conn;
    server directus_service:8055;
  }

  server {
      listen 80;
      server_name keycloak.localhost;
      proxy_set_header X-Forwarded-For $proxy_protocol_addr; 
      proxy_set_header X-Forwarded-Proto $scheme; 
      proxy_set_header Host $host; 

      location / {
            proxy_pass http://keycloak_backend;
            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-Host $server_name;
      }
  }

  server {
       listen 80;
       server_name api.localhost;
       proxy_set_header X-Forwarded-For $proxy_protocol_addr;
       proxy_set_header X-Forwarded-Proto $scheme; 
       proxy_set_header Host $host; 

       location / {
              proxy_pass http://directus_backend;
              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-Host $server_name;
       }
  }
}

Directus .env配置 #

KEY='..'
SECRET='...'

DB_CLIENT='pg'
DB_HOST='postgres'
DB_PORT='5432'
DB_DATABASE='...'
DB_USER='...'
DB_PASSWORD='...'

CACHE_ENABLED=false
CACHE_STORE='redis'
CACHE_REDIS='redis://redis:6379'

ADMIN_EMAIL='admin@example.com'
ADMIN_PASSWORD='...'

AUTH_PROVIDERS="keycloak"
AUTH_KEYCLOAK_DRIVER="openid"
AUTH_KEYCLOAK_CLIENT_ID="..."
AUTH_KEYCLOAK_CLIENT_SECRET="..."
AUTH_KEYCLOAK_ISSUER_URL="http://keycloak:8080/auth/realms/.../.well-known/openid-configuration"
AUTH_KEYCLOAK_PROFILE_URL="http://keycloak:8080/auth/realms/.../.well-known/openid-configuration"
AUTH_KEYCLOAK_ALLOW_PUBLIC_REGISTRATION="true"
AUTH_KEYCLOAK_IDENTIFIER_KEY="email"
AUTH_KEYCLOAK_SCOPE="openid email"

猜测需要在Keycloak中设置重定向URL，但仅找到重定向URL的验证选项，求解决方案。

1. 配置Keycloak客户端的有效重定向URI #

登录Keycloak管理控制台，进入对应Realm和Directus客户端：

• 在Valid Redirect URIs字段添加Directus的回调地址：http://api.localhost/auth/login/keycloak/callback
• 设置Web Origins为http://api.localhost（测试环境可临时用*，生产环境需严格限定）
• 保存配置后重新测试登录流程

2. 修正Directus的OpenID配置地址 #

当前.env中使用容器内部地址http://keycloak:8080，浏览器无法访问，需替换为外部可访问的Keycloak地址，同时修正PROFILE_URL指向用户信息端点：

AUTH_KEYCLOAK_ISSUER_URL="http://keycloak.localhost/auth/realms/.../.well-known/openid-configuration"
AUTH_KEYCLOAK_PROFILE_URL="http://keycloak.localhost/auth/realms/{你的Realm名}/protocol/openid-connect/userinfo"

3. 优化Nginx代理头配置 #

在Directus的Nginx代理配置中添加端口转发头，帮助Directus识别外部访问端口：

proxy_set_header X-Forwarded-Port $server_port;

4. 确认Keycloak前端URL配置 #

当前Keycloak的KEYCLOAK_FRONTEND_URL已设置为http://keycloak.localhost/auth，该配置正确，确保Keycloak生成的授权地址为外部可访问地址而非内部容器地址。

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