iT邦幫忙

0

將Angular7 App佈署至GitHub Pages - Part1

WM 2019-05-04 10:35:20581 瀏覽

之前一篇說明如何在本機端預覽Angular build後的結果,接下來要說明如何在GitHub Pages佈署Angular應用程式。

目前的環境:
https://ithelp.ithome.com.tw/upload/images/20190429/20112573OaBb0SI436.png

需具備知識:
-Git : addcommitclonepush
-Angular : 建立專案ng new、建置專案ng build --prod

把dist資料夾部署至GitHub Pages

  1. 請先申請GitHub帳號,登入之後在畫面右上角下拉式選單建立新的repository。
    https://ithelp.ithome.com.tw/upload/images/20190429/20112573q7rIfKyiGd.png

  2. 在Repository name欄位輸入名稱,綠色勾勾表示沒有重複的名稱,可以使用。
    OK之後,按下Create repository綠色按鈕。
    https://ithelp.ithome.com.tw/upload/images/20190429/20112573QqAPDDg5R4.png

  3. 建立新的repository之後,進入Settings。
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573aOR2vlPISI.png

  4. 在GitHub Pages區域,選取佈景主題。
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573vjYUPDqqfO.png

  5. 隨便選取一個主題。https://ithelp.ithome.com.tw/upload/images/20190501/20112573rh1WzAlc7E.png

  6. 選取完畢,再次進入Settings頁面,會發現GitHub Pages區域多了一個網頁超連結,點選該連結。
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573y4ZhRBNN5Z.png
    若顯示404請稍等幾分鐘或再次更換主題(GitHub Pages有時會怪怪的),
    https://ithelp.ithome.com.tw/upload/images/20190502/20112573f6L3JYkufk.png
    應該就會成功了。
    https://ithelp.ithome.com.tw/upload/images/20190501/2011257389wOgQYAYk.png

  7. 進入repository頁面,copy HTTPS。
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573k4vtejCsu3.png

  8. 在命令提示字元中,輸入git clone [copy的HTTPS],將整個Repository clone到本地端。
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573lwWq8bZHgJ.png

  9. GitHub Pages網址是https://s164975.github.io/AngularApp/s164975是帳號名稱,而AngularApp是repository的名稱。可以說目前專案是建立於https://s164975.github.io/ 網域之下的,所以只要把靜態網頁檔丟入AgularApp repository之中,就可以呈現網頁了。

  10. 建立專案(NgDemo),index.html有個<base href="/">tag,表示Angular的起始根url是/,由於GitHub Pages網址格式的關係,我們必須將/修改成/AngularApp/,Angular應用程式才能在GitHub Pages呈現。在ng build --prod之後加上--base-href /AngularApp/,表示將<base href="/">/改成/AngularApp/
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573iLTHPZlr8Q.png
    進入建置產生的dist資料夾中的index.html,確認是否修改成功。
    https://ithelp.ithome.com.tw/upload/images/20190501/20112573UDkViRX9vS.png

  11. 將dist資料夾中的全部檔案copy至稍早clone至本地端的資料夾(AngularApp),
    https://ithelp.ithome.com.tw/upload/images/20190502/20112573w1kMHzSJfD.png
    commit後,push至Github。
    https://ithelp.ithome.com.tw/upload/images/20190502/20112573p6jGjJ5zyB.png

  12. 成功
    https://ithelp.ithome.com.tw/upload/images/20190502/20112573mWK5oxSce6.png


尚未有邦友留言

立即登入留言