vue + webpack 前端項目持續發佈集成部署

場景

代碼倉庫 gitlab
構建服務 jenkins
服務器環境 linux + nginx
複製代碼

前端技術棧

vue vue-cli vue-router es6 sass
複製代碼

配置途中的坑

1. jenkins 和 gitlab 的鏈接處理 （經過配置ssh-key能夠處理）
2. jenkins 中構建項目 npm run build 以後的 文件夾權限 （配置權限 chmod -R 777 dist）
3. ftp和ssh 推送方式的區別
複製代碼

vue項目build後空白問題

1. history: mode 的路由配置
2. 構建後的路徑問題
複製代碼

配置中經常使用的linux命令

1. 壓縮文件包 tar -czf dist.tar.gz *
2. 解壓文件包 tar -xvf dist.tar.gz (指向到制定文件夾 -C /workpace)
3. 推送本地文件到遠程服務器 sudo scp ~/mywork/dist.tar.gz root@10.0.0.1/www/dist
複製代碼

nginx配置

server {
    listen 80;
    server_name 10.0.0.1;
    root /www/dist/;
    
    location / {
        proxy_read_timeout 600;
        try_files $uri $uri/ /index.html;
        index index.html
    }
    
    location ^~/crm {
        proxy_pass http://10.0.0.1:8080/crm;
        proxy_set_header Host $host:$server_port;
    }
}
複製代碼

Execute shell

# 對比 package.json 是否有改動
    # 若是有改動，就刪除 node_modules，從新再 cnpm install 一次
    cmp --silent package.json ../package.json || (cp package.json .. && cd .. && rm -fr node_modules && cnpm i)
    
    # 把 node_modules 映射到項目文件夾中，用以打包代碼
    ln -s ../node_modules .
    
    # 執行打包
    npm run build / bundle
    
    # 把打包後的代碼目錄 dist 打成 .tar.gz 壓縮包
    tar -czvf root.tar.gz dist
    
    # 把壓縮包傳上目標服務器
    scp WeChat_Official_Accounts_to_Dev_bundle.tar.gz efinance@10.x.xx.xxx:~
    
    # 連上目標服務器上，進行相應的 shell 操做
    ssh efinance@10.1.21.155 << 'ENDSSH'
    	# 回到用戶目錄
        cd
        
        # 新建目錄 
        mkdir -p WeChat_Official_Accounts_to_Dev_bundle
        
        # 把傳上來的壓縮包解壓到剛剛新建的目錄
        tar -xzvf WeChat_Official_Accounts_to_Dev_bundle.tar.gz -C WeChat_Official_Accounts_to_Dev_bundle
        
        # 刪掉壓縮包
        rm WeChat_Official_Accounts_to_Dev_bundle.tar.gz
    
        # 刪除上一版代碼
        sudo rm -rf /usr/local/app/wechat_official_accounts
        
        # 剪切新一版代碼到目標目錄
        sudo mv ~/WeChat_Official_Accounts_to_Dev_bundle/dist /usr/local/app/wechat_official_accounts
        
        # 刪除最初建的目錄
        sudo rm -rf ~/WeChat_Official_Accounts_to_Dev_bundle
        
        # 給新一版代碼所在的目錄賦予 nginx 讀取權限
        # 注意：這裏的權限 nginx:nginx 仍是 755 看項目現有的
        sudo chown -R nginx:nginx /usr/local/app/wechat_official_accounts
    
    # 結束 ssh 鏈接
    ENDSSH
複製代碼

常見問題

1. sudo: sorry, you must have a tty to run sudo 報錯提示
    - vim /etc/sudoers 
    - 註釋掉 Default requiretty ,默認 sudo 須要 tty 終端。
2. Host key verification failed 無權限
    - 登陸 192.168.7.164 jenkins 服務器
    - ctrl + r，搜索 jenkins 命令
    - 執行 sudo su -s /bin/bash jenkins 切換到 jenkins 這個 user 帳號
    - ctrl + r，搜索 ssh-cop 命令
    - 執行 ssh-copy id 帳戶@ip
3. scp: /apps/dazhanghao/bundle_oas_test.tar.gz: No space left on device 磁盤空加滿
    - df -h 查看磁盤空間使用
    - 找到對應的查看
4. 擴展 linux 服務器 app 程序啓動方法
    - ctrl + r ，搜索 pm2
    - sudo pm2 start /home/admin/app/mssql/e+_cloud_test.js 啓動 node 程序
複製代碼