一、環(huán)境

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

二、下載docker

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

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

1.查找鏡像名稱

        docker search 鏡像名稱

2.查看本地鏡像
        docker images 

3.遠程倉庫拉鏡像
        docker pull 鏡像名

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

5.進入容器

        docker exec -it 容器ID /bin/bash:進入容器

6.退出容器
        ctrl+P+Q

7.  刪除所有容器

       docker rm $(docker ps -a -q)

8.重新啟動已停止的容器

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

附：常用參數

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

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

1.拉取jenkins

docker pull  jenkins/jenkins  

2.查看拉取

docker pull  jenkins/jenkins  

3.啟動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工作目錄映射到服務器/opt/jenkinsData目錄下

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

5.如圖所示將管理員密碼復制到輸入框（管理員密碼將在啟動jenkins生成）

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

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

填寫完成點擊保存并完成

8.實例配置（一般默認）點擊保存并完成即可

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

五、安裝node和 Generic Webhook Trigger 插件

1.點擊Manage Jenkins

2.選擇Plugins

3.選擇Available plugins勾選node并點安裝

同樣步驟安裝Generic Webhook Trigger

安裝成功如下圖所示

4.配置node

在Manage Jenkins中選擇tools

然后點擊新增node

選擇版本和項目使用版本一致避免打包報錯然后保存應用

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

六、配置自動打包（新建item）

1.選擇新建item

2.選擇Freestyle project和填寫任務名稱

點擊確定進入任務配置

3.任務配置（General）

General中填寫描述和勾選丟棄舊的構建

配置git賬號和密碼

選擇配置的賬號信息        

4.任務配置（源碼管理）

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

注：指定分支（為空時代表any）具體打包分支以自己代碼需部署為準

4.任務配置（Triggers）

配置Triggers

4.1 勾選Generic Webhook Trigger

4.2配置token

先點擊save保存一下配置

點擊設置進入Manage Jenkins然后點擊Users

點擊用戶列表中設置

 點擊Security在點擊生成新的Token

輸入名稱并得到token

4.3設置token

復制設置的token然后回到任務列表在名稱中點擊配置繼續(xù)配置

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

5.任務配置（Environment）

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

6.任務配置（Build Steps）

在增加構建步驟中選擇執(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后面必須為配置的任務名稱不然打包報錯（cd /var/jenkins_home/workspace/任務名稱）

7.測試配置

點擊構建即可實現(xiàn)拉取代碼并打包

可選擇在控制臺查看構建流程日志

構建成功

8.查看打包

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

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

9.配置nginx (服務器端口為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（實現(xiàn)push后自動構建）

1.在所配置項目git上選擇管理

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

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

•  觸發(fā)鏈接為http://JENKINS_URL/generic-webhook-trigger/invoke?token=TOKEN_HERE
• http://服務器地址: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即可實現(xiàn)自動化構建

八、優(yōu)化

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

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

cd /var/jenkins_home/workspace/testAutoBuild
node -v
npm -v
echo '開始安裝依賴'
npm i
echo '依賴安裝完畢'
echo '開始打包'
npm run build
echo '打包完畢'
echo '準備部署'
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文件夾下新建號testAutoBuild文件夾并設置可讀寫權限

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

總結 

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

最新評論