0

I'm relatively new docker so I'm pretty sure I'm not doing something right. I have a Angular application, with .Net as the back end api. It works fine when I run it using Visual Studio, however it fails when I run it in docker.

Here is my docker file:

# Stage 1: Build the Angular application
FROM node:12.22.12 AS build_node
WORKDIR /frontend
copy . .
RUN npm cache clean --force
RUN rm -rf node_modules
RUN rm package-lock.json

RUN npm install

EXPOSE 4200
CMD ["npm", "start"]

# This stage is used when running from VS in fast mode (Default for Debug configuration)
FROM mcr.microsoft.com/dotnet/aspnet:8.0-noble AS base
USER $APP_UID
WORKDIR /app

# This stage is used to build the service project
FROM mcr.microsoft.com/dotnet/sdk:8.0-noble AS build
ARG BUILD_CONFIGURATION=development
WORKDIR /src
COPY ["ProjectName.csproj", "."]
RUN dotnet restore "./ProjectName.csproj"
COPY . ./
Expose 5000
Expose 5001

CMD ["dotnet", "watch", "run"]

here is my docker-compose.yml file

version: '3.8'

services:
  angular:
    build:
      context: .
      dockerfile: Dockerfile
      target: build_node
    ports:
      - "4200:4200"

  dotnet:
    build:
      context: .
      dockerfile: Dockerfile
      target: build
    ports:
      - "5000:5000"
      - "5001:5001"
    depends_on:
      - angular

In my terminal when I run: docker-compose up --build there are no errors, and I get the following output:

 [+] Running 2/2
 ✔ Container cbas-angular-1  Recreated                                                                                                                                                                      0.1s
 ✔ Container cbas-dotnet-1   Recreated                                                                                                                                                                      0.1s
Attaching to angular-1, dotnet-1
angular-1  |
angular-1  | > [email protected] start /frontend
angular-1  | > ng serve --aot --proxy-config proxy.config.js --hmr -e=hmr
angular-1  |
dotnet-1   | dotnet watch ⌚ Polling file watcher is enabled
dotnet-1   | dotnet watch 🔥 Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload.
dotnet-1   |   💡 Press "Ctrl + R" to restart.
dotnet-1   | dotnet watch 🔧 Building...
angular-1  | (node:19) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
angular-1  | NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
angular-1  |   The project will still live reload when HMR is enabled,
angular-1  |   but to take advantage of HMR additional application code is required
angular-1  |   (not included in an Angular CLI project by default).
angular-1  |   See https://webpack.js.org/guides/hot-module-replacement
angular-1  |   for information on working with HMR for Webpack.
angular-1  | To disable this warning use "ng set warnings.hmrWarning=false"
angular-1  | ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
angular-1  | [HPM] Proxy created: [ '/api', '/connect' ]  ->  http://localhost:5000/
dotnet-1   |   Determining projects to restore...
dotnet-1   | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-55p7-v223-x366 [/src/CBAS.sln]
dotnet-1   | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-ff4q-64jc-gx98 [/src/CBAS.sln]
dotnet-1   |   All projects are up-to-date for restore.
dotnet-1   | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-55p7-v223-x366
dotnet-1   | /src/CBAS.csproj : warning NU1902: Package 'IdentityServer4' 2.0.0 has a known moderate severity vulnerability, https://github.com/advisories/GHSA-ff4q-64jc-gx98
dotnet-1   |   CBAS -> /src/bin/Debug/net8.0/CBAS.dll
dotnet-1   | dotnet watch 🚀 Started
dotnet-1   | Hosting environment: Development
dotnet-1   | Content root path: /src
dotnet-1   | Now listening on: http://0.0.0.0:5000
dotnet-1   | dotnet watch 🌐 Unable to launch the browser. Navigate to http://0.0.0.0:5000
dotnet-1   | Application started. Press Ctrl+C to shut down.
angular-1  | Date: 2025-02-11T18:54:40.134Z
angular-1  | Hash: bacfc44bc88f3011098c
angular-1  | Time: 21504ms
angular-1  | chunk {account.module} account.module.chunk.js () 228 kB  [rendered]
angular-1  | chunk {animal-info.module} animal-info.module.chunk.js () 75.9 kB  [rendered]
angular-1  | chunk {cogbytes.module} cogbytes.module.chunk.js () 144 kB  [rendered]
angular-1  | chunk {cogbytesEdit.module} cogbytesEdit.module.chunk.js () 109 kB  [rendered]
angular-1  | chunk {cogbytesSearch.module} cogbytesSearch.module.chunk.js () 17.2 kB  [rendered]
angular-1  | chunk {common} common.chunk.js (common) 153 kB  [rendered]
angular-1  | chunk {contact-us.module} contact-us.module.chunk.js () 21.1 kB  [rendered]
angular-1  | chunk {dashboard.module} dashboard.module.chunk.js () 120 kB  [rendered]
angular-1  | chunk {data-extraction.module} data-extraction.module.chunk.js () 23.6 kB  [rendered]
angular-1  | chunk {data-link.module} data-link.module.chunk.js () 20.9 kB  [rendered]
angular-1  | chunk {data-visualization.module} data-visualization.module.chunk.js () 21.4 kB  [rendered]
angular-1  | chunk {download-ds.module} download-ds.module.chunk.js () 21.5 kB  [rendered]
angular-1  | chunk {experiment.module} experiment.module.chunk.js () 899 kB  [rendered]
angular-1  | chunk {forms.module} forms.module.chunk.js () 20.5 kB  [rendered]
angular-1  | chunk {genomics.module} genomics.module.chunk.js () 22.2 kB  [rendered]
angular-1  | chunk {guideline.module} guideline.module.chunk.js () 22.3 kB  [rendered]
angular-1  | chunk {guidelineDataLab.module} guidelineDataLab.module.chunk.js () 22.9 kB  [rendered]
angular-1  | chunk {inline} inline.bundle.js (inline) 31.1 kB [entry] [rendered]
angular-1  | chunk {main} main.bundle.js (main) 4.28 MB [initial] [rendered]
angular-1  | chunk {manage-user.module} manage-user.module.chunk.js () 67.2 kB  [rendered]
angular-1  | chunk {mb-dashboard.module} mb-dashboard.module.chunk.js () 20.9 kB  [rendered]
angular-1  | chunk {polyfills} polyfills.bundle.js (polyfills) 1.3 MB [initial] [rendered]
angular-1  | chunk {profile.module} profile.module.chunk.js () 206 kB  [rendered]
angular-1  | chunk {pubScreen-dashboard.module} pubScreen-dashboard.module.chunk.js () 39 kB  [rendered]
angular-1  | chunk {pubScreen-search.module} pubScreen-search.module.chunk.js () 249 kB  [rendered]
angular-1  | chunk {pubScreen.module} pubScreen.module.chunk.js () 21.4 kB  [rendered]
angular-1  | chunk {pubScreenEdit.module} pubScreenEdit.module.chunk.js () 85.8 kB  [rendered]
angular-1  | chunk {pubScreenQueue.module} pubScreenQueue.module.chunk.js () 71.2 kB  [rendered]
angular-1  | chunk {resources.module} resources.module.chunk.js () 30.7 kB  [rendered]
angular-1  | chunk {scripts} scripts.bundle.js (scripts) 90 kB [initial] [rendered]
angular-1  | chunk {search-experiment.module} search-experiment.module.chunk.js () 21.6 kB  [rendered]
angular-1  | chunk {styles} styles.bundle.js (styles) 523 kB [initial] [rendered]
angular-1  | chunk {taskAnalysis.module} taskAnalysis.module.chunk.js () 51.9 kB  [rendered]
angular-1  | chunk {terms.module} terms.module.chunk.js () 21.3 kB  [rendered]
angular-1  | chunk {upload.module} upload.module.chunk.js () 92.7 kB  [rendered]
angular-1  | chunk {vendor} vendor.bundle.js (vendor) 19.7 MB [initial] [rendered]
angular-1  | chunk {video-tutorial.module} video-tutorial.module.chunk.js () 22 kB  [rendered]
angular-1  |
angular-1  | webpack: Compiled successfully.

When I click on the port number I get: "This page isn't working" This is only for development only. Any idea what I could be doing wrong?

Improve this question
5
  • 1
    Please do not upload images of code/data/errors. Can you edit the question to include the actual text of the Compose output directly in the question? What is the exact URL you're trying to navigate to? Do you see evidence in container logs that a request is or isn't reaching the target container? Commented Feb 11 at 18:56
  • Thank you, I added the output. The url I want to access is 0.0.0.0:4200 Commented Feb 11 at 19:14
  • "When I click on the port number" huh? What does "click on the port number" mean in this context? "I get: 'This page isn't working'" where? In your browser? Have you run your container in interactive mode so you can watch the terminal output? Do you have any sort of logging set up? Commented Feb 11 at 19:31
  • I'm not familiar with angular and it's dev setup, but 0.0.0.0:4200 and localhost:4200 might normally mean the same thing, but not necesarily in a container context. When you do this with for example vite you need to configure the dev server to listen on 0.0.0.0 and not localhost because it binds to all network interfaces inside the container. Your output in the question says localhost:4200 but you comment says 0.0.0.0:4200, so not sure which one it is currently. Commented Feb 11 at 21:40
  • It looks like you might be running the Angular dev server. Like many dev servers, this only listens on "localhost" by default for security reasons, but in Docker each container is its own "localhost" and this makes the server inaccessible from outside the container. Does nodejs app doesn't connect to localhost when running within a docker container help you? (Also consider just running Node directly on your host system for live development.) Commented Feb 11 at 21:41

1 Answer 1

Reset to default
0

each service should have its own dockerfile. This could be contributing to or responsible for the problem. The command "npm start" never runs because that CMD directive is overwritten by the final CMD directive, so it never runs. So although it all builds successfully, both containers in this configuration are running your dotnet application and the angular service has port 4200 exposed but nothing is running on that port in that container.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You can actually target different stages of a multi-stage build. It's normally not used like OP does with multiple builds in the same file... but it will still work. The more conventional thing is to do multiple stages of the same build in one file, so your suggestion is a good one even if it won't solve OPs problem in this case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.