The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何將 Angular 2 含有路由機制的 SPA 網頁應用程式部署到 IIS 網站伺服器

這幾個月以來,我們一直在利用 Angular 2 建構一個還不算小的入口網站,網站前端用的是 Angular 2 框架,後端用的是 ASP.NET Web API 2 框架,還好有 Angular 2 這樣一個優雅又完整的框架,讓我們整個前端團隊不分資深或資淺,大家都可以順利分工合作。如今網站即將上線,進入了要部署的時間點,原本在 Angular CLI 提供的開發伺服器上,程式都跑得好好���,但部署到 IIS 卻發生了網址路由的問題,除了首頁以外的頁面都會顯示 HTTP 404 Not Found 的錯誤,這該如何是好呢?本文告訴你如何解決!

第一種:不碰觸任何 IIS 設定的做法

這種做法最簡單,直接修改你的 Angular 2 路由模組定義,將路由改用 useHash 的方式執行即可,如下圖示:

 

第二種:套用 URL Rewrite 自動網址重寫

首先,你必須先透過 Web Platform Installer 安裝 URL Rewrite 2.0 模組。

如果你的 IIS 只有很單純的安裝 Angular 2 網站,我已經寫好了一個 web.config 檔案,只要將該檔案複製到 IIS 網站根目錄即可。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA" stopProcessing="true">
          <match url=".*" />
          <action type="Rewrite" url="/" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

如果你想透過 IIS 管理員進行設定,也可以參照以下設定:

  1. 開啟 IIS 管理員,展開你的 Angular 2 站台,滑鼠雙擊 URL Rewrite 設定:


  2. 新增規則


  3. 新增空白規則


  4. 編輯輸入規格,請如下圖依序輸入完全一樣的設定,然後在下一步設定「條件


  5. 新增條件

    請設定「不是檔案

    這裡的條件,最主要是要告訴 URL Rewrite 當用戶端要求的網頁在伺服器端找不到檔案時,自動改寫網址為 / 路徑。

  6. 最後按下「套用」即可


第三種:同時部署 ASP.NET Web API 與 Angular 2 在同一站台的情況

上一種設定方式,最終會幫你在網站根目錄自動建立一個 web.config 設定檔,如果你的 Angular 2 已經跟你的 ASP.NET Web API 或 ASP.NET MVC 專案整合部署在同一個站台下的話,上述步驟則會自動幫你修改現有的 web.config 設定,但是上述設定會讓你的 ASP.NET Web API 完全無法使用,因為 ASP.NET MVC 與 ASP.NET Web API 本身就擁有 Routing 機制,URL Rewrite 模組的執行順序比 ASP.NET 的路由模組還早執行,URL Rewrite 的設定會大大影響著所有 ASP.NET 的路由設定。因此,你必須將 ASP.NET Web API 的 API 網址排除在 URL Rewrite 的設定之外,才可以讓 ASP.NET Web API 與 Angular 2 無縫接軌,這樣才能同時讓 Angular 2 與 ASP.NET Web API 在同一個 IIS 站台下運作!

假設你的 ASP.NET Web API 路由都設定在 /api/ 路徑下,那麼請修改我們在上一步所做的「條件」設定,新增一筆規則,將「條件輸入」設定為 {PATH_INFO},將「檢查輸入字串是否為」設定為「不符合模式」,並在「模式」設定為 api/.* 即可 (設定模式時,請不要加上斜線開頭)。

設定完後的條件示意圖如下:

 

相關連結