Nginx Reverse Proxy configuration results in 404

Question

I have setup a singular nginx server which needs to manage a CMS service with a Nuxt Front End. Currently navigating to both http://localhost and http://localhost/cms results in 404 from Nginx. With the docker-compose port binded 3000:3000 on the Nuxt app I can access the Nuxt app on http:/localhost:3000.

I want http://localhost/* to go to the nuxt-app and http://localhost/cms/* to go to the apos-cms.

version: '3.7'

services:
  db:
    container_name: db
    image: mongo
    ports:
      - "27018:27017"
    volumes:
      - mongodata:/data/db

  apos-cms:
    container_name: apos-cms
    build: .
    volumes:
      - ./app.js:/app/app.js
      - ./config:/app/config
      - ./lib:/app/lib
      - ./public:/app/public
    depends_on:
      - db
    environment:
      APOS_MONGODB_URI: mongodb://db:27017/farmivore
      NODE_APP_INSTANCE: docker
      BASE_URL: http://localhost/cms
    command: yarn dev

  nuxt-app:
    container_name: nuxt-app
    build: ./nuxt-app
    ports:
      - "3000:3000"
    depends_on:
      - apos-cms
    environment:
      - BASE_URL=http://localhost:8000/cms
      - API_URL=http://localhost:8000/cms/api/v1
      - NODE_ENV=development
      - HOST=0.0.0.0
      - PORT=3000
    volumes:
      - ./nuxt-app/assets:/app/assets
      - ./nuxt-app/components:/app/components
      - ./nuxt-app/layouts:/app/layouts
      - ./nuxt-app/pages:/app/pages
      - ./nuxt-app/plugins:/app/plugins
      - ./nuxt-app/static:/app/static
      - ./nuxt-app/store:/app/store
      - ./nuxt-app/nuxt.config.js:/app/nuxt.config.js
    command: yarn dev

  reverse-proxy:
    container_name: reverse-proxy
    image: nginx:latest
    volumes:
      - ./public:/usr/share/nginx
      - ./nuxt-app/assets:/usr/share/nginx/nuxt-app
      - ./reverse-proxy/local.conf:/etc/nginx/config.d/local.conf
      - ./reverse-proxy/logs:/etc/nginx/logs
    depends_on:
      - nuxt-app
      - apos-cms
    ports:
      - "80:80"

volumes:
  mongodata:

http {
    # Set the MIME type for all files served by Nginx
    # This is equivalent to the default MIME types in Apache
    include /etc/nginx/mime.types;

    # Set the default character set
    charset utf-8;

    # Define the Nginx server
    server {
        # Listen on port 80
        listen 80;
        server_name localhost;

        # Define the location of the API endpoint
        location /cms/ {
            # Pass the request to the apos-cms service
            proxy_pass http://apos-cms:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # Define the location of the Nuxt.js application
        location / {
            # Pass the request to the nuxt-app service
            proxy_pass http://nuxt-app:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

Nginx Reverse Proxy configuration results in 404

0 Answers0