Search code examples
angulardockerdocker-composeangular-cli

Run ng serve inside the docker container

I have a problem with running ng serve inside the Docker container. I have created regular Angular application with the Dockerfile.

{
  "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"]

After that I have created 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"

When I run docker compose it finished without errors, but the service is not available when I try to navigate in the browser:

enter image description here

Inside the container logs looks good:

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 > wwwroot@0.0.0 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 > wwwroot@0.0.0 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/

And when I ping 127.0.0.1:44464 inside the container everything is ok:

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

I am a little bit confused because ports exposed and mapped and I really don't understand why it doen't work.

I tried to remove SSL certificates from npm start script and add --host 0.0.0.0 and nothing changed.

What did I miss?

Note:

  • My OS: Windows 11
  • Container OS: Linux alpine
Solution

  • I run docker-compose from Visual Studio and if you look at the container ports from VS you will see no port mapping despite the mapping in the docker-compose.yml. Maybe Visual Studio tries "help" as usual. If you remove the network_mode from the file then VS starts posting ports.