NGINX docker-compose - Host not found in upstream nuxt:3000

Question

I'm trying to configure a deployed app on an EC2 instance I'm not able to get visit the application when it's up on ec2 public IP. I've checked the security groups and allowed all inbound traffic to ports just to see If I can reach the homepage or admin page of django.

Say my ec2 IP address is 34.245.202.112 how do I map my application so nginx serves

The frontend(nuxt) at 34.245.202.112

The backend(django) at 34.245.202.112/admin

The API(DRF) at 34.245.202.112/api

When I try to do this the error I get from nginx is

nginx | 2020-11-14T14:15:35.511973183Z 2020/11/14 14:15:35 [emerg] 1#1: host not found in upstream "nuxt:3000" in /etc/nginx/conf.d/autobets_nginx.conf:9

This is my config

docker-compose

version: "3.4"

services:
db:
    restart: always
    image: postgres
    volumes:
    - pgdata:/var/lib/postgresql/data
    environment:
    - POSTGRES_USER=postgres
    - POSTGRES_PASSWORD=postgres
    ports:
    - "5432:5432"
    expose:
    - 5432
    networks:
    - random_name

django:
    container_name: django
    build:    
    context: ./backend
    env_file: .env
    environment:
    - DEBUG=True
    command: >
    sh -c "./wait-for-it.sh db:5432 && 
            ./autobets/manage.py collectstatic --no-input &&
            ./autobets/manage.py makemigrations &&
            ./autobets/manage.py migrate --no-input &&
            ./autobets/manage.py runserver_plus 0.0.0.0:8001
            "
    - "8001"
    volumes:
    - ./backend:/app
    depends_on:
    - db
    restart: on-failure

nginx:
    image: nginx
    container_name: nginx
    ports:
    - "80:80"
    restart: always
    depends_on:
    - nuxt
    - django
    volumes:
    - ./nginx/conf:/etc/nginx/conf.d
    - ./nginx/uwsgi_params:/etc/nginx/uwsgi_params
    - ./backend/static:/static
    networks:
    - random_name

nuxt:
    build:
    context: ./frontend
    environment:
    - API_URI=http://django:8001/api

    command: sh -c "npm install && npm run dev"
    volumes:
    - ./frontend:/app
    ports:
    - "3000:3000"
    depends_on:
    - django
    networks:
    - random_name

volumes:
pgdata:
networks:
random_name:

nginx.conf

# the upstream component nginx needs to connect to
upstream django {
    ip_hash;
    server django:8001;
}

upstream nuxt {
ip_hash;
server nuxt:3000;
}

# configuration of the server
server {
    # the port your site will be served on
    listen      8000;
    # the domain name it will serve for
    server_name 34.245.202.112; # substitute your machine's IP address or FQDN
    charset     utf-8;

    # max upload size
    client_max_body_size 75M;   # adjust to taste

    location /static/ {
        alias /static/;
    }

    # Finally, send all non-media requests to the Django server.
    location / {
        proxy_pass  django;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Host $host;
    }
}

Answer 1

Look at this minimal example:

server {
  listen 80;
  listen 8000;  # from you config, remove if unnecessary

  server_name 34.245.202.112;

  proxy_set_header Host $http_host;
  proxy_set_header X-Forwarded-Host $host;

  location / {
    # 'the frontend(nuxt) at 34.245.202.112'
    # This is the default route. Requests get here when there's no
    # better match to go.
    proxy_pass http://nuxt:3000;
  }

  location /api/ {
    # This location will trigger when location in URI begins with '/api/'
    # e.g. http://yourserver.org/api/v1/hello/world
    proxy_pass http://django:8001;
  }

  location /admin/ {
    # exactly as /api/
    proxy_pass http://django:8001;
  }

  location /static/ {
    # same as /api/ but local files instead of proxy
    alias /static/;
  }
}

As you see from the example, each location has a URI prefix. NGINX will test all these 'prefixes' against location in incoming HTTP requests, finding the best match. Once the best match found NGINX will do whatever you wrote inside the block. In the example above all requests starting with /api/ or /django/ go to the django backend. Requests starting with /static/ are served from local files. Everything else goes to nuxt backend.

I'm not sure if I got your intentions right, probably because I'm missing the original config you've edited, so you have to pick up from here. Just remember that you are not limited to URI prefixes for locations (you may use regex or exact match) and that you can do nested locations. Check out this great beginner's guide from NGINX for more http://nginx.org/en/docs/beginners_guide.html .

UPDATE : After looking at other answers here I though I owe an answer to the question in title instead of just basic configuration. The reason why you got the host not found in upstream error is that you didn't specify a resolver directive. It is necessary when using DNS names in upstream blocks and for NGINX in Docker you may use this: resolver 127.0.0.11 ipv6=off; . Put it in the http block, that is outside of server block.

'127.0.0.11' is the Docker DNS. It resolves service and container names as well as 'normal' DNS records (for that is usesn host's DNS configuration). You don't have to assign an alias to a service or set a container_name because service name is a DNS record on its own. It resolves to all containers of that service. Using resolver wasn't necessary in the basic configuration I've posted because I didn't use upstream blocks.

Answer 2

You are missing the alias section in your network block of the docker-compose file. Aliases that you define will automatically update the /etc/hosts file of the containers and therefore your nginx container will be aware of the nuxt host.

services:
  nuxt:
    networks:
      some-network:
        aliases:
          - nuxt

more info here. ctrl-f for aliases: https://docs.docker.com/compose/compose-file/

Answer 3

The container name "nuxt" is not defined in the docker-compose file, so the hostname cannot be resolved by the nginx container. Try to fix the nginx error by adding container_name:nuxt to the nuxt service in the docker-compose file.