大廠技術(shù)??高級(jí)前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

作者：作曲家種太陽

原文：https://juejin.cn/post/6950280074876682276

學(xué)習(xí)了一周的CICD,踩了很多坑,都是淚,特此記錄一下整個(gè)過程,本次項(xiàng)目產(chǎn)出效果是,git push的時(shí)候自動(dòng)化直接部署到服務(wù)器上,以下是整個(gè)大致流程:

1.本地代碼push到gitlab 2.gitlab通過webhook通知到j(luò)enkins 3.jenkins拉取gitlab倉(cāng)庫(kù)代碼,并執(zhí)行shell腳本 4.shell腳本執(zhí)行docker命令,打包項(xiàng)目 5.安裝nginx,并把打包好的dist目錄映射到nginx代理目錄下 6.部署成功,訪問服務(wù)器ip+端口號(hào)訪問你的項(xiàng)目

你所需要準(zhǔn)備的:

1. docker最基本的知識(shí),并安裝docker和docker-compose
2. linux最基本命令,知道私鑰公鑰生成
3. 使用過git工具
4. 你的前端項(xiàng)目npm run build 成功
5. 你需要一臺(tái) ram>1G的linux服務(wù)器
6. 基本應(yīng)變能力,排查bug能力

1.使用docker安裝jenkins

(1).創(chuàng)建一個(gè)docker-compose.yml文件,放到/home/work/文件夾下(可自定義,注意邏輯

?version:?'2.0'
services:
??jenkins:
????container_name:?'jenkins'??#?容器名稱
????image:?jenkins/jenkins:lts?????#鏡像名稱
????restart:?always?????#是否重啟
????user:?jenkins:994???#備注1
????ports:??????????????#映射端口號(hào)
??????-?"10050:8080"
??????-?"50001:50000"
??????-?"10051:10051"
????volumes:
??????-?/home/jenkins/data:/var/jenkins_home
??????-?/usr/bin/docker:/usr/bin/docker
??????-?/var/run/docker.sock:/var/run/docker.sock

備注1:使用cat /etc/group | grep docker,我得到的

docker:x:994:

docker組名是994,所以u(píng)ser這里寫jenkins:994 (2).cd /home//work/ 并且 使用 docker-compose up -d 來加載docker-compose.yml 這時(shí)候會(huì)生成一個(gè)docker的容器,使用 docker logs jenkins 查看jenkins容器的日志

找到這一段代碼,復(fù)制出來,這是等會(huì)兒使用jenkins的秘鑰

ps:這時(shí)候你有可能會(huì)見到日志是權(quán)限不允許

給宿主機(jī)的/home/jenkins/data目錄一個(gè)777的權(quán)限

輸入命令 chmod 777 -R /home/jenkins/data

然后重新執(zhí)行docker-compose up -d 并重啟jenkins容器(docker restart jenkins)

(3).開啟jenkins,瀏覽器訪問 服務(wù)器IP地址:10050 第一次訪問,會(huì)讓你輸入剛才logs里面的秘鑰

2.配置gitlab

前提:你得有一個(gè)ssh生成的私鑰(id_rsa)和公鑰(id_rsa.pub),自行百度怎講么生成 (1).gitlab.com/^[1] 上面注冊(cè)一個(gè)賬戶 (2). 點(diǎn)擊右上角設(shè)置

(3).找到ssh秘鑰,并把公鑰粘貼到里面(一定是公鑰)

(4).創(chuàng)建一個(gè)項(xiàng)目,點(diǎn)擊進(jìn)入項(xiàng)目中,點(diǎn)擊webhooks

這里是讓輸入jenkins的 ip地址 和 加密鑰匙,先不著急輸入,我們馬上配置

3.配置jenkins

前提:你需要自行安裝jenkins插件(ssh,gitlab,build parms插件)

(1).新建一個(gè)item (2).進(jìn)入到項(xiàng)目的配置頁面

(3).填寫shell自定義變量,照著上面的填寫,后面填寫shell腳本時(shí)候會(huì)用到

(5).跟著步驟來

(6).第五步點(diǎn)擊高級(jí)設(shè)置按鈕后

ps:配置頁面先不要關(guān)閉,還沒有配置shell腳本哦

(7)還記得配置gitlab的時(shí)候么,還有url和秘鑰沒有配置,現(xiàn)在把剛才copy的url和秘鑰復(fù)制到webhooks當(dāng)中

這時(shí)候下方就會(huì)多出來一個(gè)webhooks的任務(wù),頁面別關(guān),留著,繼續(xù)跟著走 ps:記得把ssl驗(yàn)證給取消

好了,到這時(shí)候,就打通了gitlab到j(luò)enkins的過程,進(jìn)度完成了一大半了,加油~~~~

4.創(chuàng)建你的vue項(xiàng)目

前提:請(qǐng)準(zhǔn)備好你的vue項(xiàng)目,并且能確保npm run build 成功 (1)在當(dāng)前目錄下面創(chuàng)建Dockerfile和.dockerignore文件

#?build?stage
FROM?node:10?as?build-stage
LABEL?maintainer="[email protected]"
WORKDIR?/app
COPY?.?.
RUN?npm?install

RUN?npm?run?build

#?production?stage
FROM?nginx:stable-alpine?as?production-stage
COPY?--from=build-stage?/app/dist?/usr/share/nginx/html
EXPOSE?80
CMD?["nginx",?"-g",?"daemon?off;"]

大概意思是把文件copy到app文件目錄下,執(zhí)行npm install 和 npm run build,并且吧生成的dist文件移動(dòng)到nginx的代理目錄下面,端口是 80

(2).dockerignore

#?Dependency?directory
#?https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist

#?node-waf?configuration
.lock-wscript

#?Compiled?binary?addons?(http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*

#?Logs
logs
*.log

#?Runtime?data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn

(3).此時(shí)的目錄結(jié)構(gòu)是

(4).提交到gitlab遠(yuǎn)程倉(cāng)庫(kù) 1. git init 2. git remote add origin ssh地址 #git添加遠(yuǎn)程倉(cāng)庫(kù) 3. git add . #代碼添加到暫存區(qū) 4.git commit -m "testjenins" #提交代碼 5. git push origin master #推送代碼到遠(yuǎn)程master分支 ps:可能會(huì)有這樣的git報(bào)錯(cuò)

解決方法:segmentfault.com/q/101000000…^[2]

ps:這是一系列g(shù)it操作,目的是遠(yuǎn)程推送到創(chuàng)建的gitlab倉(cāng)庫(kù)當(dāng)中,中間遇到的git報(bào)錯(cuò)需要自己去排查,實(shí)在不行,你可以借助gitlab項(xiàng)目中的webide這個(gè)功能模擬推送到master分支上

5.配置shell腳本

前言:這時(shí)候我們已經(jīng)打通了本地代碼->gitlab-jenkins的這個(gè)環(huán)節(jié)了,然后我們編寫shell腳本執(zhí)行docker語句構(gòu)建容器并且執(zhí)行就OK了 (1).在jenkins中配置shell腳本

#!/bin/bash

CONTAINER=${container_name}
PORT=${port}

#?build?docker?image
docker?build?--no-cache?-t?${image_name}:${tag}?.

checkDocker()?{
??RUNNING=$(docker?inspect?--format="{{?.State.Running?}}"?$CONTAINER?2>/dev/null)
??if?[?-z?$RUNNING?];?then
????echo?"$CONTAINER?does?not?exist."
????return?1
??fi

??if?[?"$RUNNING"?==?"false"?];?then
????matching=$(docker?ps?-a?--filter="name=$CONTAINER"?-q?|?xargs)
????if?[?-n?$matching?];?then
??????docker?rm?$matching
????fi
????return?2
??else
????echo?"$CONTAINER?is?running."
????matchingStarted=$(docker?ps?--filter="name=$CONTAINER"?-q?|?xargs)
????if?[?-n?$matchingStarted?];?then
??????docker?stop?$matchingStarted
??????docker?rm?${container_name}
????fi
??fi
}

checkDocker

#?run?docker?image
docker?run?-itd?--name?$CONTAINER?-p?$PORT:80?${image_name}:${tag}

大概意思是構(gòu)建docker容器,checkDocker是判斷同名的docker容器是否存在,存在就刪除.最后執(zhí)行docker容器并且映射到port變量

ps:還記得我們之前在jenkins配置的shell變量么,別忘了一一對(duì)應(yīng)哦

(2).保存jenkins任務(wù)的配置

欣賞成果

(1).把本地代碼改動(dòng)后繼續(xù)推送到遠(yuǎn)程gitlab倉(cāng)庫(kù)上 (2).查看jenkins任務(wù)的終端輸出

(4).看到終端輸出success后,瀏覽器打開項(xiàng)目部署的url(服務(wù)器IP:port)

項(xiàng)目打開啦,說明之前我們的辛苦沒有白費(fèi)~

可以繼續(xù)優(yōu)化的點(diǎn)

1. jenkins構(gòu)建后發(fā)送郵件通知
2. shell腳本判斷端口是否被占用,如果占用可以隨機(jī)分配端口并且通知到用戶
3. shell腳本中的npm install換成淘寶源可以速度快一些

一點(diǎn)點(diǎn)感悟

CICD這個(gè)流程難在比較繁瑣,每個(gè)細(xì)節(jié)都得注意,當(dāng)我們學(xué)會(huì)docker,shell,linux,jenkins,ssh公鑰私鑰配置這方面的知識(shí)后,剩下來的就是把這些串起來,排故的時(shí)候需要耐心,先跑通整個(gè)流程

參考資料