如何使用docker-compose运行Angular？

Question

I'm trying to create my own MEAN solution from scratch and I want to use docker-compose to run it. I've succeeded in making the Node server work, but when I try to run the Angular client using docker, that doesn't work.

Just using docker I run the following commands:

docker build -t ng-client .

docker run -p 4200:4200 ng-client

And from the output, it appears to be working, but when I go to http://localhost:4200/ I get the message that localhost isn't working.

I have the same issue when I use docker-compose by using this command:

docker-compose up

My Dockerfile looks like this:

# based on https://mherman.org/blog/dockerizing-an-angular-app/
# base image
FROM node:8.9.3

# 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
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

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

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

# add app
COPY . /usr/src/app

EXPOSE 4200

# start app
CMD npm start

And docker-compose.yml looks like this:

version: '3'
services:
  server:
    build: ./server
    ports:
    - '3000:3000'
  # db:
  #   build: mongo:4.1
  #   ports:
  #   - '27017:27017'
  client:
    build: ./client
    ports:
    - '4200:4200'

The full code is at https://github.com/FrisoPrograms/MEANpress/tree/feature/initial-docker

Answer 1

Try:

ng serve --host 0.0.0.0

Have the angular serve process listen to requests on 0.0.0.0 instead of localhost. The reason to use --host 0.0.0.0 is the default of localhost will not work as the server by default binds to localhost and in this case, server needs to listen to all the requests, not just ones coming to localhost.