vue + webpack 前端專案持續釋出整合部署

RunTime發表於2017-11-27
VueWeb前端

場景

程式碼倉庫 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 && cd workspace)

    # 把 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.1.21.155:~

    # 連上目標伺服器上，進行相應的 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 程式複製程式碼

相關文章