Dockerizing Angular 2 application fails

Question

I am trying to dockerize my existing Angular 2 application.

My dockerfile at root level:

#  Create a new image from the base nodejs 7 image.
FROM node:7
# Create the target directory in the imahge
RUN mkdir -p /usr/src/app
# Set the created directory as the working directory
WORKDIR /usr/src/app
# Copy the package.json inside the working directory
COPY package.json /usr/src/app
# Install required dependencies
RUN npm install
# Copy the client application source files. You can use .dockerignore to exlcude files. Works just as .gitignore does.
COPY . /usr/src/app
# Open port 4200. This is the port that our development server uses
EXPOSE 4200
# Start the application. This is the same as running ng serve.
CMD ["npm", "start"]

I have a folder called nginx in which I have two files:

Dockerfile:

#  Create a new image from the base nginx image.
FROM nginx
# Overwrite nginx's default configuration file with our own.
COPY default.conf /etc/nginx/conf.d/

default.conf:

server {
    location / {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://client:4200/;
    }
}

And at root level again docker-compose.yml :

version: '2'

services:

  # Build the container using the client Dockerfile
  client:
      build: .

  # Build the container using the nginx Dockerfile
  nginx:
    build: ./nginx
    # Map Nginx port 80 to the local machine's port 80
    ports:
      - "85:80"
    # Link the client container so that Nginx will have access to it
    links:
      - client

Docker-compose build is successful and even docker-compose up is successful, however, when I hit localhost:4200 it says site can not be reached.

What is going wrong here? My application isn't called client, it has different name. I was following (https://dpopescu.me/2017/03/13/running-angular-applications-inside-a-docker-container-part-1/) this tutorial

UPDATE: After running docker-compose psI see following output:

D:\Development\Personal projects\library-owner-frontend>docker-compose ps
            Name                      Command          State               Ports
---------------------------------------------------------------------------------------------
libraryownerfrontend_client_1   npm start              Up      4200/tcp
libraryownerfrontend_nginx_1    nginx -g daemon off;   Up      0.0.0.0:4200->4200/tcp, 80/tcp 

Answer 1

I'm pretty sure that you need to add ports, since EXPOSE only will expose ports so they will be accessible by linked services. Try changing your docker-compose.yml file to:

version: '2'

services:

# Build the container using the client Dockerfile
client:
  build: .
  ports: "4200:4200"
...

If you now run the docker-compose ps command you should see something like:

<name>  <command>   Up      0.0.0.0:4200->4200/tcp

Instead of:

<name>  <command>   Up      0.0.0.0:<RANDOM>->4200/tcp