Angular-CLI proxy not working inside docker

Question

I have a docker-compose file with everything I need for my project.

This docker-compose has a nginx server, mysql, phpmyadmin and php. At the top of it, I added recently an angular container. Everything is working fine if I go to localhost:4200, I'm on the angular app, and if I go to localhost:80, I'm on the Laravel backend.

Now I need to make a simple classical request to my backend API. I set up a proxy for angular looking like this :

{
   "/api/*": {
      "target":"http://localhost:80",
      "secure":false,
      "changeOrigin":true,
      "pathRewrite": {"^/api" : ""},
      "logLevel":"debug"
   }
}

This is the config I copied based on this topic. But when I try to make the call, Chrome is saying that http://localhost:4200/api/test isn't existing (error 404) which is normal. On the other hand, the angular server says
HPM] Error occurred while trying to proxy request /test from localhost:4200 to http://localhost:80 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm guessing it comes from docker but I can't figure out how to resolve this.

[EDIT]

version: '2'

services:
  web_server:
    restart: always
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - /projects/laravel/:/var/www/                                               
      - /docker/sites-enabled-nginx:/etc/nginx/sites-enabled/     
      - /docker/nginx.conf:/etc/nginx/nginx.conf
    links:
      - php:php

  php:
    restart: always
    build: /docker/php/
    container_name: "php"
    volumes:
      - /projects/laravel/:/var/www/       
      - db:db

  db:
    restart: always
    image: mysql
    volumes:
      - /Users/Irindul/mysql:/var/lib/mysql     
    ports:
      - "3306:3306"                                   
    container_name: "mysql"
    environment:
      - MYSQL_DATABASE=homestead
      - MYSQL_USER=homestead
      - MYSQL_PASSWORD=secret
      - MYSQL_ROOT_PASSWORD=root

  myadmin:
    restart: always
    image: phpmyadmin/phpmyadmin
    links:
      - db:db
    ports:
      - "8080:80"                                     



  angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular/package.json:/usr/src/app/package.json
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

And here are the Dockerfiles for PHP and Angular :

PHP :

FROM php:7-fpm
RUN docker-php-ext-install pdo pdo_mysql
WORKDIR /var/www

Angular :

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app

#Update pwd
WORKDIR /usr/src/app

#Run npm
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

package.json :

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0 --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Add your package.json also I don't see your running npm install at run-time? You are mounting package.json also at run-time and not doing npm install — Tarun Lalwani
– Tarun Lalwani, Commented Sep 7, 2017 at 7:21
If you look at your Dockerfile, when you do npm install there is no package.json in the container? You didn't copy it at all — Tarun Lalwani
– Tarun Lalwani, Commented Sep 7, 2017 at 7:44

MSLacerda · Accepted Answer · 2018-09-01 19:59:13Z

5

To solve this problem i just created a link in frontend/client service for my api service in docker compose file:

Client

  # Frontend service
  client:
    build: client # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    links: 
      - api # link this service to the api service

API

  # API Service
  api: 
    build: api # specify the directory of the Dockerfile
    ports:
      - "5000:5000" #specify ports forewarding
    links:
      - database # link this service to the database service

After this, i updated my proxy config file in angular/client folder:

{
  "/api/*": {
    "target": "http://api:5000/",
    "secure": false,
    "changeOrigin": true
  }
}

NOTE: the target url is the same in docker composer file: api and dont forget the exposed port, in my case is 5000.

edited Sep 1, 2018 at 19:59

answered Aug 31, 2018 at 19:00

MSLacerda

1301 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vytautas Arminas Over a year ago

links should not be used anymore, as it is deprecated feature. Any other suggestions?

Michael Passarge · Accepted Answer · 2019-12-31 04:08:28Z

I was able to get this working after much debugging.

@MSLacerda solution works but I wanted to add an answer with docker networks, since docker links are deprecated.

docker-compose.yaml

version: '3'

services: 
  client:
    # all other configurations...
    ports:
      - 4200:4200
    networks:
      - backend-net
  api:
    # all other configurations...
    networks:
      - backend-net

networks:
  backend-net:
    driver: bridge

proxy.config.json

{
  "/api/*": {
    "target": "http://api:3000",
    "secure": false,
    "changeOrigin": true
    "pathRewrite": {
      "^/api": ""
    }
  }
}

One note: make sure the target host inside the proxy.config.json is the name of the service you are wanting to connect. (In this case the api service is what you want the client to connect to). Docker will dynamically replace the host with the IP of the container. And don't forget to add the port for the target as well.

Tarun Lalwani · Accepted Answer · 2017-09-07 08:01:43Z

1

Your issue is that your are not copying package.json and npm install doesn't do anything when there is no package.json

Change your angular file to below

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app -p /usr/src/node_modules
ENV NODE_PATH=/usr/src/node_modules

WORKDIR /usr/src/app
COPY package.json ./package.json
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

This will install your node_nodules in $NODE_PATH which is /usr/src/node_modules

Change your angular service in compose as below

 angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

An extra entry for package.json is not needed. Now even though you would overwrite /usr/src/app/node_modules from your local folder mount, but the we have changed the node modules to be looked up at /usr/src/node_modules

answered Sep 7, 2017 at 8:01

Tarun Lalwani

147k11 gold badges217 silver badges278 bronze badges

1 Comment

Irindul Over a year ago

Still not fixing my proxy problem, I got the same error.

Mate Toth · Accepted Answer · 2024-12-05 11:32:48Z

1

If you are using docker compose with a network, change the url from localhost to the container name, e.g if your container is called backend on port 8080, it should be http://backend:8080 instead of http://localhost:8080 because of the network you establish in the compose.

answered Dec 5, 2024 at 11:32

Mate Toth

112 bronze badges

Comments

Anmol Jain · Accepted Answer · 2024-01-18 13:20:14Z

0

Actually, what you want to do is to set up a "Reverse Proxy". And inside the docker container, this is not the right way to do it.

You need to add proxy inside the "default.conf" file inside nginx folder inside your container.

Copy default.conf file from the container to your local machine using this command

docker cp [your container id]:/etc/nginx/conf.d/default.conf [your local machine destination address]

Edit default.conf file and add the proxy like this :

location /api{
   proxy_pass http://newURL;
}

Copy this modified file back to your docker container using this command

docker cp [your local machine destination address] [your container id]:/etc/nginx/conf.d/default.conf

Restart the docker container.

edited Jan 18, 2024 at 13:20

answered Nov 21, 2022 at 21:22

Anmol Jain

4115 silver badges15 bronze badges

Comments

Irindul · Accepted Answer · 2017-09-07 11:21:24Z

-14

I fixed the problem by removing Angular from the docker and running it manually with a simple npm start.

answered Sep 7, 2017 at 11:21

Irindul

4161 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular-CLI proxy not working inside docker

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related