將 Angular 13 與 .NET Core 3.1 API 部屬在的同一個 IIS 站台
做一些微調，以下就紀錄我自己的步驟
先說明一下開發情境
前端是使用 Angular 13 開發，獨立的專案
後端 API 是使用 .NET Core 3.1 ，獨立的專案
所以我有兩個專案
我想讓前端與後端網址是同源的，後端就沒有設定CORS
另外因為有使用 xsrf-token，若前後端為非同源
Angular 就不會把 xsrf-token 傳到後端 API
雖然網路上有一些設定方式，但總覺得怪怪的
如果有知道非同源怎麼設定的話，歡迎留言分享給我哦
那麼就開始進入正題吧
設定 Angualr
設定後端 API 路徑
開啟 src\environments\environment.prod.ts 檔案
export const environment = {
production: true,
apiUrl: '/api'
};
新增IIS站台
開啟 IIS ，在站台按右鍵，點新增網站
設定站台名稱、專案的資料夾，與所要使用的 port 號
編譯 Angualr 專案
執行指令 ng build --configuration production
執行完成到專案目錄下的 dist 查看，並將檔案複製貼到 IIS 站台的根目錄資料夾下
詳細的步驟可參考此篇文章
https://greens2314.blogspot.com/2022/04/iis-angular-13.html
部屬 Angualr 專案
新增 web.config 檔
web.config 檔案內容跟官方建議的一樣 https://angular.tw/guide/deployment
但因為要跟 .NET Core API 共用一個站台
所以需要增加此行設定 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
其中 ^/(api) 的 api 就是站台下的應用程式名稱
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Project" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
到這邊 Angular 就可以正常運作了，接一下來是 .NET Core API 的設定
部屬 .NET Core API
在網站按右鍵，點新增應用程式
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
其中 ^/(api) 的 api 就是站台下的應用程式名稱
所以別名要打 api ，並設定實體路徑的資料夾
在把 .NET Core 發佈後的檔案放到 api 資料夾下即可
此時 Angular 與 .NET Core 就是同源的了，同時部屬在一起
報告完畢XD
留言
張貼留言