Access Angular application in a Docker container

Question

I'm trying to run an Angular app inside a docker container but i can't access it when I go to http://localhost:4200. When I run the application I can see the usual angular logs but I can't access it from my browser.

I tried to expose port 4200, specify the port when running the app "docker run -p 4200:4200 angular-example" and specify the host and the port in the ng serve command but none of these manipulations worked.

My Dockerfile

# base image
FROM node:12.2.0

# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install node-sass
RUN npm install
RUN npm install -g @angular/[email protected]

# add app
COPY . /app

EXPOSE 4200

# start app
CMD ng serve --host 0.0.0.0 --port 4200

The command I used to run the image

docker run -p 4200:4200  angular-example

and the logs that I get when I run the application

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **

Date: 2019-10-13T04:08:51.354Z
Hash: 518bf687971012e084e7
Time: 89920ms
chunk {main} main.js, main.js.map (main) 304 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 178 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.82 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

I get a ERR_CONNECTION_REFUSED when I launch the application instead of reaching the actual application.

will suggest to format cmd like CMD ["ng","serve","--host", "0.0.0.0","--port","4200","--disableHostCheck"] also do docker exec -it <container_id> bash then curl localhost:4200 to check if it responding on localhost — Adiii
Are you running Docker Toolbox (often on Windows 7)? Or do you have some sort of firewalling setup that might be blocking the port? The docker run -p command matches the startup logs of the server and it is listening on 0.0.0.0, which are both good. — David Maze
@DavidMaze I'm using Docker Quickstart on windows 10. I don't recall putting in place any firewall on my machine — Jude F
@Adiii I am able to see the response when I make a curl request but I can't access it using my browser — Jude F

Neda Peyrone Neda Peyrone · Accepted Answer · 2019-10-13T06:45:51

I recently worked on an Angular project, which deploys it on Docker container. This is an example of Dockerfile.

Docker command:

docker build -t your-app-name .
docker run -itd -p 4200:80 --name=your-app-name your-app-name

In Dockerfile:

### STAGE 1: Build ###

FROM node:10-alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer

### STAGE 2: Setup ###

FROM nginx:1.17.0-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist/your-app-name /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

Access Angular application in a Docker container

2 Answers