Javascript 下一个Pwa在生产服务器（如Nginx）上不工作

我正在基于Next.js示例应用程序工作，如下面的链接

这是我的

next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
    pwa: {
        dest: 'public',
        register: true,
        runtimeCaching,
    }
})

const withPWA = require('next-pwa')

module.exports = withPWA({
    pwa: {
        dest: 'public'
    }
})

下面是

manifest.json

{
  "name": "nex-pwa",
  "short_name": "app",
  "display": "fullscreen",
  "orientation": "portrait",
  "theme_color": "#3056de",
  "background_color": "#3056de",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    }, {
      "src": "/icons/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    }, {
      "src": "/icons/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    }, {
      "src": "/icons/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

还有Nginx

服务器

文件

server 
{
    root /var/www/domain.com/html/pwa;

    server_name domain.com www.domain.com;

    error_log /var/www/domain.com/html/pwa/log/error.log;

    location ~/images(.*$) { 
        proxy_pass http://localhost:3035/images$1; 
        proxy_redirect off; 
    }

    location ~/fonts(.*$) { 
        proxy_pass http://localhost:3035/fonts$1; 
        proxy_redirect off; 
    }

    location ~/icons(.*$) { 
        proxy_pass http://localhost:3035/icons$1; 
        proxy_redirect off; 
    }

    location ~/sw.js(.*$) { 
        proxy_pass http://localhost:3035/sw.js$1; 
        proxy_redirect off; 
    }

    location ~/workbox-c2b5e142.js(.*$) { 
        proxy_pass http://localhost:3035/workbox-c2b5e142.js$1; 
        proxy_redirect off; 
    }

    location ~/_next(.*)$ {
        proxy_pass http://localhost:3035/_next$1;
        proxy_redirect off;
    }

    location / {
        proxy_pass http://localhost:3035;
        proxy_redirect off;
    }

    location ~ /\.ht {
        deny all;
    }
}

它正在本地开发服务器上进行开发，但当我使用nginx部署到DigitalOcean这样的产品上时，它不再工作了，我的意思是web应用可以工作，但安装图标不会显示在浏览器上

请告诉我我做错了什么

---

谢谢

您在评论中提到的控制台错误提到了

/css/animate.min.css

，并显示了该文件的404错误。。。此外，您的nginx配置似乎没有

/css

规则。也许你需要补充一下，比如：

server 
{
    root /var/www/domain.com/html/pwa;

    server_name domain.com www.domain.com;

    error_log /var/www/domain.com/html/pwa/log/error.log;

    location ~/css(.*$) { 
        proxy_pass http://localhost:3035/css$1; 
        proxy_redirect off; 
    }

    # ... your other location rules
}

这就是说，我想知道为什么要用代理将每个目录分别传递到同一个目的地。为什么不直接在静态目录上使用

try_files

，而只使用服务器/next实际需要呈现的代理调用呢。我猜

localhost:3035

是您的节点/下一个服务器吗？您可以尝试以下方法：

server 
{
    root /var/www/domain.com/html/pwa;

    server_name domain.com www.domain.com;

    error_log /var/www/domain.com/html/pwa/log/error.log;

    location / {
        root /var/www/domain.com/html/pwa/static;
        index index.html;
        try_files $uri $uri/ @proxy;
    }

    location @proxy {
        proxy_pass http://localhost:3035;
        proxy_redirect off;
    }

    location ~ /\.ht {
        deny all;
    }
}

---

这假设生成过程生成的静态文件位于

/var/www/domain.com/html/pwa/static

中，如果不是，请将

位置/

中的

根

设置调整到

图像/

，

字体/

所在的根文件夹，等等。实际上是。

我曾经遇到过这种错误，但在这一阶段我被克服了&准确地与使用Nginx的生产服务器共享我的配置，该配置在我的站点上运行良好

步骤1：我看到你

menifest.json

文件没问题

步骤2：在

next.config.js中

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
    pwa: {
        dest: 'public',
        register: true,
        runtimeCaching,
    }
})

const withPWA = require('next-pwa')

module.exports = withPWA({
    pwa: {
        dest: 'public'
    }
})

然后保存并运行/重新启动开发服务器，如
npm run dev
，然后它将生成
sw.js
&
workbox-*.js
如果生成了这些文件，则再次停止开发服务器并打开
next.config.js
更新文件，如下所示

module.exports = withPWA({
    pwa: {
        disable: process.env.NODE_ENV === 'development',
        // dest: 'public', // comment out this line
        register: true,
        sw: '/sw.js'
    }
})

现在项目上传到服务器&Nginx服务器更新，但是我看到
服务器
文件很好，只需根据您的文件更新此部分

location ~/workbox-c2b5e142.js(.*$) {  // from public folder
    proxy_pass http://localhost:3035/workbox-c2b5e142.js$1; 
    proxy_redirect off; 
}

然后重新启动服务器，构建项目，重新启动pm2

我想它会起作用的

如果您有任何疑问，请告诉我

谢谢
这不应该是
manifest.json
？@JaromandaX是的！这是一个输入错误。我想知道您是否正确配置了nginx。是否有任何网络错误？您的sw.js文件是否存在并提供了服务？@felixmosh是的，浏览器控制台中显示错误，但web工作正常<代码>workbox-c2b5e142.js:1未捕获（承诺中）错误的预处理响应：错误的预处理响应：[{“url”：https://domain/css/animate.min.css，“status”：404}]at P（https:/domain/workbox-c2b5e142.js:1:11329）at async Promise.all（索引0）at async P.install(https://domain/workbox-c2b5e142.js:1:10742)

让我检查一下，我很快就会给你回复。谢谢，谢谢你的时间，但是我试过了，但是没有成功。和以前一样。