Next-Pwa 无法在 Nginx 等生产服务器上运行

Question

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

https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

这是我的next.config.js

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

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

这里是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 文件

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 应用程序工作但浏览器上没有显示安装图标。

我做错了什么，拜托。

谢谢

Answer 1

我遇到过这种错误，但我已经克服了这个阶段，并完全分享了我的配置，该配置在我的站点上与使用 Nginx 的生产服务器正常工作。

第 1 步：我看到您的 manifest.json 文件没问题。

第2步：在next.config.js

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 服务器更新，但我看到 server 文件很好，只需根据您的文件更新此部分

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

然后重新启动服务器并构建项目并重新启动pm2 就可以了。

我认为它会起作用。

如果您有任何困惑，请告诉我。

谢谢

Answer 2

您在 cmets 中提到的控制台错误提到 /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 而只使用 server/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，如果不是，请将location / 中的root 设置调整为您的image/、fonts/ 等实际所在的根文件夹是。