2

I have an Angular project which I built an image, it runs in local, in other words, I can launch it with npm start, and see my app on localhost:4200.
But when I build it, I can't see the project in the browser on the same url. It's just my browser telling me it's unable to connect. I also used Postman same error.

Dockerfile :

FROM node:latest

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app
EXPOSE 4200
CMD [ "npm", "start" ]

The command

docker build -t test-front .
...
docker run -it -p 4200:4200 test-front

It builds the image and run it well, but I can't access it on the browser.

I used the answer to this question to remake my Dockerfile: Cannot find module for a node js app running in a docker compose environment

What I did:


I did a `docker exec -it NAME_OF_THE_CONTAINER /bin/bash` to get inside the container, I then retried `npm start` inside the container. Since the port 4200 was in use, it asked me to use another port: 
root@a66d5cff3e64:/usr/src/app# npm start

> xxx@0.0.0 start
> ng serve

? Port 4200 is already in use.
Would you like to use a different port? Yes
✔ Browser application bundle generation complete.

...

** Angular Live Development Server is listening on localhost:43225, open your browser on http://localhost:43225/ **

The project was launching correctly in the container, no error message. I think, the container doesn't expose the port correctly.

Checking port

I used the command:

user@user:~/front$ docker port <container_name>
4200/tcp -> 0.0.0.0:4200
4200/tcp -> :::4200

This is what I have.

Small detail

I'd like to precise, that using node:boron in Dockerfile, made the docker run break. It didn't worked when I used docker run command.

With the message:

> xxxxxx@0.0.0 start /usr/src/app
> ng serve

/usr/src/app/node_modules/@angular/cli/bin/ng:26
  );
  ^

SyntaxError: Unexpected token )
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.runMain (module.js:611:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:160:9)

npm ERR! Linux 5.11.0-22-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.17.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! xxxx@0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xxxx@0.0.0 start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the xxx package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs xxx
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls xxx
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /usr/src/app/npm-debug.log

I've changed my last line to CMD [ "npm", "run", "ng", "serve", "-host", "0.0.0.0" ].

I can build the image, but when I run it, I get:

> t-maj-voltron-front@0.0.0 ng
> ng "serve" "0.0.0.0"

Project '0.0.0.0' does not exist.
npm notice 
npm notice New minor version of npm available! 7.15.1 -> 7.19.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.19.0
npm notice Run npm install -g npm@7.19.0 to update!
npm notice

a working Dockerfile:

# base image
FROM node:12.14

# 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
RUN npm install -g @angular/cli@7.3.9

# add app
COPY . /app
EXPOSE 4200
# start app
CMD ng serve --host 0.0.0.0
Hamza Ince
  • 604
  • 17
  • 46

1 Answers1

3

I believe you're missing the port forwarding between the exposed port and your local host. You can portforward via the -p or --expose flag and the <localport>:<containerport>

In your case:

docker run -it -p 4200:4200 test-front

Will forward traffic from localhost:4200 into your container

EDIT

I did some more reading and it looks like there's an additional step when working with angular in docker.

try editing your npm start command to ng serve --host 0.0.0.0. As explained very thoroughly by Juan adding the --host flag will "listen to all the interfaces from the container"

Totem
  • 1,030
  • 7
  • 16