如何将 nginx 用于 nuxt js 作为代理和 http 服务器？

Question

我在 Ubuntu 20.04 服务器上有一个 NUXT js 应用程序。我使用 Nginx 来为我的 nuxt 应用程序提供服务，如下所示：

server {
client_max_body_size 300M;

root /var/www/app/dist;

server_name example.com;

location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}

我的 NUXT 应用程序在端口 8080 和 Nginx 反向代理上使用 npm，将用户请求传递给 localhost:8080，一切正常。

现在我想访问 js service worker 文件（命名为：p-sw.js）。但是当我尝试通过我的网站地址访问它时，(https://example.com/p-sw.js) 由于 Nginx 反向代理它 returns 404。这个文件在 dist 文件夹中（参见 Nginx 配置）。

当我在浏览器中输入服务工作者地址 (https://example.com/p-sw.js) 时，任何人都可以向我解释如何将 Nginx 反向代理设置为像以前一样正常工作以及加载服务工作者文件吗？

Answer 1

终于解决了！

Nginx 配置必须如下所示：

upstream backend {
    server localhost:3000;
}

server {
    server_name example.com;
    client_max_body_size 300M;
    root /var/www/app/dist;

    location /p-sw.js {
        try_files $uri @backend;
        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        expires off;
        proxy_no_cache 1;
    }

    location @backend {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

在这个配置中，我通过为我的 service worker 文件定义 location /p-sw.js 解决了这个问题，对于 Nuxt 路由，我使用了相同的代理传递！

如何将 nginx 用于 nuxt js 作为代理和 http 服务器？

How to use nginx for nuxt js as proxy and http server?

nginx

nuxt.js

nginx-reverse-proxy

nginx-config