Docker部署Keycloak：前后端认证地址冲突问题求助

Docker部署Keycloak、Angular前端、Spring后端，后端通过容器内keycloak主机名能正常完成认证，但前端用localhost:8083访问Keycloak时出现认证异常——若将Keycloak主机名改为localhost，后端容器又无法解析连接Keycloak。

解决方案1：修改本地hosts实现统一主机名解析 #

这是开发环境最简便的方案，让本地和容器内部共用同一个Keycloak主机名：

• 修改本地hosts文件：
  在/etc/hosts（Linux/macOS）或C:\Windows\System32\drivers\etc\hosts（Windows）中添加一行：

  127.0.0.1 keycloak
  

• 更新Keycloak的docker-compose配置：
  调整环境变量，让对外暴露的端口匹配本地映射的8083：

  keycloak:
      image: quay.io/keycloak/keycloak:25.0.4
      command: start
      environment:
          KC_HOSTNAME: keycloak
          KC_HOSTNAME_PORT: 8083  # 改为本地映射的端口
          KC_HTTP_ENABLED: true
          KC_HOSTNAME_STRICT_HTTPS: false
          KC_HEALTH_ENABLED: true
          KEYCLOAK_ADMIN: ${KEYCLOAK_ADMIN_USER}
          KEYCLOAK_ADMIN_PASSWORD: ${KEYCLOAK_ADMIN_PWD}
          KC_DB: postgres
          KC_DB_URL: ${KEYCLOAK_DB_URL}
          KC_DB_USERNAME: ${KEYCLOAK_DB_USERNAME}
          KC_DB_PASSWORD: ${KEYCLOAK_DB_PWD}
          KC_HOSTNAME_STRICT: false
          KC_PROXY: edge
          KC_HOSTNAME_BACKCHANNEL_DYNAMIC: true
      ports:
          - 8083:8080
      restart: always
      networks:
          - net
  

• 更新Angular配置：
  把Keycloak的URL改为统一主机名：

  config: {
      url: 'http://keycloak:8083',
      realm: "<realm-name>",
      clientId: "<client-id>"
  }
  

• 后端配置保持不变：spring.security.oauth2.resourceserver.jwt.issuer-uri=http://keycloak:8080/realms/<realm-name>，容器内部网络可直接访问Keycloak的8080端口。

解决方案2：配置Keycloak前后端分离URL #

利用Keycloak的KC_HOSTNAME_FRONTEND_URL参数，分别指定前端访问的外部URL和内部服务URL，无需修改hosts：

• 更新Keycloak的docker-compose配置：
  添加KC_HOSTNAME_FRONTEND_URL环境变量，指定前端可访问的外部地址：

  keycloak:
      image: quay.io/keycloak/keycloak:25.0.4
      command: start
      environment:
          KC_HOSTNAME: keycloak  # 内部容器识别的主机名
          KC_HOSTNAME_PORT: 8080  # 内部端口
          KC_HOSTNAME_FRONTEND_URL: http://localhost:8083  # 前端访问的外部URL
          KC_HTTP_ENABLED: true
          KC_HOSTNAME_STRICT_HTTPS: false
          KC_HEALTH_ENABLED: true
          KEYCLOAK_ADMIN: ${KEYCLOAK_ADMIN_USER}
          KEYCLOAK_ADMIN_PASSWORD: ${KEYCLOAK_ADMIN_PWD}
          KC_DB: postgres
          KC_DB_URL: ${KEYCLOAK_DB_URL}
          KC_DB_USERNAME: ${KEYCLOAK_DB_USERNAME}
          KC_DB_PASSWORD: ${KEYCLOAK_DB_PWD}
          KC_HOSTNAME_STRICT: false
          KC_PROXY: edge
          KC_HOSTNAME_BACKCHANNEL_DYNAMIC: true
      ports:
          - 8083:8080
      restart: always
      networks:
          - net
  

• Angular和后端配置均保持不变：前端继续用http://localhost:8083访问，后端依然通过keycloak:8080连接Keycloak。

解决方案3：使用Nginx反向代理（适合生产/多服务场景） #

通过Nginx统一所有服务的访问入口，让前后端通过同一域名访问：

1. 在docker-compose中添加Nginx服务：

   nginx:
       image: nginx:alpine
       container_name: nginx-proxy
       ports:
           - 80:80
       volumes:
           - ./nginx.conf:/etc/nginx/nginx.conf
       depends_on:
           - frontend
           - keycloak
       networks:
           - net
   

2. 创建nginx.conf配置文件：

   events {}
   http {
       server {
           listen 80;
   
           # 前端路由
           location / {
               proxy_pass http://frontend;
           }
   
           # Keycloak路由
           location /auth/ {
               proxy_pass http://keycloak:8080/;
               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;
           }
       }
   }
   

3. 更新Angular配置：

   config: {
       url: 'http://localhost/auth',
       realm: "<realm-name>",
       clientId: "<client-id>"
   }
   

4. 更新后端配置：

   spring.security.oauth2.resourceserver.jwt.issuer-uri=http://keycloak:8080/realms/<realm-name>
   

5. 调整Keycloak的环境变量适配反向代理：

   KC_PROXY: edge
   KC_HOSTNAME: localhost
   KC_HOSTNAME_PATH: /auth
   

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