Nginx for Angular not hitting the back-end api

Question

I am using nginx to reverse proxy urls going to back-end server.

Here is my angular docker file:

FROM node as node

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

COPY package.json /usr/src/app/package.json
RUN npm install
COPY . /usr/src/app
ARG env=prod
RUN npm run build -- --prod

FROM nginx
COPY --from=node /usr/src/app/dist/ /usr/share/nginx/html
COPY nginx-custom.conf /etc/nginx/conf.d/default.conf

My nginx config

server {
  listen 80;
  server_name  localhost;
  root /usr/share/nginx/html/sampleangularapp;

   location / {
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  location /api/products {
    proxy_pass http://backend:80;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
  }


}

Docker Compose:

version: '3'
services:
  backend:
    image: backend:v2
    container_name: backend
    build:
      context: BackEndAPIs
    ports:
      - 9000:80
  frontend:
    image: frontend:v2
    container_name: frontend
    build:
      context: sampleangularapp
    ports:
      - 4200:80
    depends_on: 
      - backend

When I press the button that calls the api/products through the code:

   return this.http.get<string[]>('api/products');

Here what I get:

I double checked the api and is working fine:

your api **base_url** is wrong, check your http resources api base path — John Velasquez, Feb 01 '19 at 05:48
@JohnVelasquez The url is right. I've updated the question included the api base path. — dream123, Feb 01 '19 at 05:53
@JohnVelasquez I have also trieds other port 9000 for backend. but still the same issue happening. — dream123, Feb 01 '19 at 22:45

Barath · Accepted Answer · 2019-02-02T05:24:36.810

1

Root Cause: backend url "http://localhost:8080" will not work inside the angular app container as it resolves to container ip.

You need to make sure you use docker networking to link two containers to the same network and connect using its service name or backend app container ip.

you can use docker-compose in this case.

Sample here:

version: '3'
services:
  backend:
    image: backend
    ports:
      - "9000:9000"
  frontend:
    image: frontend
    ports:
      - "4200:80"
    depends_on:
      - backend

I have also answered similar question here: Nginx backend issue

GitHub Reference

edited Feb 02 '19 at 05:24

answered Feb 01 '19 at 11:53

Barath

5,093
1
17
42

I appreciate your help. I have changed the backend port to 9000 using docker compose. I still have the same issue. I guess there is something wrong with what i am doing and dont have idea what is it. – dream123 Feb 01 '19 at 22:44
Please refer this line in nginx conf ```proxy_pass http://localhost:9000/api/products;``` and compare to my config. Kindly follow best practises while naming the services in docker compose file, use back_end or backend not back.end – Barath Feb 02 '19 at 05:07
Same issue :(. Seems there is a problem with nginx not picking the route. – dream123 Feb 02 '19 at 05:22
Update nginx conf with http://backend:9000. Secondly add depends on to front end ensuring frontend should not start before backend starts – Barath Feb 02 '19 at 05:23
Updated as per your comments, still the same problem. – dream123 Feb 02 '19 at 05:30
did you test backend api alone using port 9000 is it working can you confirm ? share your code in github to help – Barath Feb 02 '19 at 05:32
Yes, its working fine. check the picture in the browser network tab. its still pointing to http\\:localhost\api\prodcuts. also added a picture that the api works – dream123 Feb 02 '19 at 05:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187773/discussion-between-barath-and-dream123). – Barath Feb 02 '19 at 05:36
ok problem is here in nginx conf change from proxy_pass http://backend:9000/api/products; to proxy_pass http://backend:9000; – Barath Feb 02 '19 at 05:36

Nginx for Angular not hitting the back-end api

1 Answers1