Vite构建React应用部署到Amplify后无法找到Service Worker脚本

我用Vite结合vite-plugin-pwa和Workbox构建React应用，本地通过vite和vite preview测试完全正常，但通过Git集成部署到AWS Amplify环境后，应用找不到/service-worker.js脚本，具体情况如下：

• 本地构建产物根目录存在service-worker.js，同目录下的其他资源（比如/assets/index-randomgibberish.js）能正常加载；vite preview用最终构建产物运行，删除构建文件会正常触发404，说明云端执行相同构建命令应该生成一致产物。
• 构建日志显示正在编译src/service-worker.js，输出public/service-worker.mjs，但本地从未见过.mjs格式的文件。
• 尝试访问mywebsite.com/service-worker.js、mywebsite.com/service-worker.mjs、mywebsite.com/assets/service-worker.js、mywebsite.com/assets/service-worker.mjs均返回404；在Amplify中配置重定向/重写无效，关闭所有重定向规则也没用。
• 使用自定义域名，自定义域名和Amplify生成的URL表现一致；无法查看CloudFront、S3及构建基础设施的底层配置。

我的amplify.yaml配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
      - 'service-worker.js'

1. 确认vite-plugin-pwa输出配置 #

检查vite.config.js中PWA插件的配置，确保service worker输出到dist根目录：

import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      // 若使用Workbox策略
      workbox: {
        swDest: 'service-worker.js', // 指定输出文件名与路径
      },
      // 若使用自定义service worker
      srcDir: 'src',
      filename: 'service-worker.js',
      strategies: 'injectManifest',
      // 避免生成.mjs格式，可显式指定格式
      format: 'iife',
    }),
  ],
};

如果日志显示输出public/service-worker.mjs，可能是配置中默认启用了ES格式，需显式指定格式或调整输出路径到dist目录。

2. 修正Amplify构建产物配置 #

amplify.yaml中**/*已覆盖所有文件，无需重复声明service-worker.js，调整后配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'

同时在Amplify控制台的构建设置中，检查是否存在额外的文件排除规则，避免service worker被遗漏。

3. 验证Amplify构建产物 #

在Amplify控制台的部署历史中，点击对应部署记录的下载构建产物，解压后确认service-worker.js是否存在于根目录：

• 若不存在，说明构建过程中文件未生成到dist目录，需重新调整Vite PWA配置。
• 若存在，说明问题出在云端资源分发或访问路径上。

4. 处理CloudFront缓存与资源类型 #

• 在Amplify控制台的域名管理中点击刷新缓存，强制CloudFront更新资源；
• 确认service-worker.js的Content-Type为application/javascript，Amplify默认会自动处理，但自定义重写规则可能干扰该设置，可暂时关闭所有重定向规则再次测试。

5. 检查Service Worker注册路径 #

确认React应用中注册service worker的代码使用正确路径：

import { registerSW } from 'virtual:pwa-register';

registerSW({
  swUrl: '/service-worker.js', // 确保是根路径，不要带assets前缀
});

6. 调整构建命令顺序 #

尝试先执行构建命令，再执行ampx pipeline-deploy，避免部署操作修改构建产物：

build:
  commands:
    - npm run build
    - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

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