Day14 【牙起來】 ng build - 產品包版與建置

如果今天替客戶寫好一個動態網頁，總不能將Angular的Source Code直接給客戶
叫他先照著教學一步步安裝環境及Angular，最終再讓他執行ng serve把程式執行起來吧

所以取而代之的，我們會把程式碼包裝成一整包檔案給客戶
讓客戶只要把這一包東西放到網頁伺服器資料夾底下，就可以運作

ng build - 包版

把昨天的完成品進行包版

此步驟會巡所有用到的檔案、套件，通通打包起來
並且把Typescript的程式編譯成Javascript檔案

> ng build

之後便會看到一個 dist 資料夾

點進去看，有一個專案名稱的資料夾
這包檔案就是給客戶的最終檔案

再點進 project02 這包檔案來看

有一個 index.html 就是入口檔案

若直接點擊開來，會出現一整片白畫面

按下F12來看，會看到一堆錯誤訊息

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol 提示CORS同源政策的問題

關於CORS同源政策未來有機會提到

部署到網頁伺服器上

這邊以 xampp 的 Apache 部署為例

預設網頁根目錄位置是 htdocs 資料夾
以下的 www 資料夾 是我手動設定Apache的網頁根目錄位置

情境1. 將網頁部署到根目錄位置

此情況屬於 此網頁伺服器只專門給此專案使用

直接把剛剛build出來的dist/project02資料夾 內 的檔案
全部放到網頁根目錄的位置

確認 www/index.html 內的 base 路徑 為<base href="/">

接著以瀏覽器打開http://127.0.0.1/

完成結果如下

情境2. 將網頁以專案資料夾區分，部署到資料夾內

如果網頁伺服器底下已有多個專案，是依照路徑區分個別專案的情況時

譬如BIZ、project01...等等資料夾，都是我網頁伺服器其中一個專案時

現在把剛剛build出來的dist/project02資料夾 整包檔案
放到網頁根目錄的位置

接著要更改 project02/index.html 內的 base 路徑

更改為當前的路徑 <base href="./">

最後在瀏覽器網址輸入http://127.0.0.1/project02/

完成結果如下

恭喜你到目前為止，已完成Angular100%的課程 (Level1)