目錄前期準(zhǔn)備 基于CentOS 7系統(tǒng)云服務(wù)器一臺。 基于Vue-CLI的項(xiàng)目部署在GitLab之上。部署目標(biāo)
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供漢中網(wǎng)站建設(shè)、漢中做網(wǎng)站、漢中網(wǎng)站設(shè)計(jì)、漢中網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、漢中企業(yè)網(wǎng)站模板建站服務(wù)，十余年漢中做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
搭建Docker+Nginx+Jenkins環(huán)境，用于實(shí)現(xiàn)前端自動化部署的流程。具體的實(shí)現(xiàn)效果為開發(fā)人員在本地開發(fā)，push提交代碼到指定分支，自動觸發(fā)Jenkins進(jìn)行持續(xù)集成和自動化部署?？梢栽O(shè)置在部署完成后通過郵件通知，部署的成功與否，成功后會將打包后的文件上傳到服務(wù)器，通過nginx反向代理展現(xiàn)頁面，失敗則會打印相關(guān)的錯(cuò)誤日志。
友情提示：盡量選擇阿里云或者騰訊云服務(wù)器，其他服務(wù)器部署時(shí)可能會出現(xiàn)Jenkins無法正常啟動！Dcoker環(huán)境的搭建連接云服務(wù)器
可以選擇阿里云或者騰訊云提供的在線終端（有時(shí)會卡），但是推薦使用本地電腦進(jìn)行連接。在終端輸入連接命令：ssh root@你的服務(wù)器公網(wǎng)地址
之后輸入云服務(wù)器密碼，命令顯示結(jié)果如下：
Docker有兩個(gè)分支版本：Docker CE和Docker EE，即社區(qū)版和企業(yè)版。本教程基于CentOS 7安裝Docker CE。安裝Docker環(huán)境
1、安裝Docker的依賴庫。yum install -y yum-utils device-mapper-persistent-data lvm2
2、添加Docker CE的軟件源信息。sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo
3、安裝Docker CE。sudo yum install docker-ce
4、啟動Docker服務(wù)。sudo systemctl enable docker // 設(shè)置開機(jī)自啟sudo systemctl start docker // 啟動dockerDocker安裝Docker Compose
Docker Compose是用于定義和運(yùn)行多容器Docker應(yīng)用程序的工具。通過Compose，您可以使用YML文件來配置應(yīng)用程序需要的所有服務(wù)。然后，使用一個(gè)命令，就可以從YML文件配置中創(chuàng)建并啟動所有服務(wù)。下載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
安裝完成后提升權(quán)限：sudo chmod +x /usr/local/bin/docker-compose
輸入docker-compose -v顯示如下頁面：Docker安裝Nginx和Jenkins服務(wù)安裝Nginx和Jenkins
Docker鏡像拉取Nginx和Jenkins環(huán)境命令如下：docker pull nginxdocker pull jenkins/jenkins:lts
安裝完成后執(zhí)行docker images可以清晰的看到當(dāng)前Docker下存在的鏡像。docker imagesNginx和Jenkins目錄編寫
為了便于管理，在Docker下我們將Nginx和Jenkins聚集到一個(gè)文件目錄之中。目錄結(jié)構(gòu)如下：+ compose- docker-compose.yml // docker-compose執(zhí)行文件+ nginx + conf.d- nginx.conf // Nginx配置+ jenkins- jenkins_home // Jenkins掛載卷+ webserver -static //存放前端打包后的dist文件
Web server目錄屬于后期生成暫不討論，需要手動創(chuàng)建的是Compose，Nginx和Jenkins目錄及其下屬文件，其中最主要的是docker-compose.yml文件和nginx.conf文件的配置。以上文件夾建議放在根目錄下面，可以放在home文件夾之下也可以單獨(dú)創(chuàng)建一個(gè)新的文件夾。docker-compose.yml文件配置version: '3'services: # 集合docker_jenkins:user: root # 為了避免一些權(quán)限問題 在這我使用了rootrestart: always # 重啟方式image: jenkins/jenkins:lts # 指定服務(wù)所使用的鏡像 在這里我選擇了 LTS (長期支持)container_name: jenkins # 容器名稱ports: # 對外暴露的端口定義 - 8080:8080 - 50000:50000volumes: # 卷掛載路徑 - /home/jenkins/jenkins_home/:/var/jenkins_home # 這是我們一開始創(chuàng)建的目錄掛載到容器內(nèi)的jenkins_home目錄 - /var/run/docker.sock:/var/run/docker.sock - /usr/bin/docker:/usr/bin/docker # 這是為了我們可以在容器內(nèi)使用docker命令 - /usr/local/bin/docker-compose:/usr/local/bin/docker-composedocker_nginx:restart: alwaysimage: nginxcontainer_name: nginxports: - 8090:80 - 80:80 - 433:433volumes: - /home/nginx/conf.d/:/etc/nginx/conf.d - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/htmlnginx.conf文件配置server{listen 80;root /usr/share/nginx/html;index index.html index.htm;}
上述兩個(gè)文件配置完成之后，需要進(jìn)入/home/compose目錄下面輸入以下命令，進(jìn)行環(huán)境的啟動：docker-compose up -d
輸入docker ps -a 查看容器的情況：
狀態(tài)顯示up，后面的端口號顯示如上為正常狀態(tài)。在瀏覽器輸入你云服務(wù)器的公網(wǎng)IP加上8080的端口號就可以顯示如下頁面：
注意點(diǎn)：cat /home/jenkins/jenkins_home/secrets/initialAdminPassword安裝Jenkins插件
進(jìn)入頁面之后，選擇推薦安裝。
安裝完成之后，選擇左側(cè)Manage Jenkins選項(xiàng)。如下圖所示：
Jenkins中Manage Plugins搜索以下插件GitLab、Publish Over SSH、Nodejs并安裝。
安裝完成后配置Nodejs環(huán)境和SSH參數(shù) 在首頁選擇global tool Configuration>NodeJS選擇自動安裝和對應(yīng)的Nodejs版本號，選擇成功后點(diǎn)擊保存。
配置SSH信息，Manage Jenkins>configure System填寫服務(wù)器的相關(guān)信息：關(guān)聯(lián)Jenkins和GitLab生成密鑰
在根目錄下執(zhí)行一下命令：ssh-keygen -t rsa
一般默認(rèn)兩次回車，如下圖所示：
使用cd ~/.ssh查看生成的文件。將生成的密鑰id_rsa復(fù)制粘貼到Jenkins中的憑證。如圖所示：
登陸GitLab，在GitLab中配置id_rsa.pub公鑰：新建項(xiàng)目
準(zhǔn)備完畢后，開始新建一個(gè)任務(wù)，選擇新建item>freestyle project構(gòu)建一個(gè)自由風(fēng)格的項(xiàng)目。源碼管理
新建完成后，在源碼管理中配置Git信息，credentials選擇我們剛剛添加的憑證。構(gòu)建觸發(fā)器
在構(gòu)建觸發(fā)器中選擇我們觸發(fā)構(gòu)建的時(shí)機(jī)，你可以選擇隊(duì)友的鉤子，比如push代碼的時(shí)候，Merge Request的時(shí)候：
點(diǎn)擊高級選項(xiàng)找到secret token>Generate生成一個(gè)token值：
配置成功后，還需要到GitLab中增加對應(yīng)的鉤子。記下上圖的webhookURL（紅線框出）和secret token值，到GitLab中進(jìn)行配置。
構(gòu)建環(huán)境及構(gòu)建配置
完成上述配置后，Jenkins就和GitLab關(guān)聯(lián)起來，在本地push文件時(shí)，就會自動構(gòu)建，訪問云服務(wù)器的公網(wǎng)IP地址就可以訪問修改完成后的項(xiàng)目，同樣也可以在Jenkins上手動構(gòu)建，如圖所示：
結(jié)束語
最后，簡單的線上部署項(xiàng)目就結(jié)束了，有域名的同學(xué)可以進(jìn)行云解析映射公網(wǎng)的IP地址，這樣就可以使用更具辨識度的域名進(jìn)行項(xiàng)目的開發(fā)及上線。
到此這篇關(guān)于基于Docker、Nginx和Jenkins實(shí)現(xiàn)前端自動化部署的文章就介紹到這了,更多相關(guān)Docker、Nginx和Jenkins自動化部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
重慶分公司
重慶分公司
