一個指令快速部署 Vue Cli 到 GitHub Pages

發表於 2020-02-14 更新於 2020-11-26 分類於 Vue

一般來說我們使用 Vue Cli 開發一個作品完畢之後都會需要部署到特定空間來展示作品，舉例來講 GitHub Pages 就是一個，那麼這一篇就來介紹該如何一個指令快速部署吧。

前言

範例程式碼

這邊將會使用我先前做的一個串接 API 範例作品，也就是「六腳音樂大平台」

這個範例作品是我先前在六角學院的線上問答會所介紹的範例作品，如果你對於 KKBOX OPEN API 非常感興趣的話也歡迎你可以參考這一支 Youtube 影片，這邊我就直接放上影片。

一鍵部署基礎教學

首先我們通常要部署一個專案之前都會先輸入 npm run build，然後就會打包編譯出 dist 這個資料夾，如果你是用原始的方式，例如：cd dist … git init 次數多了其實也會煩，先前我的Vuejs部屬GitHub Pages 教學文章就是教你這樣做，但是開發時我們通常會很長 npm run build，所以接下來就會教如何一個指令部署到 GitHub pages。

首先我們先在專案底下建立一個叫做 deploy.sh 的檔案，然後內容是以下

#!/usr/bin/env sh

# 發生錯誤時執行終止指令
set -e

# 打包編譯
npm run build

# 移動到打包資料夾下，若你有調整的話打包後的資料夾請務必調整
cd dist

# 部署到自定義網域
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# 以這個專案來講就要改成這樣以下這樣，下面是走 ssh 模式
git push -f git@github.com:hsiangfeng/HexfootMusic.git master:gh-pages
# 除此之外，也可以改走 HTTPS 模式
# git push -f https://github.com/hsiangfeng/HexfootMusic.git master:gh-pages

cd -

接下來在終端機輸入
(ps. Window 用戶必須使用 git bash 意指 Git 提供的工具來執行指令。)

1	sh deploy.sh

你就會發現一件神奇的事情發生，它自動幫你打包編譯以及部署到 GitHub pages 上囉~

sh deploy.sh

其實這個做法在官方 Vue Cli 文檔就有教學，只是我一直都沒去認真翻文檔(該打)

此外 Vue Cli 官方還有提供相當多的其他部署方式，所以就留給你們自己摸索囉~

其他部署方式

補充說明 sh

sh 其實是 Linux 中的腳本檔案，全名是「shell」，是一個可以讓使用者執行各種任務的管理器，概念你可以看成類似 Gulp 一樣的任務管理器，所以在執行某些一系列指令時是相當好用的腳本指令唷。

Window 說明

由於 sh 在 Linux 系統下是可以直接執行的，所以如果你是 Mac 用戶，你是可以直接輸入 sh deploy.sh 直接執行指令，但是如果你是使用 Window 的話，那麼就必須使用 Git Bash，也就是 Git 的工具唷

圖源：Git 官方網站

懶人指令

上面的指令其實還需要去修改要走哪一個模式上傳，有時候其實還是很麻煩，更不用說如果我今天儲存庫換位子呢？那麼就會變成每次都要修改 deploy.sh 的檔案，這樣完全沒有符合一鍵快速部署的指令。

因此我寫了另一個懶人指令，連遠端儲存庫的 Url 都幫你省下來，這樣子才符合懶人(攤手)

但是要使用以下指令之前，這個專案必須已經有使用過 git clone 或是 git remote add origin [遠端儲存庫 Url]，否則是會出現錯誤，因為無法取得遠端儲存庫 Url。

基本上透過以下的指令碼來講，我已經幫你寫好自動辨別它會走那一個模式傳輸，所以完完全全你只需要輸入 sh deploy.sh 就可以搞定囉。

# 發生錯誤時執行終止指令
set -e

# 取得目前專案的遠端分支
originUrl=$(git config --get remote.origin.url)

# 注意若是出現以下 Url 就是走 SSH
# git@github.com:hsiangfeng/HexfootMusic.git
# 反之，若是 HTTPs 的話則是以下
# https://github.com/hsiangfeng/HexfootMusic.git
# 通常來講走 SSH 可能會出現 GitHub Public Keys 錯誤，這部分 Google 一下就可以解決囉。

nowStatus=${originUrl:0:5}
echo $nowStatus
if [ $nowStatus = 'https' ]
then
  echo '傳輸方式採用 HTTPs 模式'
  echo '目前遠端分支 URL：'$originUrl
else
  echo '傳輸方式採用 SSH 模式'
  echo '目前遠端分支 URL：'$originUrl
fi

# 打包編譯
npm run build

echo '移動目錄到編譯出來的 dist 資料夾'
#移動到打包資料夾下，若你有調整的話打包後的資料夾請務必調整
cd dist
# 初始化並設置 Git
git init
git add .
git commit -m "update `date +'%Y-%m-%d %H:%M:%S'`";

# 上傳到到 gh-pages
# 如果是走 SSH 的話可能會比較不好調整
git push -f $originUrl master:gh-pages

cd -

懶人指令

最後如果你要讓你的電腦可以順利執行「懶人指令」的話，會建議你自己要有先使用過 git push 確保你的電腦有曾經成功上傳原始碼到 GitHub，如果沒有上傳過的話，會建議你自己嘗試先上傳過一次。

否則應該會有很高的機會出現權限驗證或者是沒有權限的問題，如果真的發生的話，那麼就會建議你試著 Google 解決囉。

美化兼強化版懶人指令碼

接下來這邊底下是我美化兼強化版懶人指令碼，最主要是方便辨識執行流程，但是這邊還增加了一些功能

自動建立 vue.confing.js
- 會自動辨識是否存在 vue.confing.js 檔案，若不存在則自動建立與寫入，這個流程只會執行一次。
- publicPath 只會寫入「./」，詳細可以看裡面註解。
辨識作業系統（目前主要是 Mac 與 Window）
- ~~主要是因為色碼在 Window 錯有錯誤，所以才要辨識~~
自動編譯 build Vue Cli
- 你不用輸入 npm run build，流程會自動幫你跑完
自動取得當前專案的 GitHub 遠端路徑並加入版本控制
- 編譯完成後，他會自動幫你將 dist 加入版本控制與撈取你目前遠端分支，但這邊請注意，請務必執行過一次 git push 原始碼到你的 GitHub 儲存庫，否則有很高機率出錯。
自動部署 Vue Cli 到 GitHub Pages
- 編譯完成後會自動幫你部署到 GitHub Pages 並開始該分支。
~~美美的終端機提示~~

以下是相關載點

美麗的一鍵部署

參考文獻

Vue Cli 部署