vue前端使用Jenkins自動構(gòu)建項目，保姆級教程

這篇具有很好參考價值的文章主要介紹了vue前端使用Jenkins自動構(gòu)建項目，保姆級教程。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1. 開始前的準備工作

1臺服務(wù)器，1個鏡像倉庫，安裝docker
練習(xí)的話，服務(wù)器可以在[阿里云上](https://www.aliyun.com/?spm=5176.ecscore_.top-nav.dlogo.509a4df5JhX1PN)領(lǐng)取一個月免費ECS云服務(wù)器，如下圖

jenkins vue,前端,vue.js,jenkins
在阿里云控臺界面搜索容器鏡像服務(wù)

添加個人版的容器鏡像服務(wù)

然后在服務(wù)器上安裝docker使用下面兩個腳本文件
創(chuàng)建一個腳本 install_before_docker_env.sh

#!/usr/bin/env bash
#安裝docker腳本
echo '----安裝docker準備開始----'

echo '----安裝docker開始----'
#yum  install docker -y
curl -fsSL https://get.docker.com/ | sh
echo '----安裝docker結(jié)束----'

echo '----查看docker版本開始----'
docker --version
echo '----查看docker版本結(jié)束----'


echo '----更改docker 國內(nèi)鏡像原版本開始----'

#mkdir docker
mkdir -p /etc/docker
chmod -R 777 /etc/docker
sudo vi /etc/docker/daemon.json
#{
#
#“registry-mirrors”: [“http://hub-mirror.c.163.com”]
#
#}
systemctl restart docker.service
echo '----更改docker 國內(nèi)鏡像原版本結(jié)束----'

echo '----設(shè)置docker 開機啟動開始----'
systemctl start docker
systemctl enable docker
#這行不需要
#yum install -y yum-utils >   device-mapper-persistent-data >   lvm2
systemctl enable docker
echo '----設(shè)置docker 開機啟動結(jié)束----'




echo '----安裝docker準備結(jié)束----'

創(chuàng)建第二個腳本 install_docker-new.sh

#!/usr/bin/env bash
#安裝docker腳本
echo '----安裝docker準備開始----'

echo '----安裝docker開始----'
#yum  install docker -y
curl -fsSL https://get.docker.com/ | sh
echo '----安裝docker結(jié)束----'

echo '----查看docker版本開始----'
docker --version
echo '----查看docker版本結(jié)束----'


echo '----更改docker 國內(nèi)鏡像原版本開始----'

#mkdir docker
mkdir -p /etc/docker
chmod -R 777 /etc/docker
sudo vi /etc/docker/daemon.json
#{
#
#“registry-mirrors”: [“http://hub-mirror.c.163.com”]
#
#}
systemctl restart docker.service
echo '----更改docker 國內(nèi)鏡像原版本結(jié)束----'

echo '----設(shè)置docker 開機啟動開始----'
systemctl start docker
systemctl enable docker
#這行不需要
#yum install -y yum-utils >   device-mapper-persistent-data >   lvm2
systemctl enable docker
echo '----設(shè)置docker 開機啟動結(jié)束----'




echo '----安裝docker準備結(jié)束----'

在服務(wù)根目錄下創(chuàng)建一個install目錄將兩個腳本文件放入
cd到install目錄下，執(zhí)行ll看兩個文件是否有可執(zhí)行權(quán)限
下圖就是無權(quán)限的
jenkins vue,前端,vue.js,jenkins
沒有執(zhí)行權(quán)限的話，執(zhí)行命令，將兩個安裝docker腳本變?yōu)榭蓤?zhí)行權(quán)限

chmod u+x install_before_docker_env.sh
chmod u+x install_docker-new.sh

然后執(zhí)行ll，查看兩個文件名是否變?yōu)榫G色，變?yōu)榫G色即是可執(zhí)行
jenkins vue,前端,vue.js,jenkins
執(zhí)行兩個腳本文件，如果報下圖問題

 ./install_before_docker_env.sh
  ./install_docker-new.sh

jenkins vue,前端,vue.js,jenkins
則需一下操作

vim install_before_docker_env.sh

進入文件后，shift + ：
輸入命令

set ff=unix

然后按回車鍵保存，繼續(xù)shift + ：
輸入命令

wq

保存退出

install_docker-new.sh文件處理亦是如此

vim install_docker-new.sh

進入文件后，shift + ：
輸入命令

set ff=unix

然后按回車鍵保存，繼續(xù)shift + ：
輸入命令

wq

保存退出

然后執(zhí)行這兩個腳本，第一個執(zhí)行完后，執(zhí)行第二個

 ./install_before_docker_env.sh
 ./install_docker-new.sh

然后看到以下頁面，就代表腳本執(zhí)行成功了，現(xiàn)在等待兩個腳本執(zhí)行完畢
jenkins vue,前端,vue.js,jenkins
安裝完后，輸入命令

docker

出現(xiàn)下圖內(nèi)容，就代表docker已成功安裝
jenkins vue,前端,vue.js,jenkins
查看docker 是否啟動，如下圖所示則是已啟動

2.搭建 jenkins 服務(wù)

創(chuàng)建需要的目錄

mkdir -p /install/jenkins_home

授予最高權(quán)限，避免一些權(quán)限問題

chmod -R 777 /install/jenkins_home

運行服務(wù)

docker run -d --name jenkins -uroot -p 50001:8080 -p 50000:50000 --restart=always -e TZ=“Asia/Shanghai” -e JENKINS_OPTS="--prefix=/jenkins" -e JENKINS_ARGS="--prefix=/jenkins" --privileged=true -v /install/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime -v /usr/bin/docker:/usr/bin/docker -v /var/run/docker.sock:/var/run/docker.sock  -v /etc/sysconfig/docker:/etc/sysconfig/docker -v /usr/bin/docker-current:/usr/bin/docker-current  jenkins/jenkins

·
命令詳細解釋：
注意：千萬不要自己在jenkins/jenkins后面指定版本:lastest，他會使用最新版本，但是進入頁面配置賬戶那些的時候會出現(xiàn)中文亂碼的情況，并且和gitlab集成會出現(xiàn)url的不行的情況，就用這個 jenkins/jenkins就可以了，并且和gitlab集成沒有url不行的情況
docker run
-d #表示后臺運行（所有 docker 容器基本必須加的參數(shù)）
–name jenkins #表示該容器的名稱，必須是唯一·的值，不能重復(fù)，可以用它他來代替容器 id，更容易記憶，就類似于域名和 IP 的關(guān)系，用它可以代替容器 ID 刪除，或者停止容器服務(wù)
–restart always #能夠使我們在重啟 docker 時，自動啟動相關(guān)容器（所有 docker 容器基本必須加的參數(shù)）
-p 50001:8080 #用宿主機的 50001 端口映射容器內(nèi)部服務(wù)的 8080 端口（jenkins 服務(wù)的 web 界面服務(wù)端口，50001 可以換成任意宿主機開放的端口，-p 50000:50000 這個默認的不用改）
-e TZ=“Asia/Shanghai” #設(shè)置 jenkins 服務(wù)的的時區(qū)參數(shù)保證和宿主機時間一致
-v /etc/localtime:/etc/localtime #設(shè)置 jenkins 服務(wù)的的時區(qū)參數(shù)保證和宿主機時間一致
-e JENKINS_OPTS=“–prefix=/jenkins” -e JENKINS_ARGS=“–prefix=/jenkins” #設(shè)置 jenkins 服務(wù)的訪問項目名，如果后面要用到 nginx 代理 ip 端口進項訪問，那么這個必須要設(shè)置
-v /install/jenkins_home:/var/jenkins_home #將 jenkins 服務(wù)/var/jenkins_home 的文件以及目錄持久化到宿主機的/install/jenkins_home，可以便于我們對某些文件的操作，以及上傳一些文件到容器內(nèi)部使用
–privileged=true #權(quán)限，給容器賦予最高權(quán)限（所有 docker 容器基本必須加的參數(shù)，會減少很多不必要的權(quán)限錯誤）
jenkins/jenkins:latest # 指定鏡像的版本格式：倉庫地址/鏡像項名稱:鏡像版本號 latest 表示最新的版本號，如果沒有提前拉去鏡像，則會自動拉?。ㄋ?docker 容器基本必須加的參數(shù)）

驗證是否搭建成功：
訪問 http://服務(wù)器IP:50001/jenkins/,出現(xiàn)以下界面即運行成功
jenkins vue,前端,vue.js,jenkins
如果無法訪問，查看下服務(wù)器的50001端口是否放開，沒有開放需要開放下

在宿主機執(zhí)行

cat /install/jenkins_home/secrets/initialAdminPassword

獲取初始登錄密碼

jenkins vue,前端,vue.js,jenkins
選擇點擊安裝推薦的插件，耐心等待所有插件安裝完成

注冊一個非admin的用戶，后面可以用該用戶登錄操作jenkins，擁有和admin用戶的一樣的權(quán)限，保存完成，開始使用jenkins

安裝jenkins中文插件
jenkins vue,前端,vue.js,jenkins

在宿主機執(zhí)行

 docker restart jenkins

重啟jenkins，加載最新的插件，此時回到web界面應(yīng)該都是中文顯示了
jenkins vue,前端,vue.js,jenkins

3.安裝node環(huán)境

下載node.js的jenkins插件，按照下圖操作
jenkins vue,前端,vue.js,jenkins

配置全局node.js的版本，建議如果是最好用node14.17.2這個版本，這個版本適合vue2，vue3，react都可以打包，當然你也可以根據(jù)你自己的項目來決定，也可以像jdk一樣多裝幾個，如下圖配置，點擊下方的保存即可完成配置

4.安裝Publish Over SSH插件

可以幫助我們將打包的好的jar或者其他文件傳送到真正部署的主機，并且執(zhí)行我們一些腳本來啟動運行服務(wù)，因為一般部署服務(wù)的主機和打包的主機是不同，同樣單臺主機打包部署也支持發(fā)送相關(guān)文件，然后給配置over SSH插件
jenkins vue,前端,vue.js,jenkins
配置 over SSH步驟1：首頁==》系統(tǒng)管理==》系統(tǒng)配置，Passphrase：如果私鑰設(shè)置了密碼就是私鑰的密碼，私鑰沒設(shè)置密碼可以不填

配置 over SSH步驟2：在jenkins容器所在的宿主機（并非jenkins容器內(nèi)部==>親測容器內(nèi)部生成的無效）生成ssh密鑰和公鑰，公鑰發(fā)送到各個jenkins需要鏈接的服務(wù)器，這樣就可以可以實現(xiàn)免ssh賬號密碼登錄服務(wù)器
在宿主機執(zhí)行

ssh-keygen

生成公私鑰，默認生成在 /root/.ssh 目錄下面， id_rsa是私鑰文件， id_rsa.pub 是公鑰文件,
然后執(zhí)行

 ssh-copy-id -i /root/.ssh/id_rsa.pub -p 22 root@服務(wù)器IP

有的默認不是22端口需改成自己的端口，然后確認yes，輸入服務(wù)器的密碼即可，鏈接多個服務(wù)器就需要執(zhí)行多次該命令將文件發(fā)送到多個服務(wù)器【經(jīng)過驗證該公鑰和私鑰還是要在jenkins容器的宿主機上面進行，然后使用私鑰的內(nèi)容字符串，不用私鑰路徑進行】
jenkins vue,前端,vue.js,jenkins

執(zhí)行命令，將RSA公鑰里面的內(nèi)容復(fù)制下來

vim  /root/.ssh/id_rsa

jenkins vue,前端,vue.js,jenkins
把剛剛復(fù)制下來的公鑰文本放到Publish over SSH配置中，測試下是否可以連接

tips: 如果這里的SSH Servers Remote Directory 如果填了‘/’，則項目的configure 設(shè)置Transfers 與 Transfer Set的Remote Directory前面就不要加‘/’

5.安裝gitlab插件或者gitee插件

取決于你的代碼是用的哪個倉庫，如果都在用，這兩個插件都可以下載
jenkins vue,前端,vue.js,jenkins

6.新建一個自由風(fēng)格的項目

jenkins vue,前端,vue.js,jenkins

任務(wù)配置
配置源碼管理

構(gòu)建觸發(fā)器勾選Gitee webhook觸發(fā)構(gòu)建
jenkins vue,前端,vue.js,jenkins
點擊生成Gitee WebHook 密碼，復(fù)制備用

打開并登錄自己的gitee賬號，打開對應(yīng)的項目，點擊管理===》WebHooks===》添加 webHook

jenkins vue,前端,vue.js,jenkins

復(fù)制Jenkins任務(wù)地址，粘貼到gitee webhooks配置中

選擇你需要的node環(huán)境

Build Steps
點擊增加構(gòu)建步驟按鈕 選擇執(zhí)行shell

輸入shell命令

npm config set registry https://registry.npm.taobao.org
npm install yarn -g
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn
yarn run build

jenkins vue,前端,vue.js,jenkins
點擊增加構(gòu)建后操作步驟選擇Send build artifacts over SSH

配置Send build artifacts over SSH
依次輸入

dist/**/*
install/quesweb 
cd /install/quesweb

jenkins vue,前端,vue.js,jenkins
配置Transfer Set

nginx.conf文件源碼


#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
underscores_in_headers on;
    server {
        listen       80;
         server_name localhost;
		# underscores_in_headers on;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        #   location /wx-share {
        #          alias    /usr/share/nginx/html/dist/;
        #          index index.html index.htm index.php;
		# 	          try_files $uri $uri/ /wx-share/index.html;  #
        #     }
          location / {
                 alias    /usr/share/nginx/html/dist/;
                 index index.html index.htm index.php;
			          try_files $uri $uri/ /wx-share/index.html;  #
            }
    }
}

再添加一個Transfer Set配置
jenkins vue,前端,vue.js,jenkins
輸入命令

cd /install/quesweb
docker rm -f 容器名稱
docker build -t 鏡像地址:latest .
docker login -u=xxx registry.cn-shenzhen.aliyuncs.com -p=xxx
docker push 鏡像地址:latest
docker run -d -p 80:80 --name=容器名稱 鏡像地址:latest

里面鏡像地址，在阿里云容器鏡像服務(wù)中查看
jenkins vue,前端,vue.js,jenkins

Dockerfile文件源碼

#其中 pro 目錄就是vue在本地打包出來的一個目錄，名字可以隨便取
# 設(shè)置基礎(chǔ)鏡像
FROM nginx
# # 定義作者
# MAINTAINER kl
# 將當前Dockerfile文件同級的的pro文件夾復(fù)制到容器內(nèi)部 /usr/share/nginx/html/pro 這個目錄下面
#容器內(nèi)部中如果這個目錄不存在，會自動創(chuàng)建pro目錄
 COPY dist  /usr/share/nginx/html/dist
# COPY dist  /usr/share/nginx/html/dist
#將當前Dockerfile文件同級的nginx.conf文件拷貝到容器內(nèi)部的 /etc/nginx/nginx.conf
#如果沒有會創(chuàng)建，如果有會覆蓋
COPY nginx.conf /etc/nginx/nginx.conf
#輸出一句話 表示完成
RUN echo 'echo init ok!!'

EXPOSE 80

此時到這里前端自動化就基本完成了，現(xiàn)在可以執(zhí)行試試
jenkins vue,前端,vue.js,jenkins
可以在控制臺查看日志

可以勾選項目配置里的保留構(gòu)建的依賴日志，方便查看構(gòu)建時的日志記錄

可以勾選Verbose output in console，方便查看SSH的輸出

看到這個快樂的小太陽就代表你構(gòu)建成功啦
jenkins vue,前端,vue.js,jenkins