1. 程式人生 > WINDOWS開發 >ASP.NET Core WebApi+Vue前後端分離的iis部署

ASP.NET Core WebApi+Vue前後端分離的iis部署

  隨著ASP.NET Core的日益完善,本人也想把他用於日後的生成環境中,所以現在自己的學習專案中體驗了一把,專案採用的是ASP.NET Core WebApi+Vue+element開發的一個後臺管理系統。平時執行的時候都是通過vs啟動 IIS Express來發布後端api,前臺ui則通過nodejs進行部署。最近嘗試把系統部署到 IIS,可在部署的過程中遇到許多的問題,所以特此記錄。

1.後臺webapi的部署

具體的部署步驟就不細說了,這裡有兩點需要注意:

第一:由於系統採用的目標框架是 .NET Core 3.1 所以對於應用程式池的 .NET CLR版本要選擇無託管程式碼

技術分享圖片

第二:在webconfig中指定處理程式

百度出來的教程基本只提到第一點中的設定,所以要是釋出一直步成功可以檢測下是不是少了下面的配置呢。技術分享圖片

2.前臺UI的部署

由於採用的是前後臺分離的模式所以涉及到了跨域,在node下跨域是通過vue.config進行處理的配置如下(埠88是後臺webapi的部署埠)

技術分享圖片

node會將所有api和swagger開頭的請求代理到88埠。但是部署到IIS後所有對api的請求都返回了404,怎麼這個代理就失敗了呢,通過查閱vue.config的官方文件才找到了原因,這個代理只有在開發環境下才生效。

技術分享圖片

那在IIS中怎麼將請求代理到88的webapi呢?那就是通過url重寫來實現。

下載URL Rewrite

下載Application Request Routing

啟用ARR

(1)進入ARR設定

技術分享圖片

(2)進入代理設定

技術分享圖片

(3)啟用代理

技術分享圖片

URL重寫設定

(1)進入URL重寫設定

技術分享圖片

(2)新增規則

技術分享圖片

(3)選中空白規則

技術分享圖片

(4)設定匹配模式

技術分享圖片

(5)設定操作

提示{R:2}的意思請參考這篇博文:詳解IIS中的重寫工具下關於操作重定向URL中的{R:N}與{C:N}

技術分享圖片

至此前臺的釋出也已配置完畢所有以 http://localhost:89/api/開頭的請求都會被重寫到88埠。