公司后端的小哥哥小姐姐们早就配置了 GitLab CI 自动部署,我这种懒人看的是早就心痒痒了。想着我们大前端要是啥时候能弄一个提交代码自动打包岂不美滋滋?其实整个思路清晰且简单。这篇博客主要描述 GitLab CI 配置记录

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

首先就是需要了解 GitLab CI 的工作流程和配置,然后就是利用我之前写的懒人打包脚本 https://github.com/PBK-B/rn_build_apk_shell ,不过之前这个脚本是为了单纯的打个 Android APK 的安装包的,现在可能需要加一些需求了,第一个需求肯定就是 Upload APK 将我们的包直接发布到小火箭分发平台(目前这个小火箭内测分发平台是我们公司内部成品,暂不对外公开,所以这部分脚本我会再 GitHub 写上 TODO 注释的,有能力的小伙伴可以直接写上蒲公英的,有需求的话也可以直接 DD 我来写)还有一个就是打包 ios 的 ipa 安装包了(感觉又可以水一篇博客,哇哈哈哈哈)

开始配置 GitLab

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

在 GitLab 的项目详情页面选中 Settings 点击 CI / CD

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

找到 Runners 点击打开 Expand

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

这边看到配置步骤有,第一步下载安装 GitLab Runner(这个程序安装到需要执行打包的服务器或者电脑上,建议使用服务器,因为这个需要长时间挂着),第二步就是记住自己 GitLab 的 URL 地址(如果是自己搭建的私有 Gitlab 的话就需要用到这个,如果是 Gitlab 的话就直接是 https://gitlab.com/ ),第三步就是记住这个 token(待会使用 GitLab Runner 连接的时候需要用到),最后就是启动 GitLab Runner 程序了。

其实这里最主要是获取到这个 token。拿到 token 之后我们就开始再目标服务器上安装配置并运行 GitLab Runner 程序了。

GitLab Runner 官方文档:https://docs.gitlab.com/runner/install/index.html

我目前是使用自己电脑连接调试,由于我是 Mac OS 并且安装有 brew 于是我直接使用 brew 安装使用了。

brew install gitlab-runner
# 使用 brew 安装 gitlab-runner

brew services start gitlab-runner
# 启动运行 gitlab-runner

Linux 服务器的话可以用如下方法安装,其他服务器的话就需要自己去上面的官方文档下载安装相应的程序并且配置了

# Linux x86-64
sudo curl -L --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64"
# Linux x86
sudo curl -L --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386"
# Linux arm
sudo curl -L --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm"
# Linux arm64
sudo curl -L --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm64"
# Linux s390x
sudo curl -L --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-s390x"

# 将 gitlab-runner 程序下载到 /usr/local/bin/gitlab-runner 位置,请注意区分系统架构下载自己服务器架构的相应程序即可




sudo chmod +x /usr/local/bin/gitlab-runner

# 将 /usr/local/bin/gitlab-runner 给予可执行权限



sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
# 创建一个 GitLab Runner 用户



sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
sudo gitlab-runner start
# 安装服务并运行

安装成功启动的时候就需要输入相关的信息连接上我们的 GitLab 仓库了。

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

连接成功之后我们就能看到仓库里有我们的服务器连接上去了。就是在我们获取 token 的地方就能看到活跃的服务器列表

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

到这里我们就基本配置好了,现在可以开始写自动部署脚本了。

首先就是安装我们的打包脚本,GitHub地址:https://github.com/PBK-B/rn_build_apk_shell

执行脚本一键安装即可食用

/bin/bash -c "$(curl -fsSL https://github.com/PBK-B/rn_build_apk_shell/blob/master/install.sh)"

安装好之后在你的项目中添加 .gitlab-ci.yml 文件。

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

其中 /Users/tzmax/test.keystore 是我签名文件的目录,/Users/tzmax/ 是我的用户目录需要改成你的。AppBuildTest 的话就是我们上面启动的时候填写的 tags

stages:
  - archive

archive_project:
  stage: archive
  script:
    - cp /Users/tzmax/test.keystore ./android/app/
    - /bin/bash /Users/tzmax/data/ops/bale_apk.sh ./ -all
  artifacts:
    paths:
    - .build/Product
    - .build/Test
    expire_in: 2 h
  tags:
    - AppBuildTest

添加之后就提交代码,git push 上去就能看到自动编译的效果了。

GitLab CI 配置 React Native 自动构建打包 Android APK-天真的小窝

我这边显示执行失败的原因是我这里用的是打包脚本还有未完善的 apk 上传部分的脚本。实际上打包是已经跑通了。

那么今天的博客到这里就接近尾声了,大家如果觉得我的脚本写的还凑合的话不妨点亮点亮 Star 给个支持呢,谢谢大家的捧场,有需求或者建议欢迎提 issues…