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
Hitting a 404 on any endpoint which should be resolving on the backend service — Chris Turner

Chris Turner Chris Turner · Accepted Answer · 2020-06-01T08:30:42

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.

Angular docker cannot reach backend service container

1 Answers