React构建产物部署Nginx后脚本不执行问题求助

看起来你碰到了本地开发时Service Worker正常工作，但部署到Nginx（通过serve -s build）后完全没效果的麻烦，我来帮你一步步排查解决：

1. 先揪出路径问题（最常见原因） #

你代码里用的是navigator.serviceWorker.register('./service-worker.js')，这个相对路径在localhost环境下没问题，但部署后如果你的应用不是放在域名根目录，或者Nginx/serve的路径配置不对，浏览器根本找不到这个Service Worker文件。

• 先确认build文件夹根目录下是否真的有service-worker.js？如果是用Create React App创建的项目，默认不会自动生成这个文件，要是你手动放的，得确保它和index.html同级。
• 试试用绝对路径或者%PUBLIC_URL%变量来注册，和你引用favicon的方式一致：

  navigator.serviceWorker.register('%PUBLIC_URL%/service-worker.js')
  

  Create React App在构建时会自动把%PUBLIC_URL%替换成你配置的公共路径，避免相对路径踩坑。

2. 检查Nginx的配置是否拖后腿 #

不管你是用Nginx直接托管静态文件，还是反向代理serve服务，都得确保Nginx的配置没给Service Worker添乱：

基础Nginx配置示例（直接托管build文件夹） #

server {
    listen 80;
    server_name your-domain.com;

    # 指向你的build文件夹路径
    root /usr/share/nginx/html/build;
    index index.html;

    # 处理React单页应用的路由，所有请求都导向index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 给Service Worker文件加特殊缓存头，避免浏览器缓存旧版本
    location /service-worker.js {
        add_header Cache-Control "no-cache";
    }
}

如果是反向代理serve服务，要确保Nginx没有拦截/service-worker.js的请求，让它能正常转发到serve服务。

3. 别忽略HTTPS的要求 #

Service Worker的规范明确规定：除了localhost之外，必须在HTTPS环境下才能注册。如果你的服务器用的是HTTP协议，浏览器会直接阻止Service Worker运行，这时候可以去控制台的Security标签页看看有没有相关报错。

测试环境可以用Let's Encrypt免费证书快速配置HTTPS，这是生产环境必须的一步。

4. 验证文件是否能正常访问 #

先在服务器上直接访问http://你的域名/service-worker.js，看看能不能正常下载这个文件：

• 如果返回404：说明路径配置有问题，先把这个解决了再说
• 如果能正常下载：再看控制台的报错信息，比如是否有HTTPS相关的拦截提示

最后一步：重启服务+清缓存 #

修改完配置后，记得重启Nginx或者serve服务，然后打开浏览器控制台的Application标签页，查看Service Worker的状态。如果之前有缓存旧的Service Worker，记得在Application标签页里手动清除缓存并重新加载。

内容的提问来源于stack exchange，提问作者Tje123