Electron JS基于Azure Blob Storage自动更新报错及上传文件咨询

我正在使用Electron JS开发应用，已部署Azure Blob Storage服务，并将dist文件夹中的文件上传至Blob，但自动更新器（auto-updater）出现报错。以下是相关配置文件：

Package.json 文件 #

{
  "name": "mico_wml",
  "version": "0.1.1",
  "private": true,
  "author": {
    "name": "MyApp",
    "email": "contact@myapp.com"
  },
  "dependencies": {
    "@craco/craco": "^7.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "main": "public/electron.js",
  "homepage": "./",
  "publishConfig": {
    "provider": "generic",
    "url": "https://myappsstorage.blob.core.windows.net/update"
  },
  "scripts": {
    "dist": "electron-builder",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "craco build",
    "start": "electron .",
    "publish": "electron-builder --publish always"
  },
  "build": {
    "appId": "com.myapp",
    "productName": "myapp",
    "artifactName": "${name}_${os}_${arch}-setup.${ext}",
    "publish": [
      {
        "provider": "generic",
        "url": "https://myappsstorage.blob.core.windows.net/update"
      }
    ],
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "artifactName": "myapp-${version}.${ext}",
      "publish": {
        "provider": "generic",
        "url": "https://myappsstorage.blob.core.windows.net/update"
      }
    },
    "mac": {
      "category": "public.app-category.productivity",
      "artifactName": "myapp-${version}.${ext}",
      "target": "dmg",
      "publish": {
        "provider": "generic",
        "url": "https://myappsstorage.blob.core.windows.net/update"
      }
    },
    "linux": {
      "target": "deb"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^24.0.0",
    "electron-builder": "^23.6.0",
    "tailwindcss": "^3.3.1",
    "webpack-node-externals": "^3.0.0"
  }
}

Electron.js 文件 #

const {app,BrowserWindow, autoUpdater} = require("electron");

const updateUrl = 'https://myappsstorage.blob.core.windows.net/update';
const channel = 'latest';
autoUpdater.setFeedURL({
  url: `${updateUrl}/${channel}/${process.platform}/${app.getVersion()}`,
  headers: {
    'x-ms-blob-type': 'BlockBlob'
  }
});

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  console.error('Downloaded');
});

autoUpdater.on('error', (error) => {
  console.error('Error updating application:', error);
});

咨询问题： #

1. 需要上传哪些文件至Azure Blob Storage？
2. 实现自动更新的正确步骤是什么？

一、需要上传到Azure Blob Storage的文件 #

electron-builder生成的dist目录中，仅需上传以下几类核心文件：

• 平台安装包：Windows的.exe/.nsis.zip、Mac的.dmg/.zip、Linux的.deb等
• 更新元数据文件：latest.yml（Windows/Linux）或latest-mac.yml（Mac）——这是auto-updater检测版本、获取下载地址的关键文件
• 差分更新包（可选）：若启用差分更新，会生成*.delta格式文件，可大幅减少更新包体积

注意：无需上传React的build目录文件，只传electron-builder打包生成的发布文件即可。

二、实现自动更新的正确步骤 #

1. 修复现有配置错误 #

首先修正两处致命问题：

• 引号格式：将package.json和electron.js中的中文引号（“）全部替换为英文双引号（"），避免配置解析失败
• Feed URL错误：当前URL拼接了版本号路径，但generic provider默认将元数据文件放在发布根目录，无需额外路径。同时删除多余的x-ms-blob-type头（该头仅用于上传Blob，下载更新不需要）。修正后的代码：

  autoUpdater.setFeedURL({
    url: `${updateUrl}/${channel}`
  });
  

• 合并重复配置：删除package.json中publishConfig、build.win.publish等重复的发布配置，仅保留build.publish即可，避免冲突。

2. 生成带更新元数据的发布包 #

执行以下命令完成项目构建与发布包生成：

npm run build  # 先构建React项目
npm run publish  # 用electron-builder打包并生成更新元数据文件

执行后dist目录会生成安装包和对应的latest.yml/latest-mac.yml文件。

3. 配置Azure Blob Storage权限 #

• 将存储容器设置为公开读取权限；若需私有存储，需生成SAS令牌并附加到Feed URL中
• 上传文件时保持路径对应：将dist下的所有发布文件直接上传到Blob的update/latest目录（对应你设置的channel为latest）

4. 完善autoUpdater逻辑 #

补充更新检查、用户提示等必要逻辑，确保更新流程完整：

const {app, BrowserWindow, autoUpdater, dialog} = require("electron");

const updateUrl = 'https://myappsstorage.blob.core.windows.net/update';
const channel = 'latest';

app.whenReady().then(() => {
  // 设置更新源
  autoUpdater.setFeedURL({ url: `${updateUrl}/${channel}` });

  // 启动后检查更新
  autoUpdater.checkForUpdates();

  // 检测到更新时提示用户
  autoUpdater.on('update-available', () => {
    dialog.showMessageBox({
      type: 'info',
      title: '更新可用',
      message: '发现新版本，正在后台下载...'
    });
  });

  // 更新下载完成后提示安装
  autoUpdater.on('update-downloaded', (_, __, releaseName) => {
    dialog.showMessageBox({
      type: 'question',
      title: '更新完成',
      message: `新版本${releaseName}已下载，是否立即安装？`,
      buttons: ['立即安装', '稍后']
    }).then(res => {
      if (res.response === 0) autoUpdater.quitAndInstall();
    });
  });

  // 捕获更新错误并提示
  autoUpdater.on('error', error => {
    console.error('更新错误:', error);
    dialog.showErrorBox('更新失败', error.message || '未知错误');
  });
});

5. 测试更新流程 #

• 安装当前版本（如0.1.1）的应用
• 修改package.json的version为0.1.2，重新打包并上传新版本文件和latest.yml到Blob
• 打开旧版本应用，验证是否能检测到更新、完成下载并安装新版本

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