1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

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

        共 6351字,需瀏覽 13分鐘

         ·

        2021-12-11 14:32

        點(diǎn)擊上方?前端Q,關(guān)注公眾號(hào)

        回復(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大促買了個(gè)服務(wù)器玩一玩,買之前很激動(dòng),買了之后,emmmm我用它能干嘛

        找我干運(yùn)維的好兄弟問一問,好兄弟也對(duì)我想做的事情很疑惑

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

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

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

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

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

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

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

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

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

        Docker是一個(gè)開源的應(yīng)用容器引擎,基于 Go 語言 并遵從 Apache2.0 協(xié)議開源。Docker 可以讓開發(fā)者打包他們的應(yīng)用以及依賴包到一個(gè)輕量級(jí)、可移植的容器中,然后發(fā)布到任何流行的 Linux 機(jī)器上,也可以實(shí)現(xiàn)虛擬化。容器是完全使用沙箱機(jī)制,相互之間不會(huì)有任何接口(類似 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?#容易失敗,可以嘗試下面這個(gè)
        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. 啟動(dòng)Docker服務(wù)
        sudo?systemctl?enable?docker?#設(shè)置開機(jī)自啟
        sudo?systemctl?start?docker??#啟動(dòng)docker
        1. 安裝校驗(yàn)
        docker?version???????#顯示docker版本信息
        docker?info???????#顯示docker系統(tǒng)信息
        docker?命令?--help?????#查看命令幫助
        image-20211124160831155

        安裝docker-compose

        docker-compose 是用于定義和運(yùn)行多容器 Docker 應(yīng)用程序的工具。通過 Compose,您可以使用 YML 文件來配置應(yīng)用程序需要的所有服務(wù)。然后,使用一個(gè)命令,就可以從 YML 文件配置中創(chuàng)建并啟動(dò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:?????????????????????????????????????#?對(duì)外暴露的端口定義
        ??????-?8080:8080
        ??????-?50000:50000
        ????volumes:???????????????????????????????????#?卷掛載路徑
        ??????-?/root/jenkins/jenkins_home/:/var/jenkins_home??#冒號(hào)前為剛剛創(chuàng)建的路徑,這里要寫絕對(duì)路徑
        ??????-?/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)配置,冒號(hào)前為我們創(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;
        }

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

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

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

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

        docker-compose?up?-d

        停止:

        docker-compose?stop

        Jenkins配置

        輸入docker ps -a查看容器的運(yùn)行情況:

        image-20211128213457379

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

        image-20211128215149002

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

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

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

          cat /root/jenkins/jenkins_home/secrets/initialAdminPassword

        2. 安裝推薦的插件

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

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

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

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

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

        image-20211129170944558

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

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

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

        1. 選擇新建任務(wù),輸入任務(wù)名稱,構(gòu)建一個(gè)自由風(fēng)格的軟件項(xià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安裝項(xiàng)目所需依賴
        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博客項(xiàng)目所需的構(gòu)建過程,同學(xué)們可以根據(jù)需要,編寫自己項(xiàng)目的構(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 插件時(shí)的那個(gè)路徑為根目錄的,最終的路徑為docker-compose.yml中配置的Nginx下root目錄,比如這里我寫的是/yarbei/apps,上傳文件的實(shí)際的實(shí)際路徑為/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實(shí)現(xiàn)的前端自動(dòng)部署功能就實(shí)現(xiàn)了

        image-20211129191157217

        小結(jié)

        其實(shí)這次的折騰是屬于意料之外的,源于雙十一的一次沖動(dòng)消費(fèi),不過經(jīng)過一番折騰也算有了一些收獲,作為一個(gè)前端工程師,我對(duì)服務(wù)器、運(yùn)維方面的知識(shí)儲(chǔ)備是比較少的,期間走了不少彎路,比如路徑問題,docker-compose的配置問題,在文中都有體現(xiàn)。至于為什么是docker,可能也是對(duì)Linux命令行的操作方式了解較少,不想因?yàn)樽约翰僮魇д`最終讓整個(gè)環(huán)境亂遭糟,到最終不可控。使用docker不僅能快速實(shí)施,而且能隔離環(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é)前端,做個(gè)專業(yè)的技術(shù)人...

        點(diǎn)個(gè)在看支持我吧
        瀏覽 55
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        評(píng)論
        圖片
        表情
        推薦
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            青娱乐自拍偷拍视频 | 台湾佬大香蕉 | free性hd黑人 | 91精品国产乱码在线观看 | chaopeng97 | 操中国美女全黄毛片 | 少妇无套内谢久久久久 | 国产精品久久久久99 | 年轻少妇6 | 国产一区二区AV |