[morse]Angular 部屬

服務端配置

Server configuration 

帶路由的應用必須以index.html作為後備頁面

Angular 應用很適合用簡單的靜態HTML 服務器提供服務。你不需要服務端引擎來動態合成應用頁面，因為Angular 會在客戶端完成這件事。

如果該應用使用Angular路由器，你就必須配置服務器，讓它對不存在的文件返回應用的宿主頁( index.html)。

帶路由的應用應該支持“深鏈接”。所謂深鏈接就是指一個URL，它用於指定到應用內某個組件的路徑。比如，http://www.mysite.com/heroes/42就是一個到英雄詳情頁面的深鏈接，用於顯示id: 42的英雄。

當用戶從運行中的客戶端應用導航到這個URL 時，這沒問題。Angular 路由器會攔截這個URL，並且把它路由到正確的頁面。

但是，當從郵件中點擊鏈接或在瀏覽器地址欄中輸入它或僅僅在英雄詳情頁刷新下瀏覽器時，所有這些操作都是由瀏覽器本身處理的，在應用的控制範圍之外。瀏覽器會直接向服務器請求那個URL，路由器沒機會插手。

靜態服務器會在收到對http://www.mysite.com/的請求時返回index.html，但是會拒絕對http://www.mysite.com/heroes/42的請求，並返回一個404 - Not Found錯誤，除非，它被配置成了返回index.html。

後備頁面配置範例

沒有一種配置可以適用於所有服務器。後面這些部分會描述對常見服務器的配置方式。這個列表雖然不夠詳盡，但可以為你提供一個良好的起點。

• Apache：在.htaccess文件中添加一個重寫規則，代碼如下（出處）：

  RewriteEngine On
      # If an existing asset or directory is requested go to it as it is
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
  
      # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html
  

• 
  
• NGinx：使用try_files指向index.html，詳細描述見Web應用的前端控制器模式。

  try_files $uri $uri/ /index.html;

• 

• IIS：往web.config中添加一條重寫規則，類似於這裡： 不要忘記在服務器上安裝 IIS URL Rewrite。

  
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  
  

• GitHub頁面服務：你沒辦法直接配置 Github的頁面服務，但可以添加一個404頁，只要把index.html複製到404.html就可以了。它仍然會給出一個404響應，但是瀏覽器將會正確處理該頁，並正常加載該應用。使用在主分支的docs/下啟動服務 並創建一個.nojekyll文件也是一個好辦法。
• Firebase主機服務：添加一條重寫規則。

  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]

請求來自另一個服務器的服務（CORS）

Angular開發者在向與該應用的宿主服務器不同域的服務器發起請求時，可能會遇到一種跨域資源共享（CORS）錯誤。瀏覽器會阻止該請求，除非得到那台服務器的明確許可。

客戶端應用對這種錯誤無能為力。服務器必須配置成可以接受來自該應用的請求。要了解如何對特定的服務器開啟CORS，參見enable-cors.org。

資料來源:

https://angular.cn/guide/deployment