Angular docker cannot reach backend service container

Question

I have an angular SPA and a backend service, both are deployed via docker containers. I can't seem to get the angular app to connect to the backend service.

Using Nginx in the angular container, with the following configuration

server {

  root /usr/share/nginx/html/;

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

  location http://backend-service {
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_pass http://backend-service:8080/;
  }
}

And the environment file for the angular app

export const environment = {
  api: 'http://backend-service',
};

The containers are linked and I can ping the backend container from within the Nginx/angular container by its service name, I think I've got something wrong in the nginx config file...

Any insight?

Does NGINX successfully return an error response? like 503 for example... just to verify NGINX is running and isn't the problem — james
– james, Commented May 31, 2020 at 17:45
Hitting a 404 on any endpoint which should be resolving on the backend service — Chris
– Chris, Commented Jun 1, 2020 at 8:11

Chris · Accepted Answer · 2020-06-01 08:30:42Z

1

The trick in the end was to remove the docker reference from the environment file

export const environment = {
  api: '/api',
};

Then adjust the default.conf file to match:

server {
  listen 80;
  server_name terrible-spa;
  root /usr/share/nginx/html/;
  index index.html index.html;

  location /api {
    proxy_pass http://backend-service:8080/api;
  }

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

This will correctly forward all calls /api to the backend-service container.

answered Jun 1, 2020 at 8:30

Chris

3,6777 gold badges51 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

Angular docker cannot reach backend service container

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related