如何配置 NGINX 以正确获取资源答案

【问题标题】：How to configure NGINX to fetch resources correctly如何配置 NGINX 以正确获取资源
【发布时间】：2021-12-16 15:55:07
【问题描述】：

图表

设置

我运行了 3 个 docker 容器，1 个用于 Nginx，2 个用于 Web 应用程序
App 或 Nginx 可以在 localhost:8443 访问
第一个 Web 应用程序在端口 3000 中运行，可以通过路由 "/" 或 "/*" 上的 proxy_pass 访问
第二个 Web 应用程序在端口 5000 中运行，只能通过路由 "/admin" 上的 proxy_pass 访问

问题

当我转到"/admin"路由时，它会显示WebApp没有问题但它会拖拽，它也会毫无问题地获取CDN资源，并且它无法获取一些应用程序资产，如CSS，JS。李>
它试图在 localhost:8443/_nuxt/ 上执行 GET，但我知道此链接中没有任何内容。
问题出在 NGINX 配置上，我不是 NGINX 专家，我该如何配置 NGINX？

我的整个 NGINX 配置

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/;
    }
}

我的 docker-compose.yml 文件

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"

运行`dokcer-compose up`后的日志（没问题）

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

访问路由后的日志：`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" "-"

【问题讨论】：

localhost:8443/admin/_nuxt/ 是正确的位置吗？
是的，你是对的
您可以尝试在您的管理APP中将静态网址从/_nuxt/xx.js更改为./_nuxt/xx.js
我该怎么做？我不确定你的意思

标签： docker nginx nuxt.js

【解决方案1】：

我解决了这个购买添加我的nuxt-config.js

export default {
  router: {
    base: '/admin/'
  }
}

【讨论】：

图表

设置

问题

我的整个 NGINX 配置

我的 docker-compose.yml 文件

运行dokcer-compose up后的日志（没问题）

访问路由后的日志：localhost:8443/admin

运行`dokcer-compose up`后的日志（没问题）

访问路由后的日志：`localhost:8443/admin`