利用docker自动构建electron应用

原创

用砖头敲代码

发布于 2024-12-04 11:03:54

1880

前言

由于我是使用@quick-start/electron创建的vue-electron项目，默认是使用electron-builder来构建应用的，但是网上的教程一般都是electron-forage，所以才想自己研究一个优美的打包方式。

原理

首先，想在docker中使用electron-builder打包成exe的话，前提就是需要wine环境，这里就不得不表扬一下electron-builder了，直接提供了一个带有wine环境的镜像，但是我使用的时候总会报错，所以便有了这篇文章。

开搞

首先是Dockerfile，肯定是基于electronuserland/builder:wine来搞的，这个里面已经默认包括了wine环境，但是亲测的时候少了一点环境，需要用apt-get去补全，补全后的大概Dockerfile就是这样婶的

# 基于electron-builder提供的镜像
FROM electronuserland/builder:wine

# 默认用户
USER root

# 默认工作目录
ENV WORKSPACE_DIR=/workspace/windows

# 换源
RUN sed -i 's@//.*archive.ubuntu.com@//mirrors.ustc.edu.cn@g' /etc/apt/sources.list
# 补全环境
RUN apt-get update -y && apt-get upgrade -y && apt-get install -y curl wget libatk1.0-dev libatk-bridge2.0-dev libgtk-3-dev

# 创建工作目录
RUN mkdir -p ${WORKSPACE_DIR}/
RUN mkdir -p ${WORKSPACE_DIR}/../package

WORKDIR ${WORKSPACE_DIR}/../

COPY ./windows-build.sh ${WORKSPACE_DIR}/../build.sh

RUN chmod +x ${WORKSPACE_DIR}/../build.sh

CMD ["./build.sh"]

大概原理不用多说，只是基于他原本的镜像去额外装了几个包，然后利用build.sh去自动构建应用，构建脚本的内容就可以自由发挥了，我是这么写的

#!/bin/sh

# 设置国内源
npm config set registry https://registry.npmmirror.com/
# 更新npm
npm install -g npm@latest

# 进入工作目录
cd $WORKSPACE_DIR

# 给权限
chmod -R 0777 $WORKSPACE_DIR

# 安装依赖
npm install

# 打包
npm run build:win

# 打包完成
cp $WORKSPACE_DIR/dist/*.exe $WORKSPACE_DIR/../package/windows.exe

echo "\e[32m Build Exe success \e[0m"

然后正常构建镜像，启动容器就可以自动构建electron了

启动

这里附一个我写的docker-compose的配置文件，设置了两个目录映射，一个是源码位置，一个是打包后的软件位置，直接docker-compose up一键启动，然后稍等片刻就打包好了，真是美滋滋

version: '3.8'

services:
  auto_build_windows:
    build:
      context: .
      dockerfile: Dockerfile
    image: auto_build:windows
    container_name: auto_build_windows
    volumes:
      - ./windows-packaged:/workspace/package
      - ./windows:/workspace/windows

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

electron-builder