利用Jenkins对ReactNative进行自动化打包

一、有用的网址

jenkins官网：https://jenkins.io/
jenkins中文档：https://jenkins.io/zh/doc/

二、常用命令

• 安装最新版本: brew install jenkins-lts
• 安装指定版本: brew install jenkins-lts@YOUR_VERSION
• 启动服务: brew services start jenkins-lts
• 重启服务: brew services restart jenkins-lts
• 停止服务：brew services stop jenkins-lts
• 更新jenkins版本: brew upgrade jenkins-lts

三、Mac下安装

• 打开任意一个命令行
• 执行安装命令：brew install jenkins-lts ，可能会等待一段时间。可能会出现下列错误：

Error: The following directories are not writable by your user:
/usr/local/lib

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/lib

And make sure that your user has write permission.
  chmod u+w /usr/local/lib

按提示执行两个命令即可。

sudo chown -R $(whoami) /usr/local/lib
chmod u+w /usr/local/lib

• 打开jenkins服务，brew services start jenkins-lts

• 访问jenkins页面，浏览器打开，http://localhost:8080，出现如下：
  

  image.png
  这里不是输入Mac的密码，而是找到图中红色文件夹地址的文件，里面有个密码，粘贴到这里。点击继续，出现如下
  image.png

• 我选择的：安装推荐的插件，然后就开始安装插件过程，要等一会儿。

  
  image.png

• 安装完成后，出现如下，创建账号,自己填入，保存并完成。

  
  image.png

• 然后出现。

  
  image.png
  

  直接默认，保存并完成

  
  image.png
  点击开始使用，出现如下：

image.png

四、配置环境变量

一些命令行的工具，在后续会用到，如npm、node等

• 在命令行中： echo $PATH,会列出当前电脑的环境变量，复制。

• 打开jenkins

  
  image.png
  image.png
  

  输入完成，记得页面下方有保存，否则等于没填写。

五、配置邮件

image.png
image.png
image.png

打开163邮箱：

image.png
然后根据提示进行授权，会让你填写一个授权码，将这个授权码填写到jenkins配置那里。
然后点击右下角的：Test configuration ,测试配置是否成功。
image.png

六、打包Android，需要配置JDK和Gradle

image.png
image.png

这里配置了Gradle

image.png
那么在项目配置页面才可以显示出这个版本，如下（暂且知道，后面会有）：
image.png

配置完后，记得保存。

七、New Item 创建一个新的任务

image.png

输入名字，选择Freestyle project，点击ok。

image.png

在出现的页面内，要配置这六项。

• General，项目描述和项目地址

  
  image.png

• 项目源码，我用的是github的一个项目，Credentials是github的用户名密码，master是分支

  
  image.png

• Build，由于是rn项目，因此需要用到一些命令行的东西。点击Add build step，Execute shell ，添加一些脚本

  
  image.png

脚本1:设定utf-8

image.png

export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8
export LC_ALL=en_US.UTF-8

再添加脚本2:npm安装一些包

image.png

cd /Users/用户名/.jenkins/workspace/RNWebAppDemo
npm install --save react react-native
npm install
react-native link

再添加脚本3:创建输出目录

image.png

if [ ! -d "/Users/用户名/.jenkins/workspace/RNWebAppDemo/output" ]; then

mkdir /Users/用户名/.jenkins/workspace/RNWebAppDemo/output

fi

由于我主要打包Android，因此再添加gradle配置：

image.png

配置gradle用了我好长时间，注意版本要与你的项目一致，重点是前面的配置jdk和gradle，回倒那里去看看。

image.png
再添加脚本4:对于apk的输出目录
image.png

dir="/Users/用户名/.jenkins/workspace/RNWebAppDemo/android/app/build/outputs/apk"
diectdir="/Users/用户名/.jenkins/workspace/RNWebAppDemo/output"
ls -al $dir|grep -v "^d"|sed -e 1d|awk '{print $9}'|while read i
do
cp $dir/$i $diectdir
done

• 最后通知邮件

  
  image.png
• 注意最下面的Save保存

打包

image.png
image.png

打包失败后：点击这里

image.png
显示：
image.png