在 docker 容器内运行 ngserve

Question

我在 Docker 容器内运行

ng serve

时遇到问题。 我已经使用 Dockerfile 创建了常规 Angular 应用程序。

{
  "name": "wwwroot",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "run-script-os",
    "start:windows": "ng serve --port 44464 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\crankshaft.pem --ssl-key %APPDATA%\\ASP.NET\\https\\crankshaft.key",
    "start:default": "ng serve --port 44464 --ssl --ssl-cert $HOME/.aspnet/https/crankshaft.pem --ssl-key $HOME/.aspnet/https/crankshaft.key",
    "build": "ng build",
    "build:ssr": "ng run Crankshaft:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/router": "^17.2.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3",
    "jest-editor-support": "*"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.1",
    "@angular/cli": "^17.2.1",
    "@angular/compiler-cli": "^17.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
  }
}

FROM node:20.13.1-alpine
EXPOSE 44464
WORKDIR /usr/src/app
COPY . .
RUN npm install
COPY package.json .
CMD ["npm", "start"]

之后我创建了

docker-compose.yml

:

version: '3.4'

services:
  api:
    image: ${DOCKER_REGISTRY-}crankshaft-api
    build:
      context: .
      dockerfile: Crankshaft/Dockerfile
  wwwroot:
    image: ${DOCKER_REGISTRY-}crankshaft-wwwroot
    build:
      context: wwwroot/
    labels:
      com.microsoft.visual-studio.project-name: ""
    depends_on:
      - api
    network_mode: host

docker-compose.override.yml

：

version: '3.4'

services:
  api:
    environment:
      - ASPNETCORE_ENVIRONMENT=Development
      - ASPNETCORE_URLS=https://+:443;http://+:80
    ports:
      - "80"
      - "443"
    volumes:
      - ${APPDATA}/Microsoft/UserSecrets:/root/.microsoft/usersecrets:ro
      - ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro
  wwwroot:
    volumes:
      - ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro
      - ./wwwroot/src:/usr/src/app/src
    ports:
      - "44464:44464"

当我运行 docker compose 时，它完成且没有错误，但当我尝试在浏览器中导航时，该服务不可用：

容器内的日志看起来不错：

2024-05-14 22:37:51 - Building...
2024-05-14 22:37:51 
2024-05-14 22:37:49 
2024-05-14 22:37:49 > [email protected] start
2024-05-14 22:37:49 > run-script-os
2024-05-14 22:37:49 
2024-05-14 22:37:50 
2024-05-14 22:37:50 > [email protected] start:default
2024-05-14 22:37:50 > ng serve --port 44464 --ssl --ssl-cert $HOME/.aspnet/https/crankshaft.pem --ssl-key $HOME/.aspnet/https/crankshaft.key
2024-05-14 22:37:50 
2024-05-14 22:37:54 Initial chunk files | Names         |  Raw size
2024-05-14 22:37:54 polyfills.js        | polyfills     |  85.81 kB | 
2024-05-14 22:37:54 main.js             | main          |  21.97 kB | 
2024-05-14 22:37:54 styles.css          | styles        |  95 bytes | 
2024-05-14 22:37:54 
2024-05-14 22:37:54                     | Initial total | 107.88 kB
2024-05-14 22:37:54 
2024-05-14 22:37:54 Application bundle generation complete. [2.725 seconds]
2024-05-14 22:37:54 
2024-05-14 22:37:54 Watch mode enabled. Watching for file changes...
2024-05-14 22:37:54 Re-optimizing dependencies because vite config has changed
2024-05-14 22:37:54   ➜  Local:   https://localhost:44464/

当我在容器内 ping 127.0.0.1:44464 时，一切正常：

PS C:\Users\petro> docker exec -it 44cef26b77c9943da8c168451b69b2fd8b50fa2b8f5f42949070d3c415ab37a9 ping 127.0.0.1:44464
PING 127.0.0.1:44464 (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: seq=0 ttl=64 time=0.038 ms
64 bytes from 127.0.0.1: seq=1 ttl=64 time=0.040 ms
64 bytes from 127.0.0.1: seq=2 ttl=64 time=0.040 ms
64 bytes from 127.0.0.1: seq=3 ttl=64 time=0.038 ms
64 bytes from 127.0.0.1: seq=4 ttl=64 time=0.038 ms
64 bytes from 127.0.0.1: seq=5 ttl=64 time=0.041 ms

我有点困惑，因为端口暴露和映射，我真的不明白为什么它不起作用。

我尝试从 npm start 脚本中删除 SSL 证书并添加

--host 0.0.0.0

，但没有任何改变。

我错过了什么？

注：

• 我的操作系统：Windows 11
• 容器操作系统：Linux alpine

Answer 1

您需要绑定到 0.0.0.0 才能从外部访问该应用程序

localhost

。在容器中，容器本身是

localhost

，因此如果不绑定到 0.0.0.0，应用程序就无法从容器外部访问。

将

--host 0.0.0.0

选项添加到 package.json 文件中的

ng serve

命令中，如下所示

  "scripts": {
    "ng": "ng",
    "start": "run-script-os",
    "start:windows": "ng serve --host 0.0.0.0 --port 44464 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\crankshaft.pem --ssl-key %APPDATA%\\ASP.NET\\https\\crankshaft.key",
    "start:default": "ng serve --host 0.0.0.0 --port 44464 --ssl --ssl-cert $HOME/.aspnet/https/crankshaft.pem --ssl-key $HOME/.aspnet/https/crankshaft.key",
    "build": "ng build",
    "build:ssr": "ng run Crankshaft:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

它应该可以工作。