# 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)