FCM Service Worker在Next.js DigitalOcean生产环境为何无法正常工作？

架构老林

2026-7-29

解决Next.js部署DigitalOcean后FCM Service Worker 404错误

问题根源

报错显示请求https://${websiteurl}/public/firebase-messaging-sw.js返回404，说明生产环境中Service Worker脚本的实际路径和注册路径不匹配。Next.js的public文件夹是静态资源根目录，构建后其中的文件会直接放在站点根目录，而非/public/子路径下。

解决方案

1. 确认静态文件部署位置

运行next build（或next build && next export如果是静态导出）后，检查构建输出目录（默认.next/static或out），确保firebase-messaging-sw.js存在于根目录，而非public子文件夹中。如果缺失，手动将public/firebase-messaging-sw.js复制到构建输出的根目录。

2. 修正服务器配置（以Nginx为例）

如果使用Nginx托管，确保配置正确映射静态资源，避免将public作为路径前缀。示例配置：

server {
    listen 443 ssl;
    server_name your-domain.com;

    root /var/www/your-nextjs-app/out; # 静态导出的输出目录
    index index.html;

    # 处理Next.js路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 确保Service Worker等静态文件能被直接访问
    location = /firebase-messaging-sw.js {
        add_header Cache-Control "no-cache";
        try_files $uri =404;
    }
}

3. 检查Service Worker注册代码

如果Next.js配置了basePath（在next.config.js中），注册路径需要包含该前缀：

useEffect(() => {
    if ('serviceWorker' in navigator) {
        const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
        navigator.serviceWorker
            .register(`${basePath}/firebase-messaging-sw.js`)
            .then(registration => console.log(registration.scope))
            .catch(err => console.log(err));
    }
}, []);