Nginx, Docker and Docker Compose

Question

I'm trying to set up a microservices architecture for a personal blog.

The idea is to have an NGINX container serving up a static gatsby site, and to redirect to other services. For example, I'd like to have a react app at /todos, and an api for that todo app at /todos_api.

My current folder structure is like this:

• docker-compose.yml
• gatsby_blog
  • (contains a build folder)
  • nginx
    • default.conf (this is my main nginx entry)
• portfolio
  • todos
    • todo_client
      • nginx
        • default.conf (this is just for serving the react app)
    • todo_api

My docker-compose file looks like this:

version: "3"

services:
  gatsby:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./gatsby_blog
    ports:
      - "80:80"
  todoclient:
    build:
      dockerfile: Dockerfile
      context: ./portfolio/todos/todo_client

My main Gatsby nginx file looks like this:

upstream todoclient {
  server todoclient:3000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }

  location /todos {
      rewrite /todos/(.*) /$1 break;
      proxy_pass http://todoclient;
  }
}

and my React nginx config is like this:

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}

The issue I'm pretty certain is with my nginx configs. When I go to localhost I'm met with the gatsby app, but if I go to /todos I get an nginx error. I can see that the request is passed on to the todoclient container correctly, but the error returned is:

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

If anyone can see where I'm going wrong with the nginx configs I'd really appreciate it. I can post my Dockerfiles too if needed. Thanks

EDIT

I've managed to get the proxy working now, but the issue is that the todos app cant find its static files. They're in the correct place in the container, and the container works in isolation, so the issue is to do with docker-compose and the nginx proxying.

Answer 1

Done it for angular. The nginx file should replace the file in /etc/nginx/nginx.conf. And place the todos folder - assuming that has the static pages - in /usr/share/nginx/html. You can try one service at a time

http {


    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        include /etc/nginx/mime.types;


        location /todos {
            alias /usr/share/nginx/html/todos/;
            absolute_redirect off;
            rewrite ^(.+)/todos/+$ $1 permanent;
            rewrite ^(.+)/todos/index.html$ $1 permanent;    


            try_files $uri$args $uri$args/ $uri/ /todos/index.html;

        }

    }
}