Docker部署Angular至共享服务器 域名无法访问问题排查

你的配置存在多处架构逻辑和配置匹配错误，按影响优先级排序如下：

• 核心架构错误：重复部署Nginx，对外服务的容器未加载站点配置 #

  当前docker-compose.yaml定义了两个完全独立的服务，逻辑完全冲突：
  1. web服务：通过Dockerfile多阶段构建，已经打包了Angular构建产物、内置Nginx服务、写入了nginx-custom.conf站点配置，但这个服务没有映射任何宿主机端口、未加入自定义app-network、也没有挂载SSL证书，完全不具备对外提供服务的能力，启动后外部无法访问。
  2. nginx-web服务：使用纯净的nginx:alpine官方镜像，占用了宿主机80、443端口对外响应请求，但这个容器里没有Angular静态文件、没有你的nginx-custom.conf站点配置。你访问服务器IP看到的正常Nginx页面，是这个纯净Nginx返回的默认欢迎页，根本不是你的Angular项目。
     这是域名无法访问的核心原因：对外提供服务的Nginx根本没有test-angular.eu对应的站点配置，自然无法处理域名请求。

• 证书与配置挂载不匹配 #

  就算修正架构问题，当前挂载逻辑也会导致Nginx启动失败：
  1. nginx-custom.conf配置了443端口SSL监听，指定证书路径为/etc/ssl/domain.tld.chained.crt和/etc/ssl/domain.tld.key，但SSL证书只挂载到了nginx-web容器的对应路径，你自行构建的web服务容器内没有这两个证书文件，Nginx启动时会因找不到证书直接退出。
  2. 需要确认挂载的SSL证书确实是签发test-angular.eu的有效证书，文件名和配置完全一致，否则即使路径正确也无法正常处理HTTPS请求。

• 网络隔离问题 #

  自定义的app-network桥接网络只有nginx-web服务加入，web服务默认使用compose创建的default网络，两个容器网络完全隔离，就算要让nginx-web反向代理到web服务也无法连通。

• 其他配置瑕疵 #

  1. Dockerfile第二阶段的Nginx镜像只声明EXPOSE 80，但配置同时监听443端口，不符合容器端口暴露规范。
  2. 使用的node:16.0-alpine版本过旧，npm install未加依赖容错参数，部分新版Angular依赖可能安装失败导致构建异常。
  3. 未配置HTTP到HTTPS的强制跳转，80端口请求默认走HTTP协议存在安全隐患。

方案一：单容器部署（推荐，架构最简单） #

直接使用已经构建好的带Nginx的Angular镜像，删除冗余的独立Nginx服务，修改docker-compose.yaml如下：

version: "3.3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    image: test/angular
    container_name: angular-web
    restart: always
    ports:
      - 80:80
      - 443:443
    volumes:
      # 挂载Nginx配置，修改配置无需重新构建镜像
      - ./docker-configs/nginx/conf.d/nginx-custom.conf:/etc/nginx/conf.d/default.conf
      # 挂载SSL证书，避免证书被打包进镜像
      - ./docker-configs/nginx/ssl/:/etc/ssl/
networks:
  default:
    driver: bridge

同时修改Dockerfile最后一行，补充443端口暴露：

# Expose port 80 and 443
EXPOSE 80 443

方案二：Nginx与业务服务分离部署（适合后续扩展多服务场景） #

如果需要保留独立Nginx做统一反向代理，做以下调整：

1. 修改Dockerfile，第二阶段不使用Nginx镜像，仅完成Angular构建，将构建产物通过命名卷共享给Nginx容器，或直接拷贝到宿主机挂载目录。
2. 将nginx-custom.conf放到宿主机./docker-configs/nginx/conf.d目录下，确保nginx-web容器能加载到该站点配置。
3. 给web服务加入app-network，在Nginx配置中添加反向代理规则将请求转发到web服务；如果是静态文件托管，直接把构建产物挂载到Nginx的web根目录即可。
4. 确认nginx-web容器内的证书路径和配置完全匹配。

配置修改重启服务后如果仍无法访问域名，先在本地执行ping test-angular.eu确认域名A记录已正确指向当前服务器公网IP，共享服务器还要确认服务商没有额外拦截80、443端口的域名访问请求。

内容的提问来源于stack exchange，提问作者D.Joe