??本文介紹使用Jenkins一鍵將NodeJS（Vue）前端項(xiàng)目打包并上傳到生產(chǎn)環(huán)境服務(wù)器，這里使用的是直接打包靜態(tài)頁(yè)面，發(fā)送到遠(yuǎn)程服務(wù)器Nginx配置目錄的方式，首先確保服務(wù)器環(huán)境配置好，安裝Nginx，運(yùn)行目錄，日志存放目錄等。

一、服務(wù)器環(huán)境配置

??Nginx安裝也有多種方式，源碼安裝、yum安裝、Docker安裝等，安裝并不復(fù)雜，我們這里采用Docker安裝的方式，由于習(xí)慣于標(biāo)準(zhǔn)化及存檔，方便在不同服務(wù)器部署相同的環(huán)境，我們這里使用了Docker Compose來(lái)定義Nginx容器配置信息。

1. Nginx的docker-compose-nginx.yml定義文件編寫(xiě)

??Docker及Docker Compose安裝配置，前面有詳細(xì)介紹，這里不再贅述，以下是Nginx容器的Docker Compose定義文件內(nèi)容：

version: '3'
services:
    ##nginx配置
    nginx:
      image: nginx:latest
      restart: always
      container_name: nginx
      environment:
        - TZ=Asia/Shanghai
      ports:
         #端口映射，前面是宿主機(jī)端口，后面是服務(wù)端口
        - 80:80
        - 443:443
      volumes:
        - /data/container/nginx/html:/nginx/html
        - /data/container/nginx/www:/var/www
        - /data/container/nginx/logs:/var/log/nginx
        - /data/container/nginx/etc:/etc/nginx
        - /data/container/nginx/etc/nginx.conf:/etc/nginx/nginx.conf
        - "/etc/localtime:/etc/localtime"
        - "/usr/share/zoneinfo/Asia/Shanghai:/etc/timezone"
        #若用到ssl，可以引入
        - /bxl/container/nginx/ssl:/nginx/ssl

部分參數(shù)說(shuō)明：

• ports：端口映射，前面是宿主機(jī)端口，后面是容器內(nèi)部服務(wù)端口
• volumes：目錄映射，前面是宿主機(jī)目錄，后面是容器內(nèi)部目錄

2. 部署及備份目錄準(zhǔn)備

• 新建 /opt/tmp 目錄，用于Jenkins打包后，通過(guò)?Publish Over SSH插件將包傳輸?shù)椒?wù)器的臨時(shí)目錄（如果前面創(chuàng)建過(guò)，這里無(wú)需再創(chuàng)建）。
• 新建 /opt/bak 目錄，用于存儲(chǔ)所有部署過(guò)的包備份，方便后續(xù)版本回滾。此目錄可能會(huì)占用很大空間，所以需要選擇一個(gè)磁盤(pán)空間大的掛載目錄（如果前面創(chuàng)建過(guò)，這里無(wú)需再創(chuàng)建）。
• 新建 /opt/script 目錄，用于Jenkins將包傳輸完成之后，執(zhí)行安裝、備份操作的相關(guān)命令腳本（如果前面創(chuàng)建過(guò)，這里無(wú)需再創(chuàng)建）。
• 新建 /data/container/nginx/html，用與存放發(fā)布后的靜態(tài)頁(yè)面。
• 新建 /data/container/nginx/www，映射Nginx容器內(nèi)的/var/www目錄。
• 新建 /data/container/nginx/logs，映射Nginx容器內(nèi)的/var/log/nginx目錄，存放nginx運(yùn)行日志。
• 新建 /data/container/nginx/etc，映射Nginx容器內(nèi)的/etc/nginx目錄
• 新建 /data/container/nginx/etc/nginx.conf，映射Nginx容器內(nèi)的/etc/nginx/nginx.conf配置文件
• 新建 /bxl/container/nginx/ssl，映射Nginx容器內(nèi)的/nginx/ssl目錄

mkdir -p /opt/tmp /opt/bak /opt/script /data/container/nginx/html /data/container/nginx/www /data/container/nginx/logs  /data/container/nginx/etc  /bxl/container/nginx/ssl
chmod -R 777 /opt/tmp /opt/bak /opt/script /data/container/nginx/html /data/container/nginx/www /data/container/nginx/logs  /data/container/nginx/etc  /bxl/container/nginx/ssl

3.根據(jù)系統(tǒng)部署要求編寫(xiě)Nginx配置文件nginx.conf，以下是簡(jiǎn)單的配置方法，正常情況下https請(qǐng)求還需要配置ssl證書(shū)，還有ipv6配置等，后面詳細(xì)講解Nginx配置。一定要將修改后的nginx.conf文件放到/data/container/nginx/etc/目錄下，否則nginx啟動(dòng)時(shí)會(huì)報(bào)錯(cuò)找不到配置文件。

    server {
        listen 80;
        server_name  域名;

        gzip on;
        gzip_buffers 32 4K;
        gzip_comp_level 6;
        gzip_min_length 100;
        gzip_types application/javascript text/css text/xml text/plain application/x-javascript image/jpeg image/gif image/png;
        gzip_disable "MSIE [1-6]\."; 
        gzip_vary on;

        #charset koi8-r;

        access_log  /var/log/nginx/portal.access.log  main;

        location / {
                root /nginx/html/gitegg_portal;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
        }

        location /gitegg-api/ {
            proxy_set_header Host $http_host;               
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://172.17.0.1:8080/;
        }
    }

4. 部署腳本編寫(xiě)說(shuō)明

• 定義入?yún)?，可以通過(guò)Jenkins任務(wù)將參數(shù)傳入腳本中，我們定義了下面2個(gè)參數(shù)：
  project_name=“portal” ： 服務(wù)名稱
  portal_home=“/data/container/nginx/html” ： 靜態(tài)頁(yè)面路徑

• 對(duì)參數(shù)進(jìn)行檢查，是否未傳入?yún)?shù)，這里根據(jù)自己的實(shí)際情況判斷，比如必須傳入哪些參數(shù)，就設(shè)置參數(shù)的個(gè)數(shù)不能小于幾。

#param validate
if [ $# -lt 1 ]; then  
  echo "you must use like this : ./publish_portal.sh <project_namename> [portal home dir]"  
  exit  
fi

• 入?yún)①x值，如果有參數(shù)傳入，則取服務(wù)參數(shù)，如果沒(méi)有參數(shù)傳入則取默認(rèn)值

if [ "$1" != "" ]; then
   project_name="$1"
fi
if [ "$2" != "" ]; then
   portal_home="$2"
fi

• 刪除原部署的靜態(tài)文件，解壓當(dāng)前發(fā)布包

# 刪除
rm -rf "$portal_home"/index.html "$portal_home"/favicon.ico "$portal_home"/_app.config.js "$portal_home"/logo.png "$portal_home"/resource/ "$portal_home"/assets/
# 解壓
cd /opt/tmp/portal
tar -zxvf portal.tar.gz

• 備份當(dāng)前發(fā)布的靜態(tài)文件包

#bak project_name
BAK_DIR=/opt/bak/portal/$project_name/`date +%Y%m%d`
mkdir -p "$BAK_DIR"
cp /opt/tmp/portal/portal.tar.gz "$BAK_DIR"/"$project_name"_`date +%H%M%S`.tar.gz
#remove tmp
rm -rf portal.tar.gz

• 將解壓的靜態(tài)文件copy到Nginx目錄下

#copy portal code
cp -r * "$portal_home"

• 刪除臨時(shí)文件

#remove tmp
rm -rf index.html favicon.ico _app.config.js logo.png resource assets

• 打印執(zhí)行完成的命令

echo "Portal is starting,please try to access $project_name conslone url"

• 完整的安裝部署腳本

project_name="portal"
portal_home="/data/container/nginx/html"
#param validate
if [ $# -lt 1 ]; then  
  echo "you must use like this : ./publish_portal.sh <project_namename> [portal home dir]"  
  exit  
fi
if [ "$1" != "" ]; then
   project_name="$1"
fi
if [ "$2" != "" ]; then
   portal_home="$2"
fi

echo "portal code copy"
#publish project_name
echo "$project_name publishing"
rm -rf "$portal_home"/index.html "$portal_home"/favicon.ico "$portal_home"/_app.config.js "$portal_home"/logo.png "$portal_home"/resource/ "$portal_home"/assets/
cd /opt/tmp/portal
tar -zxvf portal.tar.gz
#bak project_name
BAK_DIR=/opt/bak/portal/$project_name/`date +%Y%m%d`
mkdir -p "$BAK_DIR"
cp /opt/tmp/portal/portal.tar.gz "$BAK_DIR"/"$project_name"_`date +%H%M%S`.tar.gz
#remove tmp
rm -rf portal.tar.gz
#copy portal code
cp -r * "$portal_home"
#remove tmp
rm -rf index.html favicon.ico _app.config.js logo.png resource assets
#start portal
echo "Portal is starting,please try to access $project_name conslone url"

• 將部署腳本上傳到服務(wù)器的/opt/script目錄下，并賦予可執(zhí)行權(quán)限

chmod 755 publish_portal.sh

二、新建Jenkins配置打包任務(wù)，部署打包后的Vue頁(yè)面

1. Dashboard > 新建任務(wù)，輸入任務(wù)名稱，選擇“構(gòu)建一個(gè)自由風(fēng)格的軟件項(xiàng)目”，點(diǎn)擊確定。

2. 項(xiàng)目配置，進(jìn)入到任務(wù)配置頁(yè)

• 丟棄舊的構(gòu)建 ：這里在保持構(gòu)建的最大個(gè)數(shù)填寫(xiě)5，當(dāng)然可以根據(jù)自己情況填寫(xiě)，否則舊的構(gòu)建包會(huì)一直存在占用磁盤(pán)空間。
  
• 源碼管理：配置git代碼地址、用戶名密碼和版本分支，如果是需要用戶名密碼的git庫(kù)，那么下面需要選擇訪問(wèn)的用戶名密碼，這里一定要使用用戶名密碼方式，使用token的方式無(wú)法選中?？梢栽谙路絘dd，也可以在Jenkins全局Credentials 中添加，方便其它任務(wù)使用。

• 構(gòu)建觸發(fā)器：可選可不選，這個(gè)根據(jù)自己的需求選擇，任務(wù)在什么情況下出發(fā)構(gòu)建。
  
• 構(gòu)建環(huán)境：這里選擇Provide Node & npm bin/ folder to PATH，選擇我們?cè)谙到y(tǒng)配置中配置的Node版本。

• Build Steps：選擇執(zhí)行shell，在shell窗口中輸入需要執(zhí)行的打包命令。

• shell腳本完整內(nèi)容：

echo $PATH
node -v
pnpm -v
pnpm install
pnpm run build
cd dist
rm -rf portal.tar.gz
tar -zcvf portal.tar.gz *
cd ../

• 構(gòu)建后操作：選擇構(gòu)建后將包發(fā)送到服務(wù)器
  

• Post Steps：將打包后的文件發(fā)送到服務(wù)器，并執(zhí)行設(shè)置好的腳本，這里選擇Run only if build succeeds，當(dāng)構(gòu)建成功時(shí)Post。

• Exec command：將打好的包發(fā)布到環(huán)境之后，在環(huán)境上執(zhí)行的部署腳本命令。/opt/script/publish_portal.sh 是腳本文件、portal 是項(xiàng)目名稱、/data/container/portal 是前端代碼存放路徑。

/opt/script/publish_portal.sh portal /data/container/portal

3. 運(yùn)行構(gòu)建任務(wù)

• 立即構(gòu)建

• 查看構(gòu)建日志：點(diǎn)擊立即構(gòu)建之后，下方會(huì)出現(xiàn)進(jìn)度條，點(diǎn)擊進(jìn)度條就可以進(jìn)入構(gòu)建日志界面。

4. 構(gòu)建成功后，下方會(huì)給出構(gòu)建成功提示，此時(shí)登錄遠(yuǎn)程服務(wù)器查看文件是否部署成功即可。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-694658.html

到了這里，關(guān)于【微服務(wù)部署】四、Jenkins一鍵打包部署NodeJS（Vue）前端項(xiàng)目步驟詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！