一、環(huán)境

部署環(huán)境為Ubuntu18.04版本

二、下載docker

1.安裝命令
    sudo apt-get install docker-ce
2.啟動(dòng)
    sudo systemctl start docker
3.檢查是否成功
    docker --version

三、下面所需用到的docker命令

1.查找鏡像名稱

        docker search 鏡像名稱

2.查看本地鏡像
        docker images 

3.遠(yuǎn)程倉庫拉鏡像
        docker pull 鏡像名

4.使用鏡像生成容器
        docker run 鏡像名

5.進(jìn)入容器

        docker exec -it 容器ID /bin/bash:進(jìn)入容器

6.退出容器
        ctrl+P+Q

7.  刪除所有容器

       docker rm $(docker ps -a -q)

8.重新啟動(dòng)已停止的容器

        docker start 容器名(也可以使用容器ID)

附：常用參數(shù)

        -i：以交互模式運(yùn)行容器，通常與 -t 同時(shí)使用
        -t：為容器重新分配一個(gè)偽輸入終端，通常與 -i 同時(shí)使用
        -p : 端口映射 格式為[主機(jī)端口：容器端口]
        -d : 后臺(tái)模式運(yùn)行
        -name : 給容器一個(gè)新的名稱
        -v：掛載主機(jī)的目錄
        -e： username="ritchie": 設(shè)置環(huán)境變量
        -m：設(shè)置容器使用內(nèi)存最大值
        --env-file=[]：從指定文件讀入環(huán)境變量

四、拉取并創(chuàng)建Jenkins鏡像和做對應(yīng)的配置

1.拉取jenkins

docker pull  jenkins/jenkins  

2.查看拉取

docker pull  jenkins/jenkins  

3.啟動(dòng)jenkins

docker run -it -p 9090:8080 -v /opt/jenkinsData:/var/jenkins_home --name jenkensTest jenkins/jenkins

注：

• -p 9090:8080    是將8080端口映射到9090端口
• -v /opt/jenkinsData:/var/jenkins_home  是將jenkins工作目錄映射到服務(wù)器/opt/jenkinsData目錄下

4.查看訪問jenkins（服務(wù)器ip+映射端口）http://服務(wù)器ip:9090/

5.如圖所示將管理員密碼復(fù)制到輸入框（管理員密碼將在啟動(dòng)jenkins生成）

6.點(diǎn)擊繼續(xù)后進(jìn)入安裝所需插件頁面，默認(rèn)選擇推薦插件點(diǎn)擊安裝

7.安裝好后，創(chuàng)建用戶（記住密碼和用戶以后登錄要用）

填寫完成點(diǎn)擊保存并完成

8.實(shí)例配置（一般默認(rèn)）點(diǎn)擊保存并完成即可

9.開始使用jenkins（完成jenkins安裝配置）

五、安裝node和 Generic Webhook Trigger 插件

1.點(diǎn)擊Manage Jenkins

2.選擇Plugins

3.選擇Available plugins勾選node并點(diǎn)安裝

同樣步驟安裝Generic Webhook Trigger

安裝成功如下圖所示

4.配置node

在Manage Jenkins中選擇tools

然后點(diǎn)擊新增node

選擇版本和項(xiàng)目使用版本一致避免打包報(bào)錯(cuò)然后保存應(yīng)用

注：需要填寫別名用來區(qū)分不同版本

六、配置自動(dòng)打包（新建item）

1.選擇新建item

2.選擇Freestyle project和填寫任務(wù)名稱

點(diǎn)擊確定進(jìn)入任務(wù)配置

3.任務(wù)配置（General）

General中填寫描述和勾選丟棄舊的構(gòu)建

配置git賬號(hào)和密碼

選擇配置的賬號(hào)信息        

4.任務(wù)配置（源碼管理）

源碼管理需要填寫git提交代碼地址

注：指定分支（為空時(shí)代表any）具體打包分支以自己代碼需部署為準(zhǔn)

4.任務(wù)配置（Triggers）

配置Triggers

4.1 勾選Generic Webhook Trigger

4.2配置token

先點(diǎn)擊save保存一下配置

點(diǎn)擊設(shè)置進(jìn)入Manage Jenkins然后點(diǎn)擊Users

點(diǎn)擊用戶列表中設(shè)置

 點(diǎn)擊Security在點(diǎn)擊生成新的Token

輸入名稱并得到token

4.3設(shè)置token

復(fù)制設(shè)置的token然后回到任務(wù)列表在名稱中點(diǎn)擊配置繼續(xù)配置

將得到的token填入token輸入框中

5.任務(wù)配置（Environment）

勾選Provide Node & npm bin/ folder to PATH并選擇之前配置的node（項(xiàng)目所使用的node版本）

6.任務(wù)配置（Build Steps）

在增加構(gòu)建步驟中選擇執(zhí)行shell

填寫shll腳本

cd /var/jenkins_home/workspace/testAutoBuild
node -v
npm -v
echo '開始安裝依賴'
npm i
echo '依賴安裝完畢'
echo '開始打包'
npm run build
echo '打包完畢'

注： cd /var/jenkins_home/workspace/testAutoBuild   /var/jenkins_home/workspace后面必須為配置的任務(wù)名稱不然打包報(bào)錯(cuò)（cd /var/jenkins_home/workspace/任務(wù)名稱）

7.測試配置

點(diǎn)擊構(gòu)建即可實(shí)現(xiàn)拉取代碼并打包

可選擇在控制臺(tái)查看構(gòu)建流程日志

構(gòu)建成功

8.查看打包

在服務(wù)器映射文件夾中查看拉取代碼及打包（文件地址為啟動(dòng)jenkins配置映射的地址）

具體地址在workspace+任務(wù)名稱及映射地址+workspace+任務(wù)名稱即可

9.配置nginx (服務(wù)器端口為8003)

  server {
    		listen       8003;
        server_name  localhost;
    		root   /opt/jenkinsData/workspace/testAutoBuild/dist;  
    		
         add_header 'Access-Control-Allow-Origin' '*';
         add_header 'Access-Control-Allow-Credentials' 'true';
         add_header 'Access-Control-Allow-Headers' 'Origin,X-Requested-Width,Content-Type,Accept';
         add_header 'Access-Control-Allow-Methods' '*';
         if ($request_method = 'OPTIONS') {
               return 204;
         }
        #解決Router(mode: 'history')模式下，刷新路由地址不能找到頁面的問題
        location / {
		    index index.html index.htm index.php;
  			try_files $uri $uri/ /index.php?$query_string;
              if (!-e $request_filename) {
                  rewrite ^(.*)$ /index.html?s=$1 last;
                  break;
              }
          }


        location ~ \.php(.*)$  {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

將root文件地址配置為打包dist路徑即可

測試

七、在gitee中配置WebHooks（實(shí)現(xiàn)push后自動(dòng)構(gòu)建）

1.在所配置項(xiàng)目git上選擇管理

2.在管理中找到WebHooks并選擇添加WebHooks

3.配置觸發(fā)鏈接及密碼

•  觸發(fā)鏈接為http://JENKINS_URL/generic-webhook-trigger/invoke?token=TOKEN_HERE
• http://服務(wù)器地址:Jenkens映射端口/generic-webhook-trigger/invoke?token=TOKEN_HERE
• TOKEN_HERE為之前配置的token（如下圖所示）

如：http://127.0.01:9090/generic-webhook-trigger/invoke?token=11e90c04d5cbf6ab3034cb749316f27f81

webhook密碼為Jenkens登錄密碼

配置成功后push即可實(shí)現(xiàn)自動(dòng)化構(gòu)建

八、優(yōu)化

為了避免出現(xiàn)打包過程中出現(xiàn)403現(xiàn)象

在shell腳本中將打包后的代復(fù)制到其他文件夾就可以避免在打包過程中刪除dist目錄出現(xiàn)網(wǎng)站403

cd /var/jenkins_home/workspace/testAutoBuild
node -v
npm -v
echo '開始安裝依賴'
npm i
echo '依賴安裝完畢'
echo '開始打包'
npm run build
echo '打包完畢'
echo '準(zhǔn)備部署'
cp -r /var/jenkins_home/workspace/testAutoBuild/dist/* /var/jenkins_home/workspace/web/testAutoBuild
echo '部署完成'

只需要添加 cp -r /var/jenkins_home/workspace/testAutoBuild/dist/* /var/jenkins_home/workspace/web/testAutoBuild

注：需要在映射文件夾創(chuàng)建好web文件夾和web文件夾下新建號(hào)testAutoBuild文件夾并設(shè)置可讀寫權(quán)限

修改后需重新修改nginx配置文件路徑

總結(jié) 

到此這篇關(guān)于前端實(shí)現(xiàn)自動(dòng)化部署docker+Jenkins的文章就介紹到這了,更多相關(guān)前端自動(dòng)化部署docker Jenkins內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論