目前公司的Web項目是SPA應用，採用先後端分離開發，因此有時也會倒騰Vue框架。webpack
「先後端應用最終以容器形態、在k8s中部署, 爲此我搭建了基於Gitlab flow的Devops流程。web
在Devops實踐中，容器部署成爲良方和事實標準。後端
可是在開發和自測階段，不要濫打鏡像，先後端團隊還須要一個友好的聯調+自測的驗證環境，api
最友好、最順手的web服務器當屬IIS，(後端API已經使用WebDeploy部署到IIS)，本文記錄使用IIS託管Vue應用的姿式。服務器
前置條件：安裝IIS、Url Rewrite Module !!!
1. 部署Vue應用
咱們以Github上Vue Todo應用爲例，執行yarn build
框架
若是build成功，你會發現生成了一個dist靜態資源文件夾。asp.net
2. 建立web.config
將yarn生成的dist文件夾拷貝到C:\dist，並添加如下web.config文件， 這個文件實際是咱們在IIS Url-Rewrite module上配置的結果。前後端分離
<?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應用
點擊肯定工具
4.運行Vue應用
Nice！如今你的Vue靜態應用就運行在IIS上。ui
But， 在先後端分離模式中，咱們的Vue應用不只有靜態資源，還要發起動態api請求。
「通常狀況下webpack打包後的api請求路徑是
/, 會嘗試請求同域名下api資源， 實際並不存在。
咱們須要將對Vue應用的api請求代理到真實後端地址。
5. 反向代理動態api請求
Vue應用站點還要充當一部分反向代理服務器的做用。
假設真實後端api地址部署在10.200.200.157:8091地址上，api請求以/api爲前綴。
下面利用Url Rewrite Module 反向代理api請求到真實後端：
點擊站點功能視圖---> Url重寫---> 添加入站規則
Url重寫的結果其實就是下面的web.config文件
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<!-- To customize the asp.net core module uncomment and edit the following p.
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-->
注意：黃色背景行即是反向代理規則ReverseProxyInboundRule， 注意反向代理規則要在靜態資源規則ResourceToIndex的前面。
這樣咱們就完成了在先後端分離開發模式下，使用IIS託管Vue應用的全過程。
-----
可算解決了先後端團隊開發、自測階段一大痛點，我把這個問題定義爲[效率工具]類，有興趣的讀者能夠試一試。