Docker部署Angular17+Symfony6：容器运行但4200端口无法访问

问题现象 #

Angular容器显示运行正常，但浏览器访问localhost:4200时出现err_connection_reset错误，无法打开应用。

项目架构 #

frontAndBackProjectsFolder
├── project_client
│   └── Dockerfile
├── project_server
│   └── Dockerfile
└── compose.yaml

配置文件 #

compose.yaml #

services:

  apache:
    container_name: project_server
    build: ./project_server/
    environment:
      APP_ENV: ${APP_ENV:-dev}
      APP_SECRET: ${APP_SECRET:-xxxxxxxxxxx}
      VERSION: ${VERSION:-1.0.0}
    ports:
      - "8000:80"
    volumes:
      - ./project_server/docker-resources/vhosts:/etc/apache2/sites-enabled
      - ./project_server/:/var/www/html/project
    restart: always
    networks:
      - dev
    depends_on:
      - postgres

  postgres:
    container_name: project_db
    image: postgres:${POSTGRES_VERSION:-16}-alpine
    environment:
      POSTGRES_DB: ${POSTGRES_DB:-xxxx}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-xxxx}
      POSTGRES_USER: ${POSTGRES_USER:-xxxxx}
      POSTGRES_HOST: ${POSTGRES_HOST:-172.17.0.1}
    volumes:
      - database_data:/var/lib/postgresql/data:rw
    ports:
      - "5432:5432"

  angular:
    container_name: project_client
    build: ./project_client/
    restart: on-failure
    command: "npm start"
    depends_on:
      - apache
    networks:
      - dev
    volumes:
      - ../project_client/:/var/www/html/project_client/
    ports:
      - "4200:4200"

networks:
  dev:

volumes:
  database_data:

Angular Dockerfile #

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json package-lock.json /usr/src/app/

RUN npm install -g @angular/cli \
    npm install

COPY . /usr/src/app

RUN npm run build

CMD ["ng", "serve", "--open", "--host", "0.0.0.0", "--port 4200"]

Symfony Dockerfile #

FROM ubuntu:22.04 as project_base

WORKDIR /var/www/html/project/

RUN apt update

RUN apt -y dist-upgrade

RUN mkdir -p /data
RUN chown -R www-data:www-data /data

RUN mkdir -p /data/docker-files
RUN chown -R www-data:www-data /data/docker-files

COPY ./docker-resources/install-requirements.sh /var/www/html/project/docker-resources/
RUN /bin/bash /var/www/html/project/docker-resources/install-requirements.sh

COPY ./docker-resources/apache2-foreground /usr/local/bin/apache2-foreground
RUN chmod +x /usr/local/bin/apache2-foreground

COPY ./docker-resources/docker-php-entrypoint /usr/local/bin/docker-php-entrypoint
RUN chmod +x /usr/local/bin/docker-php-entrypoint

COPY ./docker-resources/vhosts/project.conf /etc/apache2/sites-available/000-default.conf

COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
COPY ./composer.* /var/www/html/project/

RUN composer install --no-scripts

COPY --chown=www-data:www-data ./ /var/www/html/project/

RUN cd /var/www/html/project && \
    composer install --no-scripts --no-cache

EXPOSE 443 80

ENTRYPOINT ["docker-php-entrypoint"]
CMD ["apache2-foreground"]

RUN echo "ServerName localhost" >> /etc/apache2/apache2.conf
RUN service apache2 restart

FROM project_base as project_dev
COPY ./docker-resources/vhosts/project.conf /etc/apache2/sites-available/000-default.conf

RUN /bin/bash /var/www/html/project/docker-resources/install-requirements-dev.sh

补充信息 #

• Angular容器运行状态正常
• compose.yaml中包含NGINX配置

排查解决方案 #

1. 端口冲突检查 #

执行命令检查本地4200端口是否被其他进程占用：

# Linux/macOS
lsof -i :4200

# Windows
netstat -ano | findstr :4200

如果有占用，杀掉对应进程或修改compose.yaml中的端口映射（比如改成4201:4200）。

2. 启动命令冲突修复 #

compose.yaml中指定的command: "npm start"优先级高于Dockerfile的CMD，需确保npm start对应的启动命令包含--host 0.0.0.0：
查看project_client/package.json的scripts字段：

"scripts": {
  "start": "ng serve --host 0.0.0.0 --port 4200"
}

若未配置，修改后重新构建镜像；或直接删除compose.yaml中的command: "npm start"，让容器使用Dockerfile的CMD启动。

3. 路径映射修正 #

compose.yaml中Angular的卷映射路径与Dockerfile工作目录不匹配，修改为：

volumes:
  - ./project_client/:/usr/src/app/

（compose.yaml位于frontAndBackProjectsFolder下，./project_client/为正确相对路径，原配置的../会指向父目录，导致代码挂载错误）

4. 验证容器内服务状态 #

进入Angular容器检查服务是否真的启动：

docker exec -it project_client bash
# 检查端口监听
netstat -tulpn | grep 4200
# 手动执行启动命令查看报错
npm run start

若netstat未查到4200端口监听，说明服务未启动，排查npm依赖安装、Angular项目编译是否有报错。

5. 防火墙/安全软件排查 #

临时关闭本地防火墙、杀毒软件，测试是否能正常访问。

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