在 IIS 中部署 SPA 應(yīng)用，多么痛的領(lǐng)悟

作者 | 小碼甲

來源 | 全棧碼農(nóng)畫像（ID：nodotnet）

頭圖 | CSDN 下載自東方IC

目前公司的 Web 項(xiàng)目是 SPA 應(yīng)用，采用前后端分離開發(fā)，所以有時(shí)也會倒騰 Vue 框架。

前后端應(yīng)用最終以容器形態(tài)、在k8s中部署, 為此我搭建了基于Gitlab flow的Devops流程。

在 Devops 實(shí)踐中，容器部署成為良方和事實(shí)標(biāo)準(zhǔn)。

但是在開發(fā)和自測階段，不要濫打鏡像，前后端團(tuán)隊(duì)還需要一個(gè)友好的聯(lián)調(diào)+自測的驗(yàn)證環(huán)境，最友好、最順手的 web 服務(wù)器當(dāng)屬 IIS，(后端 API 已經(jīng)使用 WebDeploy 部署到 IIS)，本文記錄使用 IIS 托管 Vue 應(yīng)用的姿勢。

前置條件：安裝IIS、Url Rewrite Module !!!

1. 部署Vue應(yīng)用

我們以Github上Vue Todo應(yīng)用為例，執(zhí)行 yarn build

如果 build 成功，你會發(fā)現(xiàn)生成了一個(gè) dist 靜態(tài)資源文件夾。

2. 創(chuàng)建web.config

將 yarn 生成的 dist 文件夾拷貝到 C:dist，并添加以下web.config 文件，這個(gè)文件實(shí)際是我們在 IIS Url-Rewrite module 上配置的結(jié)果。

<?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><httpErrors><remove statusCode="404" subStatusCode="-1" /><remove statusCode="500" subStatusCode="-1" /><error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" /><error statusCode="500" path="/survey/error" responseMode="ExecuteURL" /></httpErrors><modules runAllManagedModulesForAllRequests="true"/></system.webServer></configuration>

3. 在IIS上部署Vue應(yīng)用

點(diǎn)擊確定

4.運(yùn)行Vue應(yīng)用

Nice！現(xiàn)在你的 Vue 靜態(tài)應(yīng)用就運(yùn)行在IIS上。

But，在前后端分離模式中，我們的 Vue 應(yīng)用不僅有靜態(tài)資源，還要發(fā)起動(dòng)態(tài) api 請求。

一般情況下webpack打包后的api請求路徑是/, 會嘗試請求同域名下api資源，實(shí)際并不存在。

我們需要將對 Vue 應(yīng)用的 api 請求代理到真實(shí)后端地址。

5. 反向代理動(dòng)態(tài)api請求

Vue 應(yīng)用站點(diǎn)還要充當(dāng)一部分反向代理服務(wù)器的作用。

假設(shè)真實(shí)后端 api 地址部署在10.200.200.157:8091地址上，api 請求以 /api 為前綴。

下面利用Url Rewrite Module 反向代理api請求到真實(shí)后端：

點(diǎn)擊站點(diǎn)功能視圖---> Url重寫---> 添加入站規(guī)則

Url重寫的結(jié)果其實(shí)就是下面的web.config文件

<?xml version="1.0" encoding="utf-8"?><configuration><!-- To customize the asp.net core module uncomment and edit the following section.  For more info see https://go.microsoft.com/fwlink/?linkid=838655 --><system.webServer><rewrite> <rules> <clear /> <rule name="ReverseProxyInboundRule" stopProcessing="true"> <match url="api/([_0-9a-z/-]+)" /><conditions logicalGrouping="MatchAll" trackAllCaptures="false" /><action type="Rewrite" url="http://10.200.200.157:8091/{R:0}" /> </rule> <rule name="ResourceToIndex" stopProcessing="true"><match url="(.*)" /><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><httpErrors><remove statusCode="404" subStatusCode="-1" /><remove statusCode="500" subStatusCode="-1" /><error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" /><error statusCode="500" path="/survey/error" responseMode="ExecuteURL" /></httpErrors> </system.webServer></configuration><!--ProjectGuid: 068855e8-9240-4f1a-910b-cf825794513b-->