使用electron-builder来打包linux环境app安装包，包括解决http录音权限问题等

HHHHHY
661 阅读4分钟

因为在windows环境下打不了linux安装程序，所以需要准备linux环境，有好几种办法就不一一说明了，我就拿我成功案例来说：

使用docker容器的方式来打包

下载docker、在装docker环境的时候也遇到不少问题总结下，需要电脑支持虚拟化，先去网上搜搜你的cpu主板支不支持虚拟化，然后看看虚拟化是否已经开启，没开启可以进到bios里面去开启wsl；因为每家的主板都不同这里自己去网上搜下哈。

1、搭项目

环境装好我们就可以准备开始搭一个 electron项目了，首先我的需求很简单需要将一个外链用electron包一层壳子做成一个APP，所以我的工程就一个html文件基本就可以完成，

node环境要18+以上

1. 创建项目目录并初始化

mkdir my-electron-app
cd my-electron-app
npm init -y

2. 安装 Electron electron-builder

npm install electron electron-builder --save-dev

项目结构基本就是这样：

image.png

package.json：

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "Electron App for ARM64 (RK3588, 麒麟系统)",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --arm64 --linux deb"
  },
  "author": "Your Name <your.email@example.com>",
  "homepage": "https://your-app-homepage.com",
  "license": "MIT",
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.6.0"
  },
  "build": {
    "directories": {
      "output": "dist"
    },
    "appId": "com.example.electronarmapp",
    "productName": "my-app",
    "files": [
      "**/*",
      "!node_modules/**/*",
      "!dist",
    ],
    "linux": {
      "target": ["AppImage", "deb"],
      "icon": "icon_256x256.png",
      "category": "Utility",
      "maintainer": "Your Name <your.email@example.com>",
      "executableName": "my-app",
      "desktop": {
        "Name": "my-app",
        "GenericName": "Utility",
        "Icon": "/usr/share/icons/hicolor/scalable/apps/my-app256x256.png",
        "Comment": "An Electron App for ARM64 devices like RK3588",
        "Terminal": false,
        "Type": "Application",
        "Categories": "Utility",
        "StartupWMClass": "my-app"
      },
      "synopsis": "my-app",
      "mimeTypes": []
    },
    "extraFiles": [
      {
        "from": "debian/postinst",
        "to": "postinst",
        "filter": ["**/*"]
      }
    ],
    "extraMetadata": {
      "chmod": "755"
    }
  }
}

解决http录音权限问题

main.js:

const { app, protocol, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1024,
    height: 700,
    autoHideMenuBar: true,  // 隐藏菜单栏
    icon: path.join(__dirname, 'build/icon.png'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false,
    }
  });

  win.loadFile('index.html');
  // win.webContents.openDevTools(); // ✅ 调试用
}

// todo 这个配置项 是启用录音功能配置浏览器http白名单的 大用处*****
app.commandLine.appendSwitch(
  'unsafely-treat-insecure-origin-as-secure',
  'http://xxx.xx.xx.xx:8080,http://xxx.xx.xx.xx:8080,http://xxx.xx.xx.xx:8080,',
)

app.whenReady().then(createWindow);

dockerfile：

# 使用官方 Node.js 镜像（bullseye 是 Debian 的代号）
FROM node:18.17.1-bullseye

# 设置镜像源为阿里云，提升 apt 安装速度
RUN sed -i 's@deb.debian.org@mirrors.aliyun.com@g' /etc/apt/sources.list && \
    sed -i 's@security.debian.org@mirrors.aliyun.com@g' /etc/apt/sources.list && \
    apt-get update && apt-get install -y \
    curl \
    ca-certificates \
    libgtk-3-0 \
    libnss3 \
    libxss1 \
    libasound2 \
    libx11-xcb1 \
    libxkbfile1 \
    xz-utils \
    fakeroot \
    dpkg \
    rpm \
    build-essential \
    git

# 安装 curl 并测试网络连接
RUN apt-get update && apt-get install -y curl && curl -I https://registry.npmjs.org

# 更新证书
RUN apt-get install -y ca-certificates && update-ca-certificates

# 设置 npm 镜像源
RUN npm config set registry https://registry.npmjs.org

# 安装依赖
RUN npm install -g electron-builder

# 创建用户
RUN useradd -ms /bin/bash electronuser

# 设置工作目录
WORKDIR /app

# 拷贝项目文件
COPY . .

# 设置工作目录权限
RUN chown -R electronuser:electronuser /app

# 修复图标文件权限
RUN chmod -R 755 /app/build/icons

# 切换到 root 用户进行构建
USER root

# 安装依赖并执行构建
RUN npm install --unsafe-perm=true

RUN npx electron-builder --arm64 --linux deb
# RUN npm run build

# 切换回 electronuser 用户
USER electronuser

# 构建 Electron App（针对 ARM64 Linux）
CMD ["npm", "run", "build"]

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>my-app</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    #app {
      width: 100vw;
      height: 100vh;
    }

    iframe {
      width: 100%;
      height: 100%;
    }

  </style>
</head>
<body>
  <div id="app">
    <iframe 
      id="iframe"
      allow="camera;microphone"
      src="http://xxx.xx.xx.xx:8080"
      allowfullscreen
      ></iframe>
  </div>
</body>
</html>

2、使用说明

执行命令，构建镜像
docker build -t my-electron-app . 

bash复制编辑# 创建容器（不运行），用于提取文件
docker create --name tmp-electron my-electron-app

# 将构建产物复制到宿主机 output 目录
docker cp tmp-electron:/app/dist ./output

# 清理临时容器
docker rm tmp-electron

第1步：构建镜像

docker build -t my-electron-app .

第2步：提取 .deb 构建产物

# 创建容器（不运行），用于提取文件
docker create --name tmp-electron my-electron-app

# 将构建产物复制到宿主机 output 目录
docker cp tmp-electron:/app/dist ./output

# 清理临时容器
docker rm tmp-electron

✅ 重点只要在output文件夹里面找到.deb文件就说明构建成功

这样你会在 my-electron-app\output 下看到生成好的 .deb 文件，完全绕开权限问题。

在 Electron 应用中，如果你想将某个 HTTP 源（比如 http://localhost:3000）视为安全来源），你需要通过 启动参数 或 命令行开关 实现。

启用录音功能方法：使用 app.commandLine.appendSwitch

你可以在主进程中，使用 app.commandLine.appendSwitch 设置启动参数：

// main.ts 或 main.js
import { app, BrowserWindow } from 'electron'

app.commandLine.appendSwitch(
  'unsafely-treat-insecure-origin-as-secure',
  'http://localhost:3000'
)

app.whenReady().then(() => {
  const win = new BrowserWindow({
    webPreferences: {
      // 根据需要启用
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  win.loadURL('http://localhost:3000')
})

这样，Electron 会在加载该 HTTP 页面时，将其当作一个“安全来源”来处理，使得某些只允许在 HTTPS 环境下使用的特性（如 getUserMedia, Service Workers, WebRTC, Clipboard API 等）可以在该地址正常使用。

🔐 注意事项

  1. 此设置存在安全风险，仅应在开发或特定受控环境下使用。

  2. 仅在 Electron >= 5 版本支持该开关。

  3. 多个地址用逗号分隔：

    app.commandLine.appendSwitch(
  'unsafely-treat-insecure-origin-as-secure',
  'http://localhost:3000,http://192.168.1.100:8080'
)
avatar
文章
阅读
粉丝