如何为Nuxt应用程序设置Nginx代理？

Question

我有 Nuxt 应用程序在端口

3001

上运行。我想从 Nginx 代理它。我可以直接在端口

3001

上正确访问应用程序，但我想代理它，所以我使用 Nginx 来实现这一点，以下是 Nginx 的配置...

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  19000;
}

http {
    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

    server {
        listen 80 default_server;
        server_name localdomain.local;

        location /admin {
            proxy_pass http://host.docker.internal:3001/;

            proxy_set_header Host $host:$proxy_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # This is Another React Application of mine
        # Which is working just fine
        location / {
            proxy_pass http://host.docker.internal:5173/;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

现在，当我访问

localdomain.local/admin

时，我会收到 Nuxt 服务器提供的

index.html

文件。但在该文件中，有指向其他文件（runtime.js、common.js 等）的链接，我收到了 404 错误。怎么解决这个问题？

Answer 1

似乎您在

/admin

下提供应用程序，但 js 文件应该在该子目录之外提供。您可能需要告诉 nuxt 它正在该

/admin

子目录中运行，以便它生成链接文件的正确路径。我想这可能就是问题所在。以下文章描述了一种解决方案：将 nuxt.js 应用程序配置为在网络服务器上的子目录中工作

---

出于测试目的，您可以尝试将根

/

代理到您的nuxt应用程序。如果这有效，那就应该是上面解释的问题。