How to configure NGINX to fetch resources correctly - docker

Question

Diagram
Setup
I got 3 docker containers running, 1 for Nginx, 2 for Web Apps
App or Nginx can be reach at localhost:8443
1st Web App is running in port 3000, can be reach via proxy_pass on route "/" or "/*"
2nd Web App is running in port 5000, can be reach via proxy_pass on route "/admin" only
Problem
When I go to "/admin" route it will display the WebApp with no problem but it will hault, it will also fetch the CDN resources with no problem, also it cannot GET some applications assets, like CSS, JS.
Its trying to perform GET on localhost:8443/_nuxt/ but I understand that there's nothing in this link.
The problem is on NGINX configuration, I am no expert on NGINX, how do I configure NGINX for this?
My Whole NGINX Configuration
upstream public {
server ${UPSTREAM_PUBLIC};
}
upstream admin {
server ${UPSTREAM_ADMIN};
}
server {
listen 80;
server_name www.${NGINX_HOST};
return 301 https://${NGINX_HOST}$uri;
}
server {
listen ${NGINX_HTTPS_PORT} ssl http2 default_server;
charset utf-8;
server_name www.${NGINX_HOST} ${NGINX_HOST};
# SSL HERE: change into the directory where the certificates located
ssl_certificate /etc/nginx/certs/fullchain.pem;
ssl_certificate_key /etc/nginx/certs/private.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384';
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
location /${ADMIN_ROUTE}/ {
proxy_pass http://admin;
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Script-Name /${ADMIN_ROUTE};
client_max_body_size 0;
}
location / {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://public/;
}
}
My docker-compose.yml file
version: "3"
services:
frontend-admin:
build:
context: "../frontend-admin"
target: "dev"
container_name: "Admin"
restart: "unless-stopped"
working_dir: "/usr/src/nuxt"
environment:
- "APP_HOST=frontend-admin"
- "APP_PORT=5000"
networks:
- "admin-network"
ports:
- "5000:5000"
volumes:
- "../frontend-admin/assets:/usr/src/admin/assets"
- "../frontend-admin/components:/usr/src/admin/components"
- "../frontend-admin/layouts:/usr/src/admin/layouts"
- "../frontend-admin/middleware:/usr/src/admin/middleware"
- "../frontend-admin/pages:/usr/src/admin/pages"
- "../frontend-admin/plugins:/usr/src/admin/plugins"
- "../frontend-admin/server:/usr/src/admin/server"
- "../frontend-admin/store:/usr/src/admin/store"
- "../frontend-admin/static:/usr/src/admin/static"
- "../frontend-admin/m.js:/usr/src/admin/m.js"
- "../frontend-admin/nuxt.config.js:/usr/src/admin/nuxt.config.js"
frontend-public:
build:
context: "../frontend-public"
target: "production"
container_name: "Public"
restart: "unless-stopped"
working_dir: "/usr/src/nuxt"
environment:
- "APP_HOST=frontend-public"
- "APP_PORT=3000"
- "APP_NAME=sample.com"
ports:
- "3000:3000"
networks:
- "public-network"
volumes:
- "../frontend-public/assets:/usr/src/public/assets"
- "../frontend-public/components:/usr/src/public/components"
- "../frontend-public/layouts:/usr/src/public/layouts"
- "../frontend-public/middleware:/usr/src/public/middleware"
- "../frontend-public/pages:/usr/src/public/pages"
- "../frontend-public/plugins:/usr/src/public/plugins"
- "../frontend-public/server:/usr/src/public/server"
- "../frontend-public/store:/usr/src/public/store"
- "../frontend-public/static:/usr/src/public/static"
- "../frontend-public/m.js:/usr/src/public/m.js"
- "../frontend-public/nuxt.config.js:/usr/src/public/nuxt.config.js"
nginx:
image: "nginx"
depends_on:
- "frontend-admin"
- "frontend-public"
container_name: "nginx"
volumes:
- "./nginx:/etc/nginx/templates"
- "./nginx/certs:/etc/nginx/certs"
ports:
- "8443:8443"
- "80:80"
environment:
- "NGINX_HTTPS_PORT=8443"
- "NGINX_HOST=localhost"
- "NGINX_PORT=80"
- "UPSTREAM_ADMIN=frontend-admin:5000"
- "ADMIN_ROUTE=admin"
- "UPSTREAM_PUBLIC=frontend-public:3000"
- "PGADMIN_URL=mydb"
networks:
- "admin-network"
- "public-network"
networks:
admin-network:
driver: "bridge"
public-network:
driver: "bridge"
Logs after running dokcer-compose up (no problem)
Admin |
Admin | > frontend-admin#1.0.0 dev
Admin | > nuxt
Admin |
nginx | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
nginx | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
Public |
Public | > frontend-public#1.0.0 start
Public | > nuxt start
Public |
nginx | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
nginx | 10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
nginx | 10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
nginx | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
nginx | 20-envsubst-on-templates.sh: Running envsubst on /etc/nginx/templates/default.conf.template to /etc/nginx/conf.d/default.conf
nginx | /docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
nginx | /docker-entrypoint.sh: Configuration complete; ready for start up
nginx | 2021/11/02 02:47:52 [notice] 1#1: using the "epoll" event method
nginx | 2021/11/02 02:47:52 [notice] 1#1: nginx/1.21.3
nginx | 2021/11/02 02:47:52 [notice] 1#1: built by gcc 8.3.0 (Debian 8.3.0-6)
nginx | 2021/11/02 02:47:52 [notice] 1#1: OS: Linux 5.10.25-linuxkit
nginx | 2021/11/02 02:47:52 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
nginx | 2021/11/02 02:47:52 [notice] 1#1: start worker processes
nginx | 2021/11/02 02:47:52 [notice] 1#1: start worker process 36
nginx | 2021/11/02 02:47:52 [notice] 1#1: start worker process 37
nginx | 2021/11/02 02:47:52 [notice] 1#1: start worker process 38
nginx | 2021/11/02 02:47:52 [notice] 1#1: start worker process 39
Public | APP_NAME: sample.com
Public | ℹ Listening on: http://frontend-public:3000/
Admin | ℹ Listening on: http://frontend-admin:5000/
Admin | ℹ Preparing project for development
Admin | ℹ Initial build may take a while
Admin | ℹ Discovered Components: .nuxt/components/readme.md
Admin | ✔ Builder initialized
Admin | ✔ Nuxt files generated
Admin | ℹ Compiling Client
Admin | ℹ Compiling Server
Admin | ✔ Server: Compiled successfully in 21.54s
Admin | ✔ Client: Compiled successfully in 22.73s
Admin | ℹ Waiting for file changes
Admin | ℹ Memory usage: 262 MB (RSS: 433 MB)
Admin | ℹ Listening on: http://frontend-admin:5000/
Admin | Nuxt Server Init
Logs after accessing route: localhost:8443/admin
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /admin/ HTTP/2.0" 200 934546 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/runtime.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/commons/app.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/vendors/app.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/app.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/pages/_.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/runtime.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/commons/app.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/vendors/app.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/app.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/pages/_.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/runtime.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/runtime.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/pages/_.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/pages/_.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/commons/app.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/commons/app.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/vendors/app.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/app.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /_nuxt/runtime.js HTTP/2.0" 500 579 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/vendors/app.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/app.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 2021/11/02 02:48:23 [alert] 36#36: *3 "alias" cannot be used in location "^.+.(jpg|jpeg|gif|svg|css|png|js|ico|txt|srt|swf|ttf|woff|woff2)$" where URI was rewritten, client: 172.20.0.1, server: www.localhost, request: "GET /_nuxt/runtime.js HTTP/2.0", host: "localhost:8443", referrer: "https://localhost:8443/admin/"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /admin/vuetify.css.map HTTP/2.0" 404 48 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /favicon.ico HTTP/2.0" 301 169 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"
nginx | 172.20.0.1 - - [02/Nov/2021:02:48:23 +0000] "GET /favicon.ico/ HTTP/2.0" 404 43 "https://localhost:8443/admin/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36" "-"

Answer 1

I solve this buy adding on my nuxt-config.js
export default {
router: {
base: '/admin/'
}
}