CODEWITHSUNDEEP
angulardockernginxnginx-location
dream123
dream123

Reputation: 129

Nginx for Angular not hitting the back-end api

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:

enter image description here

I double checked the api and is working fine:

enter image description here

Upvotes: 2

Views: 2749

Answers (1)

Barath
Barath

Reputation: 5283

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

Upvotes: 1

Related Questions