免費在 GitHub Pages 執行你的 Angular 應用程式

栏目: JavaScript · 发布时间: 5年前

内容简介:GitHub 除了提供版控的功能,還有一個服務叫做畢竟他是個免費的服務,有一些限制你必須先知道:基本流程如下:

GitHub 除了提供版控的功能,還有一個服務叫做 GitHub Pages ,可以透過他來架設靜態網頁,甚至還有提供綁定網域名稱的功能,因此這對於想用來展示作品集、做單頁式行銷,甚至拿來部屬 SPA 應用程式都是可以的,這篇來分享如何將 Angular 應用程式佈署到 GitHub Pages,輕鬆地展示你的開發成果。

GitHub Pages 的限制

畢竟他是個免費的服務,有一些限制你必須先知道:

.htaccess

佈署 Angular 到 GitHub Pages

基本流程如下:

  1. 建立 GitHub 專案
  2. 執行 npm i -g angular-cli-ghpages 安裝 angular-cli-ghpages 至全域環境
  3. 執行 ng build --prod --base-href /GITHUB_PROJECT_NAME/ 修改 index.html 的 base href 並產生要佈署的檔案
  4. 執行 npx nghdist 資料夾下的 Angular App 佈署到 Github Pages
  5. 開啟網站 http://GITHUB_ACCOUNT.github.io/GITHUB_PROJECT_NAME

這邊用一個很久以前在練習 Angular 2 的專案 poychang/angular-tour-of-heroes 做示範。

前置作業

首先執行 npm i -g angular-cli-ghpages 安裝 angular-cli-ghpages 套件,或用 ngh --version 檢查本機是否已經有安裝過了。

免費在 GitHub Pages 執行你的 Angular 應用程式

將專案從 GitHub Clone 到本機後,還原相依的 npm 套件。

免費在 GitHub Pages 執行你的 Angular 應用程式

建置專案

這是重點步驟,在執行 ng build 建置專案時,需要一個重點參數 --base-href

因為 GitHub Pages 會給你一個像 GITHUB_ACCOUNT.github.io 這樣的網域,其中 GITHUB_ACCOUNT 就是你的 GitHub 帳號,而專案的網址會是基於這個網域之下,會長的像 GITHUB_ACCOUNT.github.io/GITHUB_PROJECT_NAME 這樣,其中 GITHUB_PROJECT_NAME 就是你在 GitHub 上面建立的專案名稱。

而 Angular 應用程式會基於 index.html 中的 base href 當作應用程式的根目錄,預設會設定 / 使用網站根目錄當起始點。

免費在 GitHub Pages 執行你的 Angular 應用程式

這裡我們希望將 index.html 中的 base href 修改成如下圖這樣,使用 /angular-tour-of-heroes/ 當作 Angular 應用程式的起始目錄。

免費在 GitHub Pages 執行你的 Angular 應用程式

要做到這效果,我們執行 Angular CLI 建置命令時要加上 --base-href 參數,如 ng build --prod --base-href /angular-tour-of-heroes/ ,使之在建置時幫我們修改 index.html 中的 base href

請注意!這裡所設定 base-href 要跟 GitHub 專案名稱一樣,且要注意大小寫。

免費在 GitHub Pages 執行你的 Angular 應用程式

佈署至該專案的 GitHub Pages

其實佈署到 GitHub Pages 就是在該 GitHub 專案中建立一個 gh-pages Git 分支,然後將建置專案後的靜態檔案上傳上去即可。

透過 angular-cli-ghpages 這個套件,讓我們可以在專案目錄下,簡單執行 npx ngh 指令,讓這些動作自動完成。

免費在 GitHub Pages 執行你的 Angular 應用程式

如果你要佈署的是 Angular 6 以上版本的專案,因為 Angular CLI 會在 dist 資料夾下建立對應你 app 名稱的資料夾,因此你需要手動指定靜態檔案的來源位置,指令如下,其中 PROJECT_NAME 就是你 Angular 專案中的 App 名稱:

npx ngh --dir=dist/PROJECT_NAME

如果你想知道執行過程中詳細的 log 訊息,可以執行 npx ngh --no-silent 指令,將過程中的訊息顯示出來。從 log 中你也可以清楚的知道,他背後的動作其實就只是一系列 Git 的操作而已。

免費在 GitHub Pages 執行你的 Angular 應用程式

npx 是甚麼? npx 是 NPM 5.2 版後加入的命令,方便開發者使用套件中所提供的命令列工具,例如 ./node_modules/.bin/webpack -v 這樣的命令,可以改用 npx webpack -v 來執行。

開啟網站

完成上述的建置及佈署後,就可以開啟瀏覽器,輸入 https://poychang.github.io/angular-tour-of-heroes/heroes 來檢視你的 Angular 應用程式囉。

免費在 GitHub Pages 執行你的 Angular 應用程式

後記

有了免費的前端站台,如果你還需要後端站台來提供 API 服務了話,可以 註冊一個 Azure 帳號來玩玩看,Azure 提供了很多免費的服務可以玩,尤其是 Web App 的免費方案非常實用,還可以輕鬆架設後端 API 站台,但是僅適用於流量不高且沒有自訂網域需求的情境下,但展示站台本來流量就不高,而且對於後端 API 來說,自訂網域也沒有那麼重要(畢竟使用者不會看到)。

集成了 GitHub 和 Azure 兩個重量級的網路資源,讓你輕鬆展示作品集 <3

參考資料:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序开发心理学

程序开发心理学

(美)杰拉尔德·温伯格 / 邓俊辉 / 清华大学出版社 / 2004-1-1 / 39.00元

本书开创"以人为本"研究方法的先驱,在长达25年的岁月中一直保持活力,至今仍在继续。1997年,本书作者温伯格因其在软件领域的杰出贡献,被美国计算机博物馆的计算机名人堂选为首批5位成员之一。 在计算机界,还没有任何一本计算机方面的书,在初次出版之后,能够在长达25年的岁月中一直保持活力--而且这种活力到今天仍在继续。《程序开发心理学》是开创"以人为本"研究方法的先驱,它以其对程序员们在智力、......一起来看看 《程序开发心理学》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试