如何将本地运行的Angular项目连接至Docker后端容器？

完全可以脱离Docker在本地运行Angular项目，同时对接Docker容器里的Maven后端、PostgreSQL数据库和Keycloak服务，具体配置步骤如下：

• 确认Docker容器的端口映射
  启动各容器时必须把服务端口映射到Windows宿主机，确保本地能访问：

  • Maven后端：比如执行 docker run -p 8080:8080 your-backend-image，将容器内8080端口映射到宿主机8080端口
  • Keycloak：比如执行 docker run -p 8081:8080 your-keycloak-image，将容器内8080端口映射到宿主机8081端口
  • PostgreSQL：后端会直接通过Docker网络访问它，无需给本地映射端口（如果后端也在Docker里），若需要本地调试数据库可额外映射5432端口

• 后端开启跨域支持
  本地Angular默认跑在4200端口，和后端端口存在跨域问题，需要在Maven后端配置CORS：

  • 以Spring Boot为例，可在Controller类上加 @CrossOrigin(origins = "http://localhost:4200")，或者全局配置CORS过滤器，允许来自http://localhost:4200的请求

• 修改Angular环境配置
  在Angular项目的 src/environments/environment.ts 里，把API地址和Keycloak配置指向宿主机的映射端口：

  export const environment = {
    production: false,
    apiBaseUrl: 'http://localhost:8080/api',
    keycloak: {
      url: 'http://localhost:8081/auth',
      realm: 'your-realm-name',
      clientId: 'your-angular-client-id'
    }
  };
  

• 调整Keycloak客户端设置
  登录Keycloak后台，找到对应Angular客户端：

  • 在"Valid Redirect URIs"添加 http://localhost:4200/*
  • 在"Web Origins"添加 http://localhost:4200
    确保Keycloak允许本地Angular的登录回调和资源请求

• 验证连接流程

  1. 启动Docker内的PostgreSQL、Maven后端、Keycloak容器，检查端口映射状态
  2. 在本地bash进入Angular项目目录，执行 ng serve 启动项目
  3. 访问 http://localhost:4200，测试登录、接口调用等功能，确认能正常对接后端和Keycloak

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