gpt4 book ai didi

javascript - Next-Pwa 不适用于 Nginx 等生产服务器

转载 作者:行者123 更新时间:2023-12-04 08:42:25 31 4
gpt4 key购买 nike

我正在基于 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 应用程序可以工作,但安装图标没有显示在浏览器上。
我在这里做错了什么,请。
谢谢

最佳答案

我遇到了这种错误,但我克服了这个阶段并准确地共享了我的配置,这些配置在我的站点上与使用 Nginx 的生产服务器正常工作。
第 1 步:我见到你 menifest.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 & 就是这样。
我认为它会起作用。
如果您有任何困惑,请告诉我。
谢谢

关于javascript - Next-Pwa 不适用于 Nginx 等生产服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64494398/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com