<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          docker+Jenkins+nginx實現(xiàn)前端自動部署詳細(xì)教程

          共 6351字,需瀏覽 13分鐘

           ·

          2021-12-11 14:32

          點擊上方?前端Q,關(guān)注公眾號

          回復(fù)加群,加入前端Q技術(shù)交流群

          本文來自交流群的管理員,亞北大佬的投稿,感謝亞北~

          本次部署大概步驟如下:

          1. 準(zhǔn)備環(huán)境
          2. 安裝docker
          3. 安裝docker-compose
          4. 安裝Jenkins和Nginx
          5. 編寫配置文件
          6. 配置Jenkins
          7. 配置Jenkins構(gòu)建任務(wù)

          背景

          阿里云雙11大促買了個服務(wù)器玩一玩,買之前很激動,買了之后,emmmm我用它能干嘛

          找我干運維的好兄弟問一問,好兄弟也對我想做的事情很疑惑

          所以我稀里糊涂買了服務(wù)器但是并沒有想好用它來做什么

          如果像我一樣買了之后不知道干嘛,實在不行還可以部署一下自己的網(wǎng)站嘛,博客是用hexo寫的,hexo這個東西適合想擁有自己的博客但是又沒什么想法的同學(xué)

          它提供了非常多的精美的模板,可以選擇自己喜歡的模板,一鍵生成自己的博客

          hexo生成的靜態(tài)的html頁面,所以我只需要在服務(wù)器配置一個Nginx服務(wù),然后再把我的資源文件扔上去就行

          但是,但是,如果僅僅是這樣來部署,那也太簡單了,不如讓它更加的自動化

          所以我想要每次我對文件更改完成后讓服務(wù)器自動幫我完成部署的事情,

          而不是每次手動打包,上傳,解壓,等等......這一系列的操作時間長了那可真是受不了

          所以我的需求也漸漸的清晰明了起來,要有Nginx,要能自動部署,公司用的Jenkins我比較熟悉,這一次仍然選擇它作為我自動部署的工具

          上帝說要有光,于是便有了光,我想做上帝,需要有個沙箱

          Docker是一個開源的應(yīng)用容器引擎,基于 Go 語言 并遵從 Apache2.0 協(xié)議開源。Docker 可以讓開發(fā)者打包他們的應(yīng)用以及依賴包到一個輕量級、可移植的容器中,然后發(fā)布到任何流行的 Linux 機(jī)器上,也可以實現(xiàn)虛擬化。容器是完全使用沙箱機(jī)制,相互之間不會有任何接口(類似 iPhone 的 app),更重要的是容器性能開銷極低。

          有了沙箱之后就可以愉快的在里面進(jìn)行創(chuàng)造了。

          環(huán)境準(zhǔn)備

          • 服務(wù)器:CentOS 8
          • docker
          • docker-compose
          • nginx 鏡像
          • jenkins 鏡像
          • gitee

          安裝docker環(huán)境

          1. 鏈接服務(wù)器
          [email protected]?#@你自己的公網(wǎng)IP
          1. 安裝必要的一些系統(tǒng)工具
          yum?install?-y?yum-utils?device-mapper-persistent-data?lvm2
          1. 添加Docker CE的軟件源信息。

          sudo?yum-config-manager?--add-repo?\?https://download.docker.com/linux/centos/docker-ce.repo?#容易失敗,可以嘗試下面這個
          sudo?yum-config-manager?--add-repo?https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
          1. 更新并安裝Docker CE
          sudo?yum?makecache?fast
          sudo?yum?-y?install?docker-ce
          復(fù)制代碼
          1. 啟動Docker服務(wù)
          sudo?systemctl?enable?docker?#設(shè)置開機(jī)自啟
          sudo?systemctl?start?docker??#啟動docker
          1. 安裝校驗
          docker?version???????#顯示docker版本信息
          docker?info???????#顯示docker系統(tǒng)信息
          docker?命令?--help?????#查看命令幫助
          image-20211124160831155

          安裝docker-compose

          docker-compose 是用于定義和運行多容器 Docker 應(yīng)用程序的工具。通過 Compose,您可以使用 YML 文件來配置應(yīng)用程序需要的所有服務(wù)。然后,使用一個命令,就可以從 YML 文件配置中創(chuàng)建并啟動所有服務(wù)。

          1. 下載docker-compose:
          sudo?curl?-L?"https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname?-s)-$(uname?-m)"?-o?/usr/local/bin/docker-compose
          1. 提升權(quán)限:
          sudo?chmod?+x?/usr/local/bin/docker-compose
          1. 查看是否安裝成功
          docker-compose?-v
          image-20211124162432229

          安裝Nginx和Jenkins鏡像

          docker 拉取Nginx和Jenkins鏡像命令如下:

          docker?pull?nginx??#安裝Nginx
          docker?pull?jenkins/jenkins:lts???#安裝Jenkins

          安裝完成后執(zhí)行docker images可以查看docker下存在的鏡像:

          image-20211128205603982

          編寫配置目錄

          接下來創(chuàng)建配置目錄,結(jié)構(gòu)如下:

          ├──?compose
          │???└──?docker-compose.yml??#docker-compose配置文件
          ├──?jenkins
          │???└──?jenkins_home??#Jenkins掛載卷
          ├──?nginxcfg
          ????└──?default.conf??#Nginx配置

          以上目錄我是放在根目錄之下的,同學(xué)們也可以放在自己喜歡的位置

          文件配置

          docker-compose.yml配置文件內(nèi)容:

          version:?'3'
          services:??????????????????????????????????????
          ??docker_jenkins:
          ????user:?root????????????????????????????????
          ????restart:?always????????????????????????????
          ????image:?jenkins/jenkins:lts?????????????????#?指定服務(wù)所使用的鏡像?
          ????container_name:?jenkins????????????????????#?容器名稱
          ????ports:?????????????????????????????????????#?對外暴露的端口定義
          ??????-?8080:8080
          ??????-?50000:50000
          ????volumes:???????????????????????????????????#?卷掛載路徑
          ??????-?/root/jenkins/jenkins_home/:/var/jenkins_home??#冒號前為剛剛創(chuàng)建的路徑,這里要寫絕對路徑
          ??????-?/var/run/docker.sock:/var/run/docker.sock
          ??????-?/usr/bin/docker:/usr/bin/docker????????????????
          ??????-?/usr/local/bin/docker-compose:/usr/local/bin/docker-compose
          ??docker_nginx:
          ????restart:?always
          ????image:?nginx
          ????container_name:?nginx
          ????ports:
          ??????-?8090:80
          ??????-?80:80
          ??????-?433:433
          ????volumes:
          ??????-?/root/nginxcfg:/etc/nginx/conf.d??#用我們創(chuàng)建的Nginx配置去替換容器中的默認(rèn)配置,冒號前為我們創(chuàng)建的目錄的路徑
          ??????-?/root/nginxcfg/logs:/var/log/nginx??#nginx日志位置
          ??????-?/root/xxx/xxx/xxx:/usr/share/nginx/html

          default.conf文件配置

          error_log??/var/log/nginx/error.log?notice;
          server{?#?簡單的監(jiān)聽80端口,指定index位置
          ??listen??80;
          ??root?/usr/share/nginx/html;
          ??index?index.html?index.htm;
          }

          在這里我踩了一個坑,就是不懂docker-compose.yml這個配置文件該去怎么寫,里面的每個參數(shù)都是什么意思,也是查了很多資料才弄明白,關(guān)鍵的是哪個掛載卷,volumes這個參數(shù),我的理解是用我們的一個配置去替換掉容器的默認(rèn)配置,這里我請教過一些同學(xué),他們說要在啟動docker容器的時候,用docker命令決定以哪一個配置來啟動,就使我很不理解,這個docker-compose.yml文件不就是用來做這個事情的嗎?

          最終嘗試了很多次之后,終于弄明白了,問題在volumes之下,冒號前面寫的是我的配置路徑,冒號之后的路徑是docker容器內(nèi)各個鏡像默認(rèn)的配置路徑

          這個volumes就是用自己的配置去替換掉默認(rèn)配置

          上述兩個文件配置完成之后,需要進(jìn)入compose目錄下面輸入以下命令啟動:

          docker-compose?up?-d

          停止:

          docker-compose?stop

          Jenkins配置

          輸入docker ps -a查看容器的運行情況:

          image-20211128213457379

          狀態(tài)顯示為up,此時在瀏覽器地址欄輸入服務(wù)器公網(wǎng)IP:8080端口可顯示Jenkins管理頁面:

          image-20211128215149002

          如果是第一次進(jìn)入,需要做一些初始化工作,因為我已經(jīng)安裝過了,就不重新展示初始化的過程了,大概需要以下步驟:

          1. 根據(jù)提示找到密碼復(fù)制粘貼

            通過這個命令可以獲取,/root/jenkins/jenkins_home為掛載目錄

            cat /root/jenkins/jenkins_home/secrets/initialAdminPassword

          2. 安裝推薦的插件

          3. 設(shè)置管理員賬號

          然后就可以愉快的使用Jenkins了

          接著點擊系統(tǒng)管理->插件管理,需要在Jenkins安裝兩個插件:

          1. 安裝 Publish Over SSH 作用: 將構(gòu)建后的編譯產(chǎn)出發(fā)布到服務(wù)器
          2. 安裝Generic Webhook Trigger Plugin作用:通用 Webhook 觸發(fā)器構(gòu)建

          點擊系統(tǒng)管理->系統(tǒng)配置,全局配置ssh:

          image-20211129170944558

          然后到系統(tǒng)管理->全局工具配置,安裝nodejs:

          image-20211129171837863
          • 注意node版本,有的項目對node版本有要求,可能會出現(xiàn)構(gòu)建不成功的情況

          新建一個Jenkins構(gòu)建任務(wù)

          1. 選擇新建任務(wù),輸入任務(wù)名稱,構(gòu)建一個自由風(fēng)格的軟件項目:
          image-20211129173502276
          1. 配置源碼管理:
          image-20211129174037670
          1. 構(gòu)建觸發(fā)器配置:
          image-20211129175320749
          1. gitee配置webhook:
          image-20211129180115714
          • URL為:http://服務(wù)器公網(wǎng)IP:8080/generic-webhook-trigger/invoke?token=你的token
          • 選擇push觸發(fā)構(gòu)建任務(wù)
          • 這里選擇了gitee,畢竟國內(nèi)速度快一些,GitHub的配置也是一樣的,源碼在GitHub的同學(xué)可以自己研究一下
          1. 構(gòu)建環(huán)境選擇node:
          image-20211129180526312
          1. 構(gòu)建:
          image-20211129180951119
          • 增加構(gòu)建步驟選擇執(zhí)行shell

          • 編寫shell腳本

          node?-v??#查看node,npm?版本
          npm?-v?
          npm?i??#npm安裝項目所需依賴
          npm?install?hexo-cli?-g??#npm安裝hexo
          hexo?clean??#hexo清除緩存文件和靜態(tài)文件
          hexo?g??#hexo生成靜態(tài)文件
          tar?-zcvf?public.tar?./public??#壓縮生成的靜態(tài)文件目錄
          • 以上shell腳本就是關(guān)聯(lián)的git倉庫有了推送事件之后觸發(fā)的構(gòu)建腳本,也是我的hexo博客項目所需的構(gòu)建過程,同學(xué)們可以根據(jù)需要,編寫自己項目的構(gòu)建腳本
          1. 構(gòu)建后操作:
          image-20211129184358281
          • 構(gòu)建后操作選擇send build artifacts over SSH
          • 填寫要上傳到服務(wù)器的文件名稱(在構(gòu)建腳本最后一句:tar -zcvf public.tar ./public)
          • 填寫上傳到服務(wù)器的路徑(這里的路徑是以Jenkins配置 Publish Over SSH 插件時的那個路徑為根目錄的,最終的路徑為docker-compose.yml中配置的Nginx下root目錄,比如這里我寫的是/yarbei/apps,上傳文件的實際的實際路徑為/root/yarbei/apps/public.tar,root目錄為/root/yarbei/apps/yarbeiweb,之后public.tar解壓替換yarbeiweb)
          • 編寫文件上傳后的腳本
          cd?/root/yarbei/apps??#進(jìn)入文件所在目錄
          mv?yarbeiweb?yarbeiweb-$(date?+%Y%m%d-%H%M)?#將舊的文件夾更名備份
          tar?zxvf?public.tar??#解壓public.tar
          mv?public?yarbeiweb??#將解壓后的文件夾改名
          rm?-rf?public.tar??#刪除壓縮包

          至此,基于docker+Jenkins+Nginx實現(xiàn)的前端自動部署功能就實現(xiàn)了

          image-20211129191157217

          小結(jié)

          其實這次的折騰是屬于意料之外的,源于雙十一的一次沖動消費,不過經(jīng)過一番折騰也算有了一些收獲,作為一個前端工程師,我對服務(wù)器、運維方面的知識儲備是比較少的,期間走了不少彎路,比如路徑問題,docker-compose的配置問題,在文中都有體現(xiàn)。至于為什么是docker,可能也是對Linux命令行的操作方式了解較少,不想因為自己操作失誤最終讓整個環(huán)境亂遭糟,到最終不可控。使用docker不僅能快速實施,而且能隔離環(huán)境,避免環(huán)境依賴。接下來就可以通過我自己的服務(wù)器訪問博客了,域名正在備案中????

          本次部署大概步驟如下:

          1. 準(zhǔn)備環(huán)境
          2. 安裝docker
          3. 安裝docker-compose
          4. 安裝Jenkins和Nginx
          5. 編寫配置文件
          6. 配置Jenkins
          7. 配置Jenkins構(gòu)建任務(wù)

          參考資料

          • juejin.cn)(https://juejin.cn/post/6844904111826010125#heading-7
          • https://www.jianshu.com/p/ca07a19d036a
          • https://blog.csdn.net/fan_haha/article/details/110224311



          往期推薦


          大廠面試過程復(fù)盤(微信/阿里/頭條,附答案篇)
          面試題:說說事件循環(huán)機(jī)制(滿分答案來了)
          專心工作只想搞錢的前端女程序員的2020



          最后


          • 歡迎加我微信,拉你進(jìn)技術(shù)群,長期交流學(xué)習(xí)...

          • 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端,做個專業(yè)的技術(shù)人...

          點個在看支持我吧
          瀏覽 55
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  音影先锋男人资源站 | 内地三级视频 | 美女超碰在线 | 日韩免费| 黄色成人网站大全 |