1

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.

enter image description here

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 
1
  • Try running docker-compose ps and show the output. This command should display the port mapping between the host and the container. Commented Feb 7, 2018 at 17:37

1 Answer 1

2

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
Sign up to request clarification or add additional context in comments.

1 Comment

Hi! First of all thanks for your answer. I tried changing it and then build and up. Problem persists, but this time giving me This page isn’t working error. I have updated my question with the output of docker-compose ps

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.