快捷導(dǎo)航

iis部署前后端分離項(xiàng)目全過程(Vuet前端和.NET6后端)

更新時(shí)間：2025年01月23日 09:19:57 作者：lijinchang2

這篇文章主要介紹了如何在IIS上部署前后端分離的項(xiàng)目,包括安裝iis管理器、部署前端項(xiàng)目、解決刷新404問題、部署后端程序、設(shè)置前端反向代理等步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

安裝iis

提示：非常重要：

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

一、部署前端項(xiàng)目

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

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

★解決iis部署后vue、react項(xiàng)目刷新404問題

安裝url重寫功能

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

添加規(guī)則：下載安裝后，重啟iis后，找到站點(diǎn)，進(jìn)入U(xiǎn)RL重寫模塊，添加空白規(guī)則

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

添加兩個(gè)條件：不是文件，不是目錄

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

重啟站點(diǎn)，刷新不再404。

二、部署后端

部署后端程序之前，必須檢查IIS模塊中是否有AspNetCoreModuleV2。
在這里插入圖片描述
雙擊模塊，查看列表中時(shí)候有AspNetCoreModuleV2，如果沒有就需要安裝.NET運(yùn)行環(huán)境。

如果沒有必須安裝對(duì)應(yīng)的.NET運(yùn)行版本，我安裝的是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)境后，把對(duì)應(yīng)的后端部署到位。
在這里插入圖片描述

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

前端請(qǐng)求接口地址是：http://localhost:3000/api/test
實(shí)際需要轉(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，然后點(diǎn)擊Server Proxy Settings…，再勾選Enable proxy
在這里插入圖片描述

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

回到web站點(diǎn)，添加空白規(guī)則，與模式匹配，通配符，*api/*重寫URL，http://127.0.0.1:3001/{R:2}，勾選停止處理后續(xù)規(guī)則，為啥是{R:2}，通配符測(cè)試，因?yàn)槲业暮笈_(tái)沒有api前綴，如果后臺(tái)有/api可以用{R:0}
在這里插入圖片描述
如果啟用了swaggerUI，也需要設(shè)置proxy反向代理，否則提示404錯(cuò)誤，添加URL重定向的空白入棧規(guī)則

規(guī)則順序