在IIS中部署前後端應用，多麼痛的領悟！

有態度的小碼甲發表於2020-11-04
後端

目前手上的Web專案是前後端分離的，所以有時也會倒騰Vue框架。

前後端應用最終以容器形態、在k8s中部署, 為此我搭建了基於Gitlab flow的Devops流程。

在Devops實踐中，容器部署成為良方和事實標準。

但是在開發和自測階段，前後端團隊還需要一個友好的聯調+自測的驗證環境，

最友好、最順手的web伺服器當屬IIS，(後端API已經使用WebDeploy部署到IIS)，本文記錄使用IIS託管Vue前端應用的姿勢。

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

1. 部署Vue應用

我們以Github上Vue Todo應用為例，執行yarn build

如果build成功，你會發現生成了一個dist靜態資原始檔夾。

2. 建立web.config

將yarn生成的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上。

But， 在前後端分離模式中，我們的Vue應用不僅有靜態資源，還要發起動態api請求。

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

我們需要將對Vue應用的api請求代理到真實後端地址。

5. 反向代理後端api請求

Vue應用站點還要充當一部分反向代理伺服器的作用。

假設真實後端api地址以部署在10.200.200.157:8091地址上，api以/api為字首。

下面利用Url-Rewrite Module反向代理 Vue 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 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-->

注意： 黃色背景行便是反向代理規則ReverseProxyInboundRule， 注意反向代理規則要在靜態資源規則ResourceToIndex的前面。

這樣我們就完成了在前後端分離開發模式下，使用IIS託管Vue應用的全過程。

可算解決了前後端團隊開發中一大問題，我把這個問題定義為[效率工具]類，有興趣的讀者可以試一試。

相關文章