使用AppVeyor和Travis,自动构建和发布 Electrion应用

0

使用AppVeyor和Travis,自动构建和发布 Electrion应用

前言

Electron应用在开发以后,本地运行 build 只能打包相对于的环境。如在 Mac 下运行只能打包 dmg 不能兼顾其他平台。为了解决这个痛点,就有了这篇文章。

简单说一下构建和发布流程:主要是配置构建工具 electron-builder, 配置 Travis 以构建 Linux 和 Mac 应用,配置 AppVeyor 以构建 Windows 应用,当提交代码到 Github 后,CI 自动拉取代码,运行 electron-builder 相关命令,生成个平台的安装包,并将安装包推送到 Github Releases 中。

release包

在使用 git 提交代码后,CI 自动构建并发布。so easy~ 顺表说一下,对于开源项目,Travis 和 AppVeyor 是能够免费使用的。

准备条件

  1. GitHub 账户
  2. AppVeyor 账户
  3. Travis 账户
  4. 基于 Electron-vue 脚手架构建的项目(非必须)
  5. 项目基于 electron-builder 打包(非必须)

配置项目

编辑本地的 package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
"name": "electron-v2er",
"version": "0.0.1",
"author": "ruicky <xxx@163.com>",
"homepage":"https://github.com/ruicky/electron-v2ex",
"description": "An electron-vue project",
"license": "MIT",
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder --publish always"
...
}

...

"mac": {
"icon": "build/icons/v2ex.icns",
"category": "public.app-category.utilities"
},
"win": {
"icon": "build/icons/v2ex.ico",
"target": "nsis"
},
"linux": {
"icon": "build/icons",
"category": "Utility",
"target": [
"deb",
"AppImage"
]
}

...

}

解释:

  1. 其中的 name(项目名称) version(项目版本) author(作者信息) description (项目描述) license(开源协议) 都需要填写,否则在编译 linux 版本的时候会报错。填写或修改成自己的参数即可。 可参考 Metadata 参数解释
  2. scripts 中的 build 添加 --publish always 可参考 How to Publish 里的参数解释

生成 GitHub 的 GH_TOKEN

electron-builder 需要 GH_TOKEN(Github Personal access token) 才有权限上传文件到 Github Releases 中。 可在 Personal access tokens 页面进行生成,由于只会显示一次,注意保存好。在创建的时候 只需要勾选 repo > public_repo 即可。
生成GH_TOKEN

配置 CI

AppVeyor

在本地项目根目录中添加文件 appveyor.yml,具体可参考一下的示例配置,几乎不用修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
version: 0.1.{build}

branches:
only:
- master

image: Visual Studio 2017
platform:
- x64

cache:
- node_modules
- '%APPDATA%\npm-cache'
- '%USERPROFILE%\.electron'
- '%USERPROFILE%\AppData\Local\Yarn\cache'

init:
- git config --global core.autocrlf input

install:
- ps: Install-Product node 8 x64
- git reset --hard HEAD
- yarn
- node --version

build_script:
#- yarn test
- yarn build

test: off
  1. 创建项目
    • 然后打开 Appveyor 项目页,点击 左边的 NEW PROJECT 按钮,然后在选择你要自动化的仓库。
  2. 设置
    • 回到首页选择创建好的项目
    • 点击 Settings tab
    • Environment 中填写 GH_TOKEN 的值,点击页面最下面的“保存”
      填写token
    • Deployment 中配置部署的结果页,选择 GitHub Releases 并填写之前生成好的 GH_TOKEN,点击页面最下面的“保存”
      选择deployment

Travis

在项目的根目录创建文件 .travis.yml 然后参考下面的配置写入,大部分不用修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# Commented sections below can be used to run tests on the CI server
# https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing
osx_image: xcode8.3
sudo: required
dist: trusty
language: c
matrix:
include:
- os: osx
- os: linux
env: CC=clang CXX=clang++ npm_config_clang=1
compiler: clang
cache:
directories:
- node_modules
- "$HOME/.electron"
- "$HOME/.cache"
addons:
apt:
packages:
- libgnome-keyring-dev
- icnsutils
#- xvfb
before_install:
- mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
"$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
| tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
install:
#- export DISPLAY=':99.0'
#- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
- nvm install 9
- curl -o- -L https://yarnpkg.com/install.sh | bash
- source ~/.bashrc
- npm install -g xvfb-maybe
- yarn
script:
#- xvfb-maybe node_modules/.bin/karma start test/unit/karma.conf.js
#- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e
- yarn run build
branches:
only:
- master
  1. 进入 travis官网, 点击 GitHub 登录 可自动同步项目到 travis
  2. 选择要 配置的项目
  3. 选择项目右边的 setting
    setting
  4. 填写 GB_TOEN的值
    GH_TOKEN

总结

按照上述的配置,就能够自动化的部署了。在配置的过程中由于是 electron-vue 脚手架生成的项目,在 package.json 中有些节点没有,导致在 build linux 环境的时候报错。所以建议,按照上面的说明都配置上。

参考资料

使用 CI 构建和发布全平台 Electron 应用

坚持原创技术分享,您的支持将鼓励我继续创作!