.NET + Vue3 的前后端項目在IIS的發布

一、發布準備

1、安裝 IIS

2、安裝 Windows Hosting Bundle（.NET Core 托管捆綁包）

3、安裝 IIS URL Rewrite

二、項目發布

1、后端項目發布

2、前端項目發布

3、將項目部署到 IIS中

三、網站配置

1、IP配置

2、防火墻配置

3、跨域配置

4、web.config 文件配置

四、常見錯誤處理

1、CORS 錯誤

2、404.0錯誤

3、405錯誤

4、500.32錯誤

一、發布準備

想要發布一個項目，首先就要有一個可以正常運行的項目，這個肯定是必須的。廢話不多說，下面跟著我一起在 IIS 發布一個項目吧。

1、安裝 IIS

在搜索欄搜索 "windows 功能" ,打開找到里面的 “Internet Information serices” 和 “Internet Information Services 可承載的 Web 核心”。將其選上點擊[確定]。

在安裝 IIS 后，可以重啟一下電腦，不然后面可能會報錯。

2、安裝 Windows Hosting Bundle（.NET Core 托管捆綁包）

點擊官網下載 Windows Hosting Bundle

點擊下載后安裝，一直下一步傻瓜式安裝。下同。

3、安裝 IIS URL Rewrite

根據自己的電腦旋轉下載?IIS URL Rewrite。

點擊官網下載 IIS URL Rewrite

二、項目發布

1、后端項目發布

1）在項目中，右鍵項目，在彈出框中點擊 [發布]。

2）選擇 [文件夾] 后，點擊 [下一步]

3）然后可以修改文件位置，點擊 [完成]。

4）可以重命名文件夾，然后點擊 [顯示所有設置]，進行設置。

5）設置部署模式和目標運行時，設置后點擊保存。

部署模式有兩種模式，即依賴框架和獨立，兩者的區別大致為以來框架模式部署后需要目標電腦有運行環境，而獨立模式部署后是一個獨立的軟件，可以直接使用而不需要用戶另外安裝運行環境。

重要：（踩坑）在設置 目標運行時 的時候，一定要根據自己的電腦來選擇，不然后面部署后會報錯。

6）最后點擊 [發布]，等待發布完成。

7）在發布完成后，項目文件中多了個【publish】文件夾，里面全是發布好后的 .dll 文件和配置文件。這個文件夾名稱與步驟 2）中的文件夾命名一致。

2、前端項目發布

在vue 項目的終端，使用命令 npm run build 打包項目。

npm run build

在命令執行完成之后，會在項目目錄中有一個?dist 文件，這個就是前端打包好文件夾。

3、將項目部署到 IIS中

1）在 C 盤外的其它盤中新建一個文件夾，將前面發布項目得到的文件中的內容復制到這個文件夾中來。如果是放在 C盤，那么后面在文件操作的時候，會因為 IIS操作 C盤的權限帶來功能上的錯誤，如文件的訪問、修改和刪除。

2）打開 IIS，在 IIS的 [網站] 中 [右鍵] 添加網站。在配置好網站后，點擊 [確定] 后網站就創建成功了。這里端口一定要修改，避免端口已經被使用后出現報錯。

3）在 [應用程序池] 中，選中部署的項目，分別設置 .NET CLR版本和托管管理模式。重啟網站，就可以點擊瀏覽網站了。

三、網站配置

1、IP配置

1）安裝 win + R鍵，輸入cmd打開命令行工具。

2）在命令行工具中輸入 ipconfig 查看本機 IP 信息。

3）在 IIS 的網站中，選擇部署的項目，點擊 [綁定] ，分別配置 IP 地址。IP 地址為本地的 IP。

2、防火墻配置

項目部署后，如果想要在多臺設備上進行訪問，那么需要進行防火墻配置，允許其它設備訪問服務器的網址的端口。

1）在防火墻設置中，點擊 [高級設置]?

2）在?[入站規則] 新建規則，選擇 [端口] 后點擊[下一步]。

3）根據需要，選擇數據傳輸協議，配置端口。這里的端口是網站中配置的端口，必須保持一致。

下一步后，選擇 [允許連接]，然后在下一步，默認全部，然后再下一步，命名規則，并進行描述。

3、跨域配置

4、web.config 文件配置

Vue3使用 npm run build 命令發布后，生成的 dist中，可能會沒有 web.config配置文件，需要我們手動配置。新建 web.config文件后復制進去即可。

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><rewrite><rules><rule name="Handle History Mode and custom 404/500" stopProcessing="true"><match url="(.*)" /><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /></conditions><action type="Rewrite" url="/" /></rule></rules></rewrite></system.webServer>
</configuration>

四、常見錯誤處理

1、CORS 錯誤

報 CORS錯誤是由瀏覽器的同源策略引起的，即跨域問題。有時候明明在后端代碼中正確地配置了跨域，但是部署后它還是報這個錯誤，至于是什么原因，暫時還不知道是什么原因。既然知道這報這個錯誤是跨域的問題，那么只需要在后端項目的配置文件中配置跨域就可以了。

找到 web.config文件，添加下面代碼。

 <httpProtocol><customHeaders><!--響應類型 (用逗號隔開，對預檢請求的應答中明確了客戶端所要訪問的資源允許使用的方法或方法列表GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH)--><add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS"/><!--響應頭設置（用于預檢請求中，列出了將會在正式請求的 Access-Control-Request-Headers 字段中出現的首部信息。注意以下這些特定的首部是一直允許的：Accept, Accept-Language, Content-Language, Content-Type （但只在其值屬于 MIME 類型 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一種時）無需特意聲明。）--><add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/><!--響應頭指定了該響應的資源是否被允許與給定的origin共享，對于不需具備憑證（credentials）的請求，服務器會以“*”作為通配符，從而允許所有域都具有訪問資源的權限，如需指定域則可以設置允許跨域訪問的網址。--><add name="Access-Control-Allow-Origin" value="*" /><remove name="X-UA-Compatible"/><!--<add name="X-UA-Compatible" value="IE=8;IE=10;IE=9"/>--><add name="X-UA-Compatible" value="IE=11;IE=10;IE=9"/></customHeaders>
</httpProtocol>

2、404.0錯誤

這個錯誤是你項目文件夾中沒有項目導致的，看看你的網址指向的物理路徑是否正確，在指向的這個文件夾中是否有項目存在。

3、405錯誤

網址部署好后，想測試網址的功能是否正常，發現網址的數據獲取和新增功能都正常，但當修改和刪除數據時，發現網址報405錯誤，這是什么原因造成的呢？

其實，這是因為?IIS默認注冊了一個名為"WebDAVModule"的自定義HttpModule，它會默認拒絕 HTTP 的 PUT、DELETE請求，只允許 HTTP的 GET、POST請求。想要解決這個問題也很簡單：

在 IIS的網站中，找到 [模塊]后點擊 [打開功能]，找到?WebDAVModule，將其刪除即可。

如果將?WebDAVModule 刪除后發現還是報這個錯誤，那么在項目文件中，打開 web.config文件，在?system.webServer 里面添加?modules，將?HttpModule 移除。

<configuration><system.webServer><modules runAllManagedModulesForAllRequests="true"><remove name="webDAVModule"/></modules><system.webServer>
</configuration>