手把手教你在Linux上构建Electron

开发electron最大的特点就是可以使用web技术来开发跨平台应用，大部分开发都是在windows/mac上开发的electron应用，我使用的是electorn-builder来构建应用，官网提供支持在windows上使用docker来实现Linux版本的构建。可以直接在Linux服务器上完成构建：

构建Linux环境的electron主要的步骤：

1. 安装依赖：node、python(如需要)
2. 将源代码上传到Linux环境
3. 构建应用

安装步骤：

一、安装node

在Linux上安装nodejs，可以在windows上先下载把Linux版本的nodejs包下载到本地后，再拷贝到Linux上

1、查看Linux系统架构

uname -m | arch

2、下载nodejs，Linux安装包下载：nodejs

3、下载到本地之后，将nodejs压缩包上传到Linux服务器上，可以使用终端工具或者ssh传输MobaXTerm终端工具下载地址

将压缩包上传到服务器目录，一般是用户目录（/home/username）

~代表用户目录

4、将文件解压到指定nodejs的安装目录，这里安装到了/opt目录下

1. 在/opt下创建nodejs目录

   cd /opt

   mkdir nodejs

2. 将压缩包拷贝到/opt/nodejs目录下

   mv ~/node-v16.20.2-linux-x64.tar.xz /opt/nodejs

3. 切换到/opt/nodejs目录下，解压压缩包

   cd /opt/nodejs/

   tar -xvf node-v16.20.2-linux-x64.tar.xz

4. 记住解压的bin目录，后续设置环境变量

   目录：/opt/nodejs/node-v16.20.2-linux-x64/bin

5、使用vi或者vim命令编辑 /etc/profile 文件，将nodejs的bin目录添加到环境变量中

export PATH=“/opt/nodejs/node-v16.20.2-linux-x64/bin:$PATH”

1. vim /etc/profile

2. 按下键盘的 i 即可编辑文件，在文件末尾添加环境变量，如下：

   

3. 设置完毕后，按下 esc 键退出编辑模式，输入 :wq! 保存编辑并退出

4. 修改了环境变量文件之后，需要重新加载配置文件以生效，使用命令 source /etc/profile

5. 输入 node -v 测试是否安装成功

二、安装python

我的程序用到grpc，涉及到了node与c++的调用，为了包之间的适配，需要借用python环境来重新构建依赖以完成grpc与electron的适配

1、将python3.11.5在windows上下载后，上传到Linux

安装步骤：

1. cd python-3.11.5

2. ./configure --preofx=/opt/python3

3. make j 10 ：同时运行十个作业，若失败的话，可以使用make

4. su

5. make install

2、将 python3 目录下的 bin 目录设置环境变量

1. vim /etc/profile
2. export PATH=$PATH:/opt/python3/bin
3. 设置完成保存后，重新运行配置文件：source /etc/profile

三、构建electron

将windows下开发的electron源代码拷贝到Linux上，保证将windows版本的node_modules删除，在Linux上进行编译

1、在Linux上的electron源代码目录下，确保没有windows版本的node_modules，然后进行构建：

1. 设置npm和electron的镜像，可以使用国内淘宝镜像顺利的下载资源，执行 npm config edit

2. 执行 npm config edit之后，会进入到 npm 的配置文件，设置镜像

   

   ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
   ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
   registry=https://registry.npmmirror.com/
   

3. 设置完镜像后退出

4. 确保electron代码中对Linux下build进行了配置

   linux: {
       icon,
       target: 'AppImage',
       maintainer: "zj"
   }
   

5. 在electron的根目录下执行 npm install

6. 我的代码中使用到了 grpc，可能会报错grpc与electron版本不兼容的问题，此时需要使用 electron-rebuild 来重新构建完成包之间的兼容

7. 安装了 electron-rebuild 之后，在 package.json 中的 scripts 中设置 "rebuild": “electron-rebuild -f -w yourmodule”

   

8. 执行 npm run rebuild ，开始重新构建。在我测试的时候发现：使用node16.20.2版本搭配python3.11.5版本可以完成rebuild重新构建

9. 打包构建程序：npm run electron:build

2、修改Linux下chrome-sandbox沙盒的权限

由于electron嵌入了Chromium和Node.js，

在Linux系统上，进程和文件的权限管理比其他操作系统更加严格和细粒度。chrome-sandbox 是一个提升了特权的进程，它需要特定的权限来运行。

在构建代码后，运行.AppImage程序，可能会报错：

The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /tmp/.mount_xxxxx/chrome-sandbox is owned by root and has mode 4755.

3、设置chrome-sandbox权限

1. 需要将node_modules/electron/dist/chrome-sandbox设置权限为4755，并且设置root用户权限

2. 执行命令：sudo chown root:root chrome-sandbox && sudo chmod 4755 chrome-sandbox

3. 重新构建build

4、禁用沙盒

1. 若设置chrome-sandbox权限后，重新构建仍然报错，可以禁用沙盒运行程序

2. 在启动程序后面加参数 --no-sandbox

3. 执行：./electron-app --no-sandbox 。此时可以成功运行程序

环境变量配置

Linux上设置环境变量的两种方式：1. 全局设置，设置后所有用户生效 2. 设置属于指定用户的环境变量

1. 全局：/etc/profile/
   1. 设置PATH：export PATH=/opt/nodejs/bin:$PATH
   2. 设置PATH追加：export PATH=$PATH:/opt/python3/bin
   3. 设置完PATH之后需要重新运行：source /etc/profile
2. 用户的环境变量：~/.bashrc | ~/.cshrc