安裝iis

提示：非常重要：

如果電腦沒有自帶iis管理器，打開控制面板->程序->啟用或關(guān)閉Windows功能，勾選iis安裝即可

一、部署前端項目

打開iis，添加網(wǎng)站，物理路徑指向前端打包后文件夾

此時瀏覽器打開http://localhost:3000即可正常訪問，但是輸入其它路由刷新會404

★解決iis部署后vue、react項目刷新404問題

安裝url重寫功能

下載地址：https://www.iis.net/downloads/microsoft/url-rewrite

添加規(guī)則：下載安裝后，重啟iis后，找到站點，進入URL重寫模塊，添加空白規(guī)則

名稱隨意，選擇與模式匹配、通配符、*

添加兩個條件：不是文件，不是目錄

最后重寫url指向index.html即可

重啟站點，刷新不再404。

二、部署后端

部署后端程序之前，必須檢查IIS模塊中是否有AspNetCoreModuleV2。

雙擊模塊，查看列表中時候有AspNetCoreModuleV2，如果沒有就需要安裝.NET運行環(huán)境。

如果沒有必須安裝對應(yīng)的.NET運行版本，我安裝的是aspnetcore-runtime-6.0.36-win-x64.exe，
下載地址為：https://dotnet.microsoft.com/zh-cn/download/dotnet/thank-you/runtime-aspnetcore-6.0.36-windows-arm64-binaries
下載好之后就可以傻瓜式雙擊安裝（一直下一步）。
安裝好.NET環(huán)境后，把對應(yīng)的后端部署到位。

三、前端反向代理設(shè)置

前端請求接口地址是：http://localhost:3000/api/test
實際需要轉(zhuǎn)發(fā)到：http://localhost:3001/test

1.安裝Application Request Routing功能

下載地址：https://www.iis.net/downloads/microsoft/application-request-routing：

2.開啟反向代理

安裝好重啟iis，打開Application Request Routing，然后點擊Server Proxy Settings…，再勾選Enable proxy

3.添加代理規(guī)則

回到web站點，添加空白規(guī)則，與模式匹配，通配符，*api/*重寫URL，http://127.0.0.1:3001/{R:2}，勾選停止處理后續(xù)規(guī)則，為啥是{R:2}，通配符測試，因為我的后臺沒有api前綴，如果后臺有/api可以用{R:0}

如果啟用了swaggerUI，也需要設(shè)置proxy反向代理，否則提示404錯誤，添加URL重定向的空白入棧規(guī)則

規(guī)則順序

至此，重啟站點，打開http://192.168.50.126/api/index.html，也能訪問，這樣前端和后端接口就像是部署在一個端口下面。

總結(jié)

在IIS上部署前后端分離的項目，其實就是這么簡單，檢查.NET運行環(huán)境，配置前后端站點，設(shè)置代理，配置空白入站規(guī)則。

最新評論