一、環(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.查找鏡像名稱(chēng)

        docker search 鏡像名稱(chēng)

2.查看本地鏡像
        docker images 

3.遠(yuǎn)程倉(cāng)庫(kù)拉鏡像
        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è)新的名稱(chēng)
        -v：掛載主機(jī)的目錄
        -e： username="ritchie": 設(shè)置環(huán)境變量
        -m：設(shè)置容器使用內(nèi)存最大值
        --env-file=[]：從指定文件讀入環(huán)境變量

四、拉取并創(chuàng)建Jenkins鏡像和做對(duì)應(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.查看訪(fǎng)問(wèn)jenkins（服務(wù)器ip+映射端口）http://服務(wù)器ip:9090/

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

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

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

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

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

9.開(kāi)始使用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)用

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

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

1.選擇新建item

2.選擇Freestyle project和填寫(xiě)任務(wù)名稱(chēng)

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

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

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

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

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

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

源碼管理需要填寫(xiě)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)擊用戶(hù)列表中設(shè)置

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

輸入名稱(chēng)并得到token

4.3設(shè)置token

復(fù)制設(shè)置的token然后回到任務(wù)列表在名稱(chēng)中點(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

填寫(xiě)shll腳本

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

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

7.測(cè)試配置

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

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

構(gòu)建成功

8.查看打包

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

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

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')模式下，刷新路由地址不能找到頁(yè)面的問(wèn)題
        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路徑即可

測(cè)試

七、在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)打包過(guò)程中出現(xiàn)403現(xiàn)象

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

cd /var/jenkins_home/workspace/testAutoBuild
node -v
npm -v
echo '開(kāi)始安裝依賴(lài)'
npm i
echo '依賴(lài)安裝完畢'
echo '開(kāi)始打包'
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è)置可讀寫(xiě)權(quán)限

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

總結(jié) 

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

最新評(píng)論