Angular 發佈應用

當你準備把 Angular 應用部署到遠程服務器上時，有不少可選的部署方式。 ###最簡單的部署選項

在完整部署應用以前，你能夠先臨時用一種技術來測試流程、構建配置和部署行爲

• 從磁盤構建和提供服務 在開發過程當中，你一般會使用 ng serve 命令來藉助 webpack-dev-server 在本地內存中構建、監控和提供服務。可是，當你打算部署它時，就必須使用 ng build 命令來構建應用並在其它地方部署這些構建成果。 ng build 和 ng serve 在構建項目以前都會清除輸出文件夾，但只有 ng build 命令會把生成的構建成果寫入輸出輸出文件夾中。

默認狀況下，輸出目錄是 dist/project-name/。要輸出到其它文件夾，就要修改 angular.json 中的 outputPath。

當開發臨近收尾時，讓本地 Web 服務器使用輸出文件夾中的內容提供服務可讓你更好地瞭解當應用部署到遠程服務器時的行爲。你須要用兩個終端才能體驗到實時刷新的特性。

• 在第一個終端上，在*監控（watch）*模式下執行 ng build 命令把該應用編譯進 dist 文件夾。

ng build --watch
複製代碼

與 ng serve 命令同樣，當源文件發生變化時，就會從新生成輸出文件。

• 在第二個終端上，安裝一個 Web 服務器（好比 lite-server ），而後使用輸出文件夾中的內容運行它。例如：

lite-server --baseDir="dist"
複製代碼

每當輸出了新文件時，服務器就會自動刷新你的瀏覽器。

該方法只能用於開發和測試，在部署應用時，它不受支持，也不是安全的方式。

• 簡化的部署方式 最簡化的部署方式就是爲開發環境構建，並把其輸出複製到 Web 服務器上。

  1. 使用開發環境進行構建

  ng build --prod
  複製代碼

  2. 把輸出目錄（默認爲 dist/）下的每一個文件都複製到到服務器上的某個目錄下。

  3. 配置服務器，讓缺失的文件都重定向到 index.html 上。 欲知詳情，參見稍後的服務端重定向部分。

這是對應用進行生產環境部署的最簡方式。

• 發佈到 GitHub pages（頁面服務）

另外一種發佈 Angular 應用的簡單途徑是使用 GitHub Pages。

1. 你須要建立一個 GitHub 帳號（若是沒有的話），而後爲你的項目建立一個倉庫。記下 GitHub 中的用戶名和項目名。

2. 使用 Angular CLI 命令 ng build 來構建這個 GitHub 項目，選項以下：

ng build --prod --output-path docs --base-href //
複製代碼

3. 當構建完成時，把 docs/index.html 複製爲 docs/404.html。

4. 提交你的更改，並推送。

5. 在 GitHub 的項目頁中，把該項目配置爲從 docs 目錄下發布。

你能夠到 https://<user_name>.github.io/<project_name>/ 中查看部署好的頁面。

參見 angular-cli-ghpages，這個包用到了所有這些特性，還提供了一些額外功能。