自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

【微服務部署】Jenkins一鍵打包部署NodeJS(Vue)步驟詳解

開發(fā) 前端
Nginx安裝也有多種方式,源碼安裝、yum安裝、Docker安裝等,安裝并不復雜,我們這里采用Docker安裝的方式,由于習慣于標準化及存檔,方便在不同服務器部署相同的環(huán)境,我們這里使用了Docker Compose來定義Nginx容器配置信息。
本文介紹使用Jenkins一鍵將NodeJS(Vue)前端項目打包并上傳到生產環(huán)境服務器,這里使用的是直接打包靜態(tài)頁面,發(fā)送到遠程服務器Nginx配置目錄的方式,首先確保服務器環(huán)境配置好,安裝Nginx,運行目錄,日志存放目錄等。一、服務器環(huán)境配置

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

1. Nginx的docker-compose-nginx.yml定義文件編寫

??Docker及Docker Compose安裝配置,前面有詳細介紹,這里不再贅述,以下是Nginx容器的Docker Compose定義文件內容:

version: '3'
services:
    ##nginx配置
    nginx:
      image: nginx:latest
      restart: always
      container_name: nginx
      environment:
        - TZ=Asia/Shanghai
      ports:
         #端口映射,前面是宿主機端口,后面是服務端口
        - 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ù)說明:

ports:端口映射,前面是宿主機端口,后面是容器內部服務端口

volumes:目錄映射,前面是宿主機目錄,后面是容器內部目錄

2. 部署及備份目錄準備

  • 新建 /opt/tmp 目錄,用于Jenkins打包后,通過 Publish Over SSH插件將包傳輸?shù)椒掌鞯呐R時目錄(如果前面創(chuàng)建過,這里無需再創(chuàng)建)。
  • 新建 /opt/bak 目錄,用于存儲所有部署過的包備份,方便后續(xù)版本回滾。此目錄可能會占用很大空間,所以需要選擇一個磁盤空間大的掛載目錄(如果前面創(chuàng)建過,這里無需再創(chuàng)建)。
  • 新建 /opt/script 目錄,用于Jenkins將包傳輸完成之后,執(zhí)行安裝、備份操作的相關命令腳本(如果前面創(chuàng)建過,這里無需再創(chuàng)建)。
  • 新建 /data/container/nginx/html,用與存放發(fā)布后的靜態(tài)頁面。
  • 新建 /data/container/nginx/www,映射Nginx容器內的/var/www目錄。
  • 新建 /data/container/nginx/logs,映射Nginx容器內的/var/log/nginx目錄,存放nginx運行日志。
  • 新建 /data/container/nginx/etc,映射Nginx容器內的/etc/nginx目錄
  • 新建 /data/container/nginx/etc/nginx.conf,映射Nginx容器內的/etc/nginx/nginx.conf配置文件
  • 新建 /bxl/container/nginx/ssl,映射Nginx容器內的/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)部署要求編寫Nginx配置文件nginx.conf,以下是簡單的配置方法,正常情況下https請求還需要配置ssl證書,還有ipv6配置等,后面詳細講解Nginx配置。一定要將修改后的nginx.conf文件放到/data/container/nginx/etc/目錄下,否則nginx啟動時會報錯找不到配置文件。
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. 部署腳本編寫說明

  • 定義入參,可以通過Jenkins任務將參數(shù)傳入腳本中,我們定義了下面2個參數(shù):project_name="portal" : 服務名稱portal_home="/data/container/nginx/html" : 靜態(tài)頁面路徑
  • 對參數(shù)進行檢查,是否未傳入參數(shù),這里根據(jù)自己的實際情況判斷,比如必須傳入哪些參數(shù),就設置參數(shù)的個數(shù)不能小于幾。
#param validate
if [ $# -lt 1 ]; then  
  echo "you must use like this : ./publish_portal.sh <project_namename> [portal home dir]"  
  exit  
fi
  • 入參賦值,如果有參數(shù)傳入,則取服務參數(shù),如果沒有參數(shù)傳入則取默認值
if [ "$1" != "" ]; then
   project_name="$1"
fi
if [ "$2" != "" ]; then
   portal_home="$2"
fi
  • 刪除原部署的靜態(tài)文件,解壓當前發(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
  • 備份當前發(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"
  • 刪除臨時文件
#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"
  • 將部署腳本上傳到服務器的/opt/script目錄下,并賦予可執(zhí)行權限
chmod 755 publish_portal.sh
二、新建Jenkins配置打包任務,部署打包后的Vue頁面1. Dashboard > 新建任務,輸入任務名稱,選擇“構建一個自由風格的軟件項目”,點擊確定。

2. 項目配置,進入到任務配置頁

  • 丟棄舊的構建 :這里在保持構建的最大個數(shù)填寫5,當然可以根據(jù)自己情況填寫,否則舊的構建包會一直存在占用磁盤空間。

  • 源碼管理:配置git代碼地址、用戶名密碼和版本分支,如果是需要用戶名密碼的git庫,那么下面需要選擇訪問的用戶名密碼,這里一定要使用用戶名密碼方式,使用token的方式無法選中??梢栽谙路絘dd,也可以在Jenkins全局Credentials 中添加,方便其它任務使用。

  • 構建觸發(fā)器:可選可不選,這個根據(jù)自己的需求選擇,任務在什么情況下出發(fā)構建。

  • 構建環(huán)境:這里選擇Provide Node & npm bin/ folder to PATH,選擇我們在系統(tǒng)配置中配置的Node版本。

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

  • shell腳本完整內容:
echo $PATH
node -v
pnpm -v
pnpm install
pnpm run build
cd dist
rm -rf portal.tar.gz
tar -zcvf portal.tar.gz *
cd ../
  • 構建后操作:選擇構建后將包發(fā)送到服務器

  • Post Steps:將打包后的文件發(fā)送到服務器,并執(zhí)行設置好的腳本,這里選擇Run only if build succeeds,當構建成功時Post。

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

3. 運行構建任務

  • 立即構建

  • 查看構建日志:點擊立即構建之后,下方會出現(xiàn)進度條,點擊進度條就可以進入構建日志界面。

4. 構建成功后,下方會給出構建成功提示,此時登錄遠程服務器查看文件是否部署成功即可。

責任編輯:武曉燕 來源: 今日頭條
相關推薦

2023-09-14 20:55:52

NodeJSDocker

2023-09-08 23:30:19

2023-09-08 08:14:14

2023-06-28 15:56:10

微服務容器無服務器計算

2023-10-12 09:13:14

2023-06-15 10:00:00

Jenkins任務操作

2023-09-10 07:20:35

2019-10-21 11:00:29

微服務架構部署策略

2023-10-12 21:15:08

微服務Docker

2019-02-21 15:42:22

ZStack裸金屬部署

2024-04-08 13:59:03

大模型Replicate

2021-09-29 11:00:49

Vue文件前端

2021-02-21 17:56:55

LinuxNodeJS

2010-08-10 13:22:02

2019-12-20 10:28:54

工具代碼開發(fā)

2023-10-13 18:57:22

2015-06-09 10:36:13

Cloud FoundAzurePaaS

2012-07-03 16:03:07

2018-01-09 16:45:31

離線網絡網絡安全一鍵式部署
點贊
收藏

51CTO技術棧公眾號