iT邦幫忙

0

將Angular7 App佈署至GitHub Pages - Part2

WM 2019-05-06 11:35:47476 瀏覽

相較於Part1只佈署dist資料夾,這次要說明如何佈署整個Angular專案。

  1. 執行npm i angular-cli-ghpages安裝angular-cli-ghpages套件,利用此套件佈署專案。
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573EjtmfalZk4.png

  2. 建立新專案

  3. 建立新repository

  4. 執行git remote add origin https://github.com/[帳號]/[repository名稱].git,將repository的url新增至git的remote,預設名稱是origin。執行git push -u origin master,將master分支,推到origin(url)。
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573StTnd6JwRd.png
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573iALoOkG9bE.png

  5. push之後,會發現一個警告。表示GitHub發現套件有潛在的漏洞,點入看詳情。
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573jesTLbIe9i.png
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573YYMSvdjGNx.png

  6. 信息顯示,建議將tar這個部分,版本升級到至少4.4.2以上。
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573BKRRMFZxUq.png
    修改
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573OTUbzVz8kA.png
    push
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573BESPCuNUXx.png
    就不會有警告訊息了

  7. 執行ng build --prod --base-href /[repository名稱]/,build完之後,dist底下會有一個同專案名稱的資料夾。

  8. 執行npx ngh --dir=dist/[專案名稱]。此命令會在GitHub建立分支gh-pages,並push dist底下資料夾內的靜態網頁至GitHub。
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573SGZpZiJ4un.png

  9. 確認分支gh-pages
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573KKSkB7VNKC.png

  10. 進入Settings
    https://ithelp.ithome.com.tw/upload/images/20190503/201125737duQpBFLIy.png
    在GitHub Pages區域看到超連結
    https://ithelp.ithome.com.tw/upload/images/20190503/20112573Dty7FkJ83M.png
    點擊會就出現佈署的網頁


尚未有邦友留言

立即登入留言