Nginx reverse proxy with docker-compose doesn't forward requests

Question

I've been creating a micro-frontend project and the glue (nginx) isn't working as expected.

My projects are structured as such:

/app1
  Dockerfile
/app2
  Dockerfile
/nginx
  Dockerfile
  nginx.conf
/shell
  Dockerfile
docker-compose.local.yaml

The project Dockerfiles look like the following:

# ...

FROM nginx:alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

COPY --from=builder /app/dist/shell /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

The nginx Dockerfile:

FROM nginx:alpine

COPY ./nginx.conf /etc/nginx/conf.d/nginx.conf

The nginx.conf file:

upstream shell {
  server localhost:3001;
}

upstream app1 {
  server localhost:3002;
}

upstream app2 {
  server localhost:3003;
}

log_format compact '$request $status - $bytes_sent';
access_log off;

server {
  listen 80;
  listen [::]:80;

  access_log /var/log/nginx/access.log compact;
  ssi on;

  location = / {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass  http://shell;
  }

  location /app1/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass  http://app1/;
  }

  location /app2/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass  http://app2/;
  }
}

Finally the docker-compose.local.yaml file:

version: '3.8'

services:
  nginx:
    image: localhost:5000/nginx:alpine
    build: ./nginx
    ports:
      - "3000:80"
    depends_on:
      - shell
      - app1
      - app2

  shell:
    image: localhost:5000/mf-angular-shell
    build: ./shell
    ports:
      - "3001:80"

  app1:
    image: localhost:5000/mf-angular-app1
    build: ./app1
    ports:
      - "3002:80"

  app2:
    image: localhost:5000/mf-angular-app2
    build: ./app2
    ports:
      - "3003:80"

The application is then launched via:

docker-compose -f docker-compose.local.yaml up -d

After launching I can navigate to the individual apps without issue:

shell http://localhost:3001/

app1 http://localhost:3002/

app2 http://localhost:3003/

But when I navigate to the root http://localhost:3000/ I just see the "Welcome to nginx!" message.

When navigating to the individual paths such as http://localhost:3000/app1/ I see the following error in the terminal from the proxy:

"/usr/share/nginx/html/app1" failed (2: No such file or directory)

And a 404 error in the browser.

Is the problem due to my overwriting the wrong file? /etc/nginx/conf.d/nginx.conf or is it a problem with the configuration itself? Something else entirely?

Answer 1

The primary issue is that localhost:<port> is not accessible between containers. The containers should reference the service names defined in docker-compose.

nginx.conf becomes:

upstream shell {
  server shell:3001;
}

upstream app1 {
  server app1:3002;
}

upstream app2 {
  server app2:3003;
}
...