Linux下React-Electron应用安装前检查Docker/Ngrok依赖的方案

算力阿峰

2026-7-11

问题描述

我是Electron JS新手，正在开发一款运行在Linux/Ubuntu系统上、依赖Docker和Ngrok的React-Electron桌面应用。我希望在应用安装前检查用户电脑上是否已安装Docker和Ngrok，若未安装则显示提示信息并提供安装命令。此前尝试在package.json的linux配置中使用fpm和beforeInstall脚本实现该功能，但触发了electron-builder 22.14.13的配置校验错误。

我的package.json配置

{
 "name": "qcloud-test",
 "productName": "Qcloud",
 "version": "0.1.0",
 "private": true,
 "main": "public/main.js",
 "homepage": "./",
 "proxy": "http://localhost:3000",
 "author": {
 "name": "Qcloud dev",
 "email": "qcloud@gmail.com"
  },
 "description": "QCloud Test",
 "dependencies": {
 "@electron/remote": "^1.0.2",
 "@material-ui/icons": "^4.11.3",
 "@testing-library/jest-dom": "^5.11.4",
 "@testing-library/react": "^11.1.0",
 "@testing-library/user-event": "^12.1.10",
 "bcrypt": "^5.1.0",
 "bootstrap": "^5.0.0-beta1",
 "child_process": "^1.0.2",
 "dockerode": "^3.3.5",
 "electron-is-dev": "^1.2.0",
 "express": "^4.18.2",
 "express-async-handler": "^1.2.0",
 "ioredis": "^5.3.2",
 "ngrok": "^4.3.3",
 "pg": "^8.11.1",
 "qlu-20-ui-library": "^1.1.117",
 "react": "^17.0.1",
 "react-bootstrap": "^2.8.0",
 "react-dom": "^17.0.1",
 "react-redux": "^8.1.2",
 "react-router-dom": "^6.14.2",
 "react-scripts": "4.0.1",
 "react-toastify": "^7.0.4",
 "systeminformation": "^5.18.7",
 "uuid": "^9.0.0",
 "web-vitals": "^0.2.4",
 "yup": "^1.2.0"
  },
 "scripts": {
 "start": "react-scripts start",
 "prebuild": "node src/setup.js",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject",
 "electron:serve": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm run electron:start\"",
 "electron:build": "rm -rf dist && rm -rf build && npm run build && electron-builder -c.extraMetadata.main=build/main.js",
 "electron:start": "wait-on tcp:3000 && electron .",
 "electron:package:linux": "npm run build && electron-builder -l -c.extraMetadata.main=build/main.js"
  },
 "build": {
 "extends": null,
 "appId": "com.electron.myapp",
 "productName": "QCloud-Test",
 "files": [
 "dist/**/*",
 "build/**/*",
 "node_modules/**/*",
 "package.json"
    ],
 "extraResources": [
 "/snap/bin/ngrok"
    ],
 "directories": {
 "buildResources": "assets"
    },
 "mac": {
 "target": "dmg"
    },
 "win": {
 "target": [
        {
 "target": "nsis",
 "arch": [
 "x64", 
 "ia32"
          ]
        },
        {
 "target": "zip",
 "arch": [
 "x64",
 "ia32"
          ]
        }
      ]
    },
 "linux": {
 "target": "deb",
 "category": "Development",
 "icon": "build/logo.png"
    },
 "deb": {
 "depends": [
 "docker",
 "ngrok",
 "gconf2"
 
      ]
    }

  },
 "eslintConfig": {
 "extends": [
 "react-app",
 "react-app/jest"
    ]
  },
 "browserslist": [
 ">0.2%",
 "not dead",
 "not op_mini all"
  ],
 "devDependencies": {
 "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 "concurrently": "^5.3.0",
 "cross-env": "^7.0.3",
 "electron": "^11.5.0",
 "electron-builder": "^22.14.13",
 "electronmon": "^2.0.2",
 "prettier": "^2.2.1",
 "wait-on": "^5.3.0"
  }
}

错误信息

• loaded configuration file=package.json ("build" field)
⨯ Invalid configuration object. electron-builder 22.14.13 has been initialized using a configuration object that does not match the API schema.
configuration.linux has an unknown property 'fpm'. These properties are valid: object { appId?, artifactName?, asar?, asarUnpack?, category?, compression?, cscKeyPassword?, cscLink?, defaultArch?, description?, desktop?, detectUpdateChannel?, electronUpdaterCompatibility?, executableArgs?, executableName?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, maintainer?, mimeTypes?, packageCategory?, protocols?, publish?, releaseInfo?, synopsis?, target?, vendor? } How to fix:
Open https://www.electron.build/configuration/linux
Search the option name on the page (or type in into Search to find across the docs).
Not found? The option was deprecated or not exists (check spelling). * Found? Check that the option in the appropriate place. e.g. "title" only in the "dmg", not in the root. failedTask=build stackTrace=ValidationError: Invalid configuration object. electron-builder 22.14.13 has been initialized using a configuration object that does not match the API schema.
configuration.linux has an unknown property 'fpm'. These properties are valid: object { appId?, artifactName?, asar?, asarUnpack?, category?, compression?, cscKeyPassword?, cscLink?, defaultArch?, description?, desktop?, detectUpdateChannel?, electronUpdaterCompatibility?, executableArgs?, executableName?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, maintainer?, mimeTypes?, packageCategory?, protocols?, publish?, releaseInfo?, synopsis?, target?, vendor? } How to fix:
Open https://www.electron.build/configuration/linux
Search the option name on the page (or type in into Search to find across the docs).
Not found? The option was deprecated or not exists (check spelling). * Found? Check that the option in the appropriate place. e.g. "title" only in the "dmg", not in the root. at validate (/home/shireen/Desktop/qcloud1.0/qCloud-electron-app/node_modules/@develar/schema-utils/dist/validate.js:86:11) at Object.validateConfig (/home/shireen/Desktop/qcloud1.0/qCloud-electron-app/node_modules/app-builder-lib/src/util/config.ts:240:3) at Packager._build (/home/shireen/Desktop/qcloud1.0/qCloud-electron-app/node_modules/app-builder-lib/src/packager.ts:342:5) at Packager.build (/home/shireen/Desktop/qcloud1.0/qCloud-electron-app/node_modules/app-builder-lib/src/packager.ts:337:12) at Object.executeFinally (/home/shireen/Desktop/qcloud1.0/qCloud-electron-app/node_modules/builder-util/src/promise.ts:12:14) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! qcloud-test@0.1.0 electron:build: `rm -rf dist && rm -rf build && npm run build && electron-builder -c.extraMetadata.main=build/main.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the qcloud-test@0.1.0 electron:build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/shireen/.npm/_logs/2023-09-06T13_58_15_592Z-debug.log

解决方案

1. 修复配置校验错误

你之前在linux配置节点下添加了fpm属性，但electron-builder 22.14.13的Linux配置schema不支持该字段，直接移除该字段即可解决配置校验失败的问题。

2. 依赖检查的两种实现方式

方式一：通过Deb包依赖自动处理（仅适用于Deb/Ubuntu系统）

利用electron-builder的deb依赖声明，让系统包管理器自动检查并安装缺失的依赖：

Ubuntu官方仓库中Docker的包名是docker.io，不是你配置的docker，需要修正
Ngrok不在官方Ubuntu仓库中，不能添加到deb依赖里，否则会导致安装失败，改用应用内检查

修正后的build配置段：

"build": {
  "extends": null,
  "appId": "com.electron.myapp",
  "productName": "QCloud-Test",
  "files": [
    "dist/**/*",
    "build/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "extraResources": [
    "/snap/bin/ngrok"
  ],
  "directories": {
    "buildResources": "assets"
  },
  "mac": {
    "target": "dmg"
  },
  "win": {
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64", 
          "ia32"
        ]
      },
      {
        "target": "zip",
        "arch": [
          "x64",
          "ia32"
        ]
      }
    ]
  },
  "linux": {
    "target": "deb",
    "category": "Development",
    "icon": "build/logo.png"
  },
  "deb": {
    "depends": [
      "docker.io",
      "gconf2"
    ]
  }
}

方式二：应用启动时检查依赖（通用所有安装方式）

在Electron主进程中添加检查逻辑，启动时验证Docker和Ngrok是否存在，缺失则弹出提示并退出：

编辑public/main.js，添加以下代码：

const { app, dialog } = require('electron');
const { execSync } = require('child_process');

// 检查系统依赖
function checkRequiredDependencies() {
  const missingDeps = [];

  // 检查Docker
  try {
    execSync('docker --version', { stdio: 'ignore' });
  } catch (error) {
    missingDeps.push({
      name: 'Docker',
      installCmd: 'sudo apt update && sudo apt install docker.io'
    });
  }

  // 检查Ngrok
  try {
    execSync('ngrok --version', { stdio: 'ignore' });
  } catch (error) {
    missingDeps.push({
      name: 'Ngrok',
      installCmd: 'sudo snap install ngrok'
    });
  }

  if (missingDeps.length > 0) {
    let promptMsg = '缺少必需依赖，请安装后再启动应用：\n\n';
    missingDeps.forEach(dep => {
      promptMsg += `${dep.name}:\n安装命令：${dep.installCmd}\n\n`;
    });
    dialog.showErrorBox('依赖缺失', promptMsg);
    app.quit();
  }
}

app.whenReady().then(() => {
  checkRequiredDependencies();
  // 继续执行你的应用初始化代码
});

这种方式无论用户通过deb包、压缩包还是其他方式安装应用，启动时都会触发检查，体验更统一。

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

Linux下React-Electron应用安装前检查Docker/Ngrok依赖的方案

我的package.json配置 #

错误信息 #

1. 修复配置校验错误 #

2. 依赖检查的两种实现方式 #

方式一：通过Deb包依赖自动处理（仅适用于Deb/Ubuntu系统） #