部屬Angular App到IIS

步驟

1. 在部屬之前,記得先下載IIS的URL Rewrite模組,解決Angular路由的問題

2. 要Angular專案部署,先執行下列命令(cli)

 ng build –base-href “/AngularTest/” –prod (可取AngularTest之外的任何名稱)

若執行成功,該Angular專案會多出dist資料夾。該資料夾包含部屬需要的檔案

3. 新建新的資料夾,將dist資料夾裡的檔案複製並移到剛已新建的資料夾裡。該新資料夾為IIS要部屬專案的路徑。其實你用原本angular cli建的dist也可以。會新建新的資料夾主要是因為每次執行Angular專案部屬命令,都會重新更新web.config的內容。反之,如果你將新資料夾為新IIS應用程式的路徑,你可避免這問題。

4. 在IIS裡創新增應用程式。注意應用程式名要跟 cli裡的base href相同。例如本文用的別名為AngularTest,則該IIS應用名稱也應為AngularTest。然後將已新建的資料夾或原dist路徑寫在下圖實體路徑(P)裡

5. 加入下列URL rewrite Role在web.config檔案裡

執行成功畫面