IIS部署 vue3+.net7+SignalR

目標服務器為window2016，IIS10.0

一.IIS使用安裝。

第一步，打開“控制面板”，進入啟動或關閉Windows功能頁面，系統會打開“服務器管理器”。

一直點下一步，進入到下述界面，其中常見HTTP功能中的WebDAV發布按需求選擇，這個功能會過濾掉一些請求謂詞，比如使用put、delete方式，導致無法正常請求，報Error 405 - Method Not Allowed，下面會有解決該問題的說明。

一直點下一步，等待安裝完成即可。

二.部署準備工作

光是下好IIS并不行，我們要部署前端還需要IIS中有“Web 平臺安裝程序”(點擊跳轉安裝)，下載完成后如下。

目前Web平臺安裝程序已經停止維護，官方下載鏈接失效，可以直接通過網址下載 URLRewrite 跟 Application Request Routing.進行安裝。

接著，我們需要在“Web 平臺安裝程序”中下載兩個模塊，分別 URLRewrite(點擊跳轉安裝) 和 Application Request Routing(點擊跳轉安裝)，安裝過程及完成后如圖所示。

然后，雙擊“Application Request Routing”，在右側操作中點擊“Proxy”中的“Server Proxy Settings...”，然后將“Enable proxy”打上勾即可

上面這一步必須配置了，后面發布的Vue項目URL重寫才能成功。

三.部署前端（以vue為主）

第一步，右擊“網站”后，點擊“添加網站”

第二步，如圖所示。

第三步，雙擊你創建部署的網站，在右側操作中，點擊“瀏覽網站”，即可訪問成功，如下圖。

到這一步部署只是部署了，能訪問，但是還有很多問題跟報錯，接下來解決錯誤。

四.問題與報錯

1.HTTP 錯誤 404.0 - Not Found(需重寫路由入口)

經過上面的部署后，我們會發現，如果刷新頁面或者跳轉路由，會報錯 ??

HTTP 錯誤 404.0 - Not Found

您要找的資源已被刪除、已更名或暫時不可用。

最可能的原因:

指定的目錄或文件在 Web 服務器上不存在。
URL 拼寫錯誤。
某個自定義篩選器或模塊(如 URLScan)限制了對該文件的訪問。
可嘗試的操作:

在 Web 服務器上創建內容。
檢查瀏覽器 URL。
創建跟蹤規則以跟蹤此 HTTP 狀態代碼的失敗請求，并查看是哪個模塊在調用 SetStatus。
詳細錯誤信息:

模塊 IIS Web Core
通知 MapRequestHandler
處理程序 StaticFile
錯誤代碼 0x80070002
請求的 URL http://xxx.xxx.x.xxx/login
物理路徑 C:\Users\Admin\Desktop\aa\dist\login
登錄方法匿名
登錄用戶匿名
詳細信息:

此錯誤表明文件或目錄在服務器上不存在。請創建文件或目錄并重新嘗試請求。

這個錯誤是由路由入口錯誤造成的，主要是因為沒有確定路由的入口，這個時候就需要我們去使用 URLRewrite 去重寫路由入口，保證每次路由請求都能從index.html主入口進入，保證路由的準確性，我這里簡單配置后，就可以刷新和路由跳轉了，具體如下。

(1).點擊“URL重寫”，然后點擊操作中的“添加規則”

(2).編輯規則，完成后在部署的網站中重啟，在點擊瀏覽網站，成功解決報錯。

注意：
名稱：名稱按功能命名即可
匹配URL：選擇使用正則表達式，然后模式根據請求的api來填寫，比如我請求的api地址全都是為'/api/---'，那我這里填寫 ^((?!(api)).)*$ 即可，會將URL中所有不含api文字的鏈接重寫為首頁。

2.請求調用不了(需要重寫請求地址)

這里重寫是根據我的devServer.proxy中的重寫來的，正則表達式只需將api替換為你定義的重寫名

3.地址顯示undefined

如果出現以下這種問題，先確定請求重寫規則是否設置并啟用了，若啟用了，則可能是因為部署地址的端口被占用。

修改操作如下，這樣之后就可以正常調用請求了。

4.前端Vue項目如需解決跨域問題可以通過下述方式解決(一般不需要)

方法一：手動設置

選中當前站點》右側找到HTTP響應頭》右側“增加”

Access-Control-Allow-Headers：AuthToken, Authorization, Origin, Content-Type, Accept, X-Requested-With

Access-Control-Allow-Methods：GET, POST, PUT, DELETE, OPTIONS

Access-Control-Allow-Origin：*
————————————————

方法二：站點根目錄的配置文件設置

1.新建一個txt

2.把下面代碼寫入到文件里

3.文件和后綴名改成 web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="AuthToken, Content-Type, Accept, X-Requested-With" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

5.如果Vue前端中有 POST請求，會出現 405 - 不允許用于訪問此頁的 HTTP 謂詞

1、為什么會出現這個錯誤？

我們可以理解為在當前IIS服務器上，html頁面只支持get請求，不支持post請求。

2、處理辦法

登陸遠程服務器，打開IIS管理工具，選擇出現此問題的站點，點擊進入“處理程序映射”–>”添加模塊映射”，在請求路徑錄入“*.html”，模塊選擇“ServerSideIncludeModule”,可執行文件不用選，名稱可以隨便填一個（例如：SSI-html），然后點擊“確認”即可。

如果在服務器上面找不到“ServerSideIncludeModule”模塊，提示“ServerSideIncludeModule不是可識別的本機模塊”，不著急，處理方案在這里

post提交訪問html頁面，需要ServerSideIncludeModule的支持，那服務器上面找不到這個模塊該怎么辦呢？不要著急，請接著往下面看

出現找不到的情況，是因為我們在安裝IIS服務的時候，少裝了一個叫“客戶端包含”的功能，按下面的步驟安裝好后，就能找到ServerSideIncludeModule了

win10安裝該功能的步驟
打開“windows功能”，打開“Internet Information Services”–>“萬維網服務”–>“應用程序開發功能”，選中“服務器端包含”，安裝即可。

6. .net core API 的項目，部分請求地址使用了put、delete方式，導致無法正常請求，報Error 405 - Method Not Allowed。

可能一：由于配置IIS時把“WebDAV 發布”給勾選了，所以會導致攔截。

解決方案

方案一：服務器上刪除“WebDAV 發布”（需在所有項目未用到該功能的前提下）

1、打開“控制面板”=》“程序和功能”

2、點擊“啟用或關閉windows 功能”

3、在服務器管理器中，找到“管理”=》“刪除角色和功能”

4、在“刪除角色和功能向導”=》一步步往下走，找到“服務器角色”=》“web服務器(IIS)”=》“Web服務器”=》“常見HTTP功能”=》“WebDAV發布”，勾選去掉，然后繼續點擊下去。

5、最后重啟服務器即可。

方案二，修改.net core api 發布文件中的web.config文件，在 modules 和 handlers 移除掉WebDav模塊

 <system.webServer> 
   <modules runAllManagedModulesForAllRequests="true"> 
     <remove name="WebDAVModule" /> 
   </modules> 
   <handlers>
      <remove name="WebDAV" />
   </handlers>
 </system.webServer>

可能二：AspNetCoreModule模塊對請求謂詞進行了攔截，通過下述圖片說明進行修改。

五、以開源前后端分離項目成功掛載到IIS的經歷作為總結。

文件鏈接 https://gitee.com/izory/ZrAdminNetCore https://gitee.com/izory/ZRAdmin-vue 我的部署方式為部署成兩個站點，同一ip，端口不一樣。

vue 項目的開發環境設置 .env.development 文件 5030是后端接口

# 開發環境配置
ENV = 'development'

VITE_APP_API_HOST = 'http://localhost:5030'

# 開發環境
VITE_APP_BASE_API = '/dev-api'

# 路由前綴
VITE_APP_ROUTER_PREFIX = '/'

# 默認上傳地址
VITE_APP_UPLOAD_URL = '/Common/UploadFile'

#socket API
VITE_APP_SOCKET_API = '/msghub'

vite.config.js 中的部分代碼 5020是前端vue項目運行端口

 server: {
      port: 5020,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: env.VITE_APP_API_HOST,
          changeOrigin: true, //是否允許跨越
          rewrite: (path) => path.replace(/^\/dev-api/, '')
        },
        '/msghub': {
          target: env.VITE_APP_API_HOST,
          ws: true,
          rewrite: (path) => path.replace(/^\/msgHub/, '')
        }
      }
    }

.env.production 發布文件我使用的是ip發布，填寫的是ip地址

# 生產環境配置
ENV = 'production'

VITE_APP_API_HOST='http://xxx.xx.xx.xx:5030'
# 生產環境
VITE_APP_BASE_API = '/prod-api'

# 路由前綴
VITE_APP_ROUTER_PREFIX = '/'

# 默認上傳地址
VITE_APP_UPLOAD_URL = '/Common/UploadFile'

#socket API
VITE_APP_SOCKET_API = '/msghub'

IIS上新建個Vue站點，設置如下：

使用 yarn build:prod 命令將Vue 項目打包，拷貝dist目錄下的文件到IIS站點的發布目錄下，即上圖中高級設置中的物理路徑下

在該目錄下新建個web.config文件，填寫為下述文件，保存重啟網站即可（注意在iis管理控制臺對該網站的任何操作修改，都會更新到web.config）。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
                <clear />
                <rule name="prod-api" stopProcessing="true">
                    <match url="^(.*?)prod-api/(.*)$" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://localhost:5030/{R:2}" />
                </rule>
                <rule name="msghub" enabled="true" stopProcessing="true">
                    <match url="^(.*?)msghub(.*)$" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://localhost:5030/msghub{R:2}" />
                </rule>
                <rule name="Handle History Mode and custom 404/500" enabled="true" stopProcessing="true">
                    <match url="^((?!(api|msghub)).)*$" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
      </rules>
    </rewrite>
        <modules runAllManagedModulesForAllRequests="true">
            <remove name="WebDAVModule" />
        </modules>
        <handlers>
            <remove name="WebDAV" />
        </handlers>
        <security>
            <requestFiltering>
                <verbs>
                    <add verb="POST" allowed="true" />
                </verbs>
            </requestFiltering>
        </security>
  </system.webServer>
</configuration>


rules 我添加了三個URL重寫：

1.由于前端的請求地址都帶有 prod-api 前綴，將帶有 prod-api 的請求URL全部重寫到后臺端口..

2.SignalR通信，將帶有 msghub的請求重寫，只需要改端口將前臺接口5020重寫到后臺接口5030上。

3.將所有不帶 api 、msghub 字樣的URL 重寫為/

我將網站的WebDAV發布進行了移除。由于SignalR通信 http://xxx.xxx.x.xxx:5020/msghub/negotiate?negotiateVersion=1 使用Post請求，在請求篩選的HTTP謂詞中加了POST

.net 7 API發布的話由于Program.cs文件中處理了Cors，跨域不需要做其他工作

var corsUrls = builder.Configuration["corsUrls"]?.Split(',', StringSplitOptions.RemoveEmptyEntries);

//配置跨域
builder.Services.AddCors(c =>
{
    c.AddPolicy("Policy", policy =>
    {
        policy.WithOrigins(corsUrls == null ? Array.Empty<string>() : corsUrls)
        .AllowAnyHeader()//允許任意頭
        .AllowAnyMethod()//允許任意方法
        .AllowCredentials();//允許cookie SignalR要求必須開啟 AllowCredentials，而AllowCredentials需要和WithOrigins配對出現。
    });
});

另外如果安裝IIS的時候勾選了安裝WebDAV模塊的話，也需要在發布后的Web.config中對該模塊進行移除.

IIS 如果報錯 500.19 位置在 <modules runAllManagedModulesForAllRequests="true"> 這一句的話

解決辦法：

出現這個錯誤是因為 IIS 7 采用了更安全的 web.config 管理機制，默認情況下會鎖住配置項不允許更改。要取消鎖定可以以管理員身份運行命令行 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers 。其中的 handlers 是錯誤信息中紅字顯示的節點名稱。

如果modules也被鎖定，可以打開命令提示符（管理員）運行 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules

%windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules

注意：要以管理員身份運行才可以，默認不是管理員身份，方法，在開始菜單中的搜索程序與文件輸入CMD，就會在上方出現一個CMD.EXE，在這個CMD.EXE文件上點擊鍵，選擇“以管理員身份運行”，打開命令行窗口，輸入以上命令即可。
另外，如果使用Asp.net的朋友，在安裝IIS7的時候一定記得勾選Asp.net，默認不選，也會出現類似的錯誤信息

如果出現下圖的錯誤，提示服務沒啟動，可以檢查運行環境及后臺程序里的appsettings.json文件。目前已知的比如連接字符串加上 Integrated Security=SSPI 就會有如下的錯誤。

打開事件查看器：

可以定位到具體錯誤。如下所示是由于數據庫連接字符串錯誤導致的。

如果前端請求參數過長或者上傳文件過大的話可以通過在Program中的下述配置更改：

            //配置文件大小限制
            services.Configure<FormOptions>(options =>
            {
                options.ValueLengthLimit = int.MaxValue;
                options.MultipartBodyLengthLimit = int.MaxValue;// 60000000; 
                options.MultipartHeadersLengthLimit = int.MaxValue;
            });

如果是在VS中調試的項目，需要修改項目根目錄 .vs\YundiErp\config\applicationhost.config 中找到<requestFiltering>節點添加

 <requestLimits maxAllowedContentLength="1073741824" />

如果是發布到IIS上的項目，找到web.config在<system.webServer>節點下添加。注意以后每次發布不要覆蓋掉該web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<security>
<requestFiltering>

<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
</system.webServer>
</configuration>

修改IIS中配置->配置編輯器 system.webServer/serverRuntime 節點

修改ASP中修改最大請求實體主體限制

https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.aspnetcore.http.features.formoptions.valuelengthlimit?view=aspnetcore-7.0

另外如果服務器重啟，訪問網站出現500相關錯誤的話，可以嘗試著將后臺網站項目停止，應用程序池停用，再重新啟用，重啟網站。

前臺訪問靜態資源都是OK，訪問后臺接口都是404的話，這個情況一般都是URL重寫未生效。注意留意“Application Request Routing”--“Proxy”--“Server Proxy Settings...”，-“Enable proxy” 是不是勾選狀態。

另外應用程序池很多時候默認是這樣的：

如果需要加載用戶配置文件，需要切換為True.

.net core api 詳細部署相關可以參考這篇文章，.net core 3.1-9.0 都適合，無非是安裝的包的版本不一樣：http://www.rzrgm.cn/riddly/p/13747989.html

參考鏈接：https://blog.csdn.net/weixin_43721856/article/details/128248201

http://www.rzrgm.cn/mzflog/p/16039932.html

posted @ 2023-03-14 17:32 淺巷深念閱讀(3120) 評論(0) 收藏舉報

刷新頁面返回頂部

淺巷深念