前端持续集成环境搭建

2020年02月19日留言

jenkins + nginx 实现持续集成

搭建jenkins

jenkins 是一个开源持续集成工具，安装非常简单，为了管理方便，这里使用 docker 进行安装。

安装 docker

centos 安装 docker

1	sudo yum install docker

启动 docker 服务

1	sudo systemctl start docker

安装 jenkins

创建 jenkins 数据持久化目录

1
2
3

sudo mkdir -p /data
sudo chmod 777 /data
mkdir -p /data/jenkins_home

通过docker容器安装jenkins

docker run \
  -u root \
  --rm \
  --name jenkins-server \
  -d \
  -p 8080:8080 \
  -p 50000:50000 \
  -v /data/jenkins_home:/var/jenkins_home \
  -v /var/run/docker.sock:/var/run/docker.sock \
  registry.cn-hangzhou.aliyuncs.com/hzero-cli/jenkins

关于 docker 命令的学习可以看这里 👉 Docker 命令大全

-w470

上面命令运行完成之后我们就已经成功运行了 jenkins 服务

我们可以打开地址 https://centos服务器ip:8080，可以看到 jenkins 的界面。

这里的 centos服务器ip 就是你自己的服务器 ip，在这个教程里面，我们演示的服务器ip是 172.22.0.4。

-w1091

接下来我们需要获取jenkins初始化密码。

1 2	docker exec -it jenkins-server \ cat /var/jenkins_home/secrets/initialAdminPassword

-w455

这里返回的一段字符串6c46ccc61c804279a1017b743ab22aa4就是我们需要的密码

输入密码之后，选择安装初始化的插件

-w1013
-w997
插件安装好之后，系统会提示你设置用户名密码，当然你也可以不设置，直接用 admin 账号。重新进入 jenkins 界面。
-w689
点击输入账号里面，这里的密码就是上文获取到的 jenkins 初始化密码 6c46ccc61c804279a1017b743ab22aa4，点击登录，进入系统:
-w696

到此为止。jenkins 就算是安装好了

我们如果想要卸载 jenkins 的话，只需要运行 docker rm -f jenkins-server 就可以了。

因为我们配置了 jenkins 数据持久化的目录 /data/jenkins_home，只要这个文件夹还在，jenkins 配置就可以一直保留，下次想运行 jenkins 是，运行上文安装 jenkins 的 docker run 命令就可以恢复 docker 运行了。

配置 jenkins 的 nodejs 插件

安装完 jenkins 之后，需要配置一下 nodejs 插件，后面才能让 jenkins 跑前端持续集成任务。

点击 系统管理 进入 jenkins 系统管理页面
-w315

点击 插件管理 进入插件管理
-w1021

进入 可选插件 选项卡，搜索并安装 nodejs 插件
-w1120

勾选 安装完成后重启选项，安装完插件之后 jenkins 会 自动重启

-w554

进入 全局工具配置 配置 nodejs 全局工具

-w931

点击 新增 NodeJS 按键新增一个 nodejs 全局工具，勾选 自动安装

15821185123655

注意:

安装 nodejs 时需要安装两个 node 全局命令 yarn 和 lerna, 然后点击保存。

测试 nodejs 插件

我们安装完了 nodejs 插件之后，先回到首页新建一个 jenkins 任务测试一下 nodejs。

点击 创建一个新任务 打开任务编辑界面
-w630
选择 构建自由风格的软件项目，输入一个任务名字test-node-demo:
-w718

在构建环境这里选择我们刚刚配置的 nodejs 全局工具

-w734

在构建这里点击 增加构建步骤 ，在弹出的选项中选择 执行shell ：

-w359

在命令输入框中输入,然后点击保存按钮

1 2	node -e 'console.log("Hello Hzero!");' node --version

-w758

然后点击这个任务的 立即构建 按钮

构建时，在下面会出现一个进度条，点击进度条可以看执行的日志

-w624

进入日志之后，将看到看到如下信息

-w1061

到此，nodejs 插件测试成功！

安装 nginx

centos 安装 nginx 也非常简单，一句命令 sudo yum install nginx 就能搞定，但是这样安装 nginx 之后，配置管理和nginx升级都比较麻烦，所以我们这里用 docker 来安装 nginx 。

这里我们先定义两个文件目录，用来保存 nginx 的部署文件和 nginx 的配置

/data/nginx/wwwroot nginx 的部署文件夹
/data/nginx/nginx_hzero.conf hzero 的 nginx 配置

首先创建 nginx 数据持久化文件夹和配置保存文件夹,

1 2	sudo mkdir -p /data/nginx/wwwroot sudo mkdir -p /data/nginx/cfg

-w380

创建 nginx 配置文件, 保存在 /data/nginx/cfg/nginx_hzero.conf

在命令行运行下面命令：

# /data/nginx/cfg/nginx_hzero.conf

sudo -s # 进入root用户模式

cat > /data/nginx/cfg/nginx_hzero.conf << END

server {
    listen       80;
    server_name  localhost;
    root   /usr/share/nginx/html/dist;
    
    location / {
      try_files \$uri /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html/dist;
    }

    # Media: images, icons, video, audio, HTC
    location ~* \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
    }

    # CSS and Javascript
    location ~* \.(css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
    }
}

END

-w590

运行nginx镜像

docker run \
  -u root \
  --rm \
  --name nginx \
  -d \
  -p 40080:80 \
  -v /data/nginx/cfg/:/etc/nginx/conf.d/ \
  -v /data/nginx/wwwroot/:/usr/share/nginx/html/ \
  nginx

-w458

添加测试文件

1 2	sudo mkdir -p /data/nginx/wwwroot/dist sudo echo Hello Nginx > /data/nginx/wwwroot/dist/test.txt

测试 nginx 运行效果

1	curl http://172.22.0.4:40080/test.txt

-w472

如果能显示 Hello Nginx 说明 nginx 安装成功

配置 jenkins 持续集成任务

构建

配置 jenkins 任务之前，我们先准备一个 hzero-front 工程的代码仓库地址：
https://code.choerodon.com.cn/hft/hzero-front-demo.git

回到 jenkins 首页新建一个 jenkins 任务。

点击 创建一个新任务 打开任务编辑界面
-w630
选择 构建自由风格的软件项目，输入一个任务名字hzero-front-ci:

点击保存后会进入任务编辑页面：

-w1054

在任务编辑界面的源代码管理选择 git 选项
安装图片填写下面信息：

Repository URL：输入代码库地址（https://code.choerodon.com.cn/hft/hzero-front-demo.git）
Credentials：添加 code.choerodon.com.cn 的账号密码

在编译环境设置里面勾选上 nodejs 工具。

-w980

添加一个构建步骤 执行 shell
-w515

输入下面的 shell 脚本:

yarn install

cat > src/config/.env.production.yml.local  << END
BASE_PATH: /
PLATFORM_VERSION: SAAS
CLIENT_ID: localhost
GENERATE_SOURCEMAP: false
API_HOST: http://backend.hft.jajabjbj.top
WEBSOCKET_HOST: ws://ws.hft.jajabjbj.top
SKIP_TS_CHECK_IN_START: false
ENABLE_VUE_SUPPORT: false
SKIP_ESLINT_CHECK_IN_START: false
END
yarn run build:production
tar -zcf dist.tar.gz ./dist

-w961

点击保存。

下一步然后点击立即构建，这里会构建并生成 dist 文件

-w711

部署

构建完成生成了 dist 文件，下一步我们要把构建生成的文件部署到 nginx 的 www 目录 /data/nginx/wwwroot

接下来我们配置一下 dist 部署流程

部署通常都是指把构建好的 dist 文件部署到远程服务器，部署的方法有很多，比如 ftp、构建 docker等、ssh ，这里我们演示一下如何通过 ssh 远程部署 dist 文件到 nginx 服务器上。

首先我们需要安装一个 jenkins 插件 Publish Over SSH。

-w814

插件的安装方法上文中有提到，这里就不再赘述。

安装好之后，打开 系统管理 > 配置中心
-w793

把 nginx 服务器的信息添加到 Publish Over SSH 的 ssh 配置。

-w1413

对关键配置项的解释：

name: 给服务器起一个名字，在后面设置任务时会用到这个名字。
Hostname: sshd 服务器的ip地址, 也就是 nginx 服务器ip地址。
Remote Directory: 这里是设置服务器上传目录，由于在 jenkins 任务里面可以配置，为了不引起误解，这里设置成 / 就可以了。
Passphrase/Password: 这里是服务器 ssh 登录密码，如果是通过私钥连接服务器，可以不输入密码。
Key: 这里是服务器的私钥文件内容。如果你是通过密码连接 ssh 服务器的话，可以不填私钥。

然后打开我们刚刚创建的 jenkins 任务，点击配置按钮，进入任务编辑页面。

-w500

到 Post-build Actions 配置部分添加一个构建后的部署流程。
-w651

然后输入相应的配置

-w968

对关键配置项的解释：

name: 上文在 系统管理 > 配置中心 中配置的 ssh 服务器名字。
Source files: 制定上传到服务器的文件，注意这里的文件是上面我们配置的构建脚本产生的文件。
Remote directory: 这个是上传到远程服务器位置，上传上去的文件还是一个压缩包，后面还有在这个目录下执行节约命令
Exec command: 在远程服务器上执行的 shell 命令

1
2
3

cd /data/nginx/wwwroot
sudo rm -rf dist
sudo tar -zxf dist.tar.gz

然后点击保存，再构建一次。
-w1156

看下构建日志。提示发布成功。

-w525

然后我们可以在浏览器输入一下 nginx 服务器地址，试试服务是否成功。

配置自动持续集成

如果想实现完全自动的持续集成，还需要配置一个地方

打开任务配置设置一个触发选项 Poll SCM，设置 Schedule 规则为: H/15 * * * *

-w1229

这里配置项的意思是：每 15 分钟检查一次 git 源代码仓库是否有新的变更，如果有就执行构建任务。

关于 cronjob 表达式的学习

jenkins + gh-pages 实现持续集成

如果没有 nginx 服务器，我们也可以把 dist 部署到 gh-pages 上。

考虑到 github 的 gh-pages 网速在国内有些慢，本教程就用国内的 gitee 做一个示范。

gitee网站: https://gitee.com/

首先我们在 gitee 上面注册好账号，然后再创建一个代码仓库。

-w786

我们可以得到一个代码仓库地址：https://gitee.com/hzero-cli/hzero-front-demo-dist.git

部署到 gh-pages 上面我们需要用到一个 npm 工具

gh-pages: gh-pages 文档地址

把这个工具配置到 nodejs 的全局工具上面：

-w910

配置好工具之后，开始创建 jenkins 任务。

为了简便，我们基于之前的持续集成任务创建一个新的持续集成任务。

点击 新建任务 按钮
-w670

为任务起一个新名字： hzero-front-ci-gitee

-w1074

注意这里我们要选择 Copy from, 输入前面创建的任务名字：hzero-front-ci

点击 ok ，进入构建配置部分。
-w1201

修改构建脚本，添加 gh-pages 部署命令：

1
2
3

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
gh-pages -r https://hzero-cli:abcd1234@gitee.com/hzero-cli/hzero-front-demo-dist.git   -b gh-pages   -d dist

然后删除从 hzero-front-ci 任务复制过来的 ssh部署配置

保存，点击立即构建。

这样构建生成的 dist 就可以发布到 gitee 代码仓库了。

-w820

这里会多一个分支，就是我们部署上去的文件。

接下来我们需要给 gitee 代码仓库设置一下 gh-pages 的 http 服务。

点击服务 > Gitee Pages

-w973

设置部署分支为 gh-pages ,然后点击开始按钮

运行成功之后，我们得到一个 http 访问地址：http://hzero-cli.gitee.io/hzero-front-demo-dist/

但是访问时， console 还是会报错:

-w1147

这是因为 gitee 的 gh-pages 提供的 http 地址有一个根路径(public_path)。

所以我们修改一下构建的环境变量，打开任务的构建配置修改环境变量：

1 2	PUBLIC_URL: /hzero-front-demo-dist/ BASE_PATH: /hzero-front-demo-dist/

注意一下 BASE_PATH 和 PUBLIC_URL 的区别。

PUBLIC_URL : 会影响资源加载路径，在资源加载路径前面加一层根路径。
BASE_PATH : 会影响浏览器的地址栏根路径。在地址栏显示的地址上加一层根路径。

虽然 BASE_PATH 不会影响资源加载路径，但是我们进入页面之后刷新，必须浏览器的地址栏是以 http://hzero-cli.gitee.io/hzero-front-demo-dist/ 为前缀，所以要加一下 BASE_PATH 的配置。

清除构建缓存，然后点击重新构建
-w369

注意: 由于 hzero-cli 默认开启了增量更新，所以修改了环境变量之后，需要清空当前构建任务的缓存。

如果你访问页面，第二次刷新还会有 404 的问题

这是因为我们 gh-pages 和 nginx 配置不一样。
nginx 上面配置了一段代码：

1
2
3

location / {
  try_files $uri /index.html;
}

有了这段代码，服务器就会路径找不到的http请求重新定位到 /index.html

但是 gh-pages 的原理是: 如果当前 http 请求路径定位不到仓库的文件，就返回 404.html 的内容。

所以为了能让页面正常显示，我们还需要在脚本构建完成之后加一行代码 cp dist/index.html dist/404.html
让浏览器能获取到 index.html 。

最后脚本修改如下：

yarn install
cat > src/config/.env.production.local.yml  << END
PUBLIC_URL: /hzero-front-demo-dist/
BASE_PATH: /hzero-front-demo-dist/

PLATFORM_VERSION: SAAS
CLIENT_ID: localhost
GENERATE_SOURCEMAP: false
API_HOST: http://backend.hft.jajabjbj.top
WEBSOCKET_HOST: ws://ws.hft.jajabjbj.top
SKIP_TS_CHECK_IN_START: false
ENABLE_VUE_SUPPORT: false
SKIP_ESLINT_CHECK_IN_START: false

END

yarn run build:production
cp dist/index.html dist/404.html

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
gh-pages-clean
gh-pages -r https://hzero-cli:abcd1234@gitee.com/hzero-cli/hzero-front-demo-dist.git \
  -b gh-pages \
  -d dist

清除构建缓存之后，点击重新构建, 构建成功会自动部署，部署完成之后就可以访问： http://hzero-cli.gitee.io/hzero-front-demo-dist 了

原文链接: http://blog.jajabjbj.top/2020/02/19/2020-02-19/

版权声明: 转载请注明出处.

jajabjbj.top教技十三

有理想的码农