利用 Azure CDN 發佈靜態網站

代貼北科大劉建昌同學撰寫之技術文件

在 Azure 上建立網站有相當多的選項。包括使用 Azure App Service Web Apps (舊名 Azure Websites )、Azure Cloud Service，甚至是直接使用 Azure Virtual Machine 皆能夠達到這些目的。當然這些方式都各有各的優缺點及優勢存在，而使用哪一個完全取決於使用者的需求。

若是您的服務只是一個靜態網站，只有內容呈現，而無資料處理。此時使用 Azure App Service Web Apps (舊名 Azure Websites )、 或是 Azure Virtual Machine等雲端解決方案，就顯得有點浪費，因為您除了需要負擔較為昂貴的設備租用費用，還可能要面臨較為複雜的開發流程。因此本篇文章將介紹一個最簡單的方式，使用 Azure Blob Storage 佈署一個靜態網站 ，(靜態網站可能包含 Flash、圖片、影片、Javascript、CSS 等常見元素)，並且再透過 Azure CDN 來增加網站的承載負載能量。

1. 建立 Azure Storage Account 與佈署靜態網站

首先我們需要建立一個 Azure Storage Account，並且此帳戶下建立許多 Public Blob 來存放靜態網站所需要的頁面和素材。這裡需要注意的是，在建立 Public Blob 時，命名方式可以使用較淺顯易懂的方式，能夠讓您整個網站的結構較為清晰且容易維護。

使用 Azure Storage BLOB 存放靜態網站的範例

您可以依照上圖範例所示，開發者將網站的頁面 HTML、Javascript 放在名為 ”Page” 的 Public Blob 容器 (Container) 中，而將網站內部的內容例如 : 圖片、影片則放在名為 ”Contents” Public Blob 容器 (Container) 中，您也可以依照目前的網頁路徑規劃其他之置放方式。

透過 Azure 入口網站建立 Azure Storage Account

建立一個 Azure Storage Account

取得存取金鑰

使用先前已經新增好的 Azure Storage 帳戶，在最下方工具列選取 ”管理存取金鑰”

儲存體帳戶名稱與主要存取金鑰為下個步驟中，使用免費工具 Azure Storage Explorer 所需要用到的資訊。

以 Azure Storage Explorer 建立 Public Blob 與上傳靜態網站的內容

下載免費的 Azure Storage Explorer 來幫助我們建立Table，您可以參閱此文件，裡面有詳細的使用說明以及載點。

透過 Azure Storage Explorer新增存放網站資料所需的 Public Blob

本篇範例將網站內容分成上圖結構，一共建立四個容器 ( container )，css 專門放置網頁所需的 CSS 檔案，film存放影片，image存放圖片，page 則存放網頁 html 。

建立存放網站內容所需的 Public Blob 之後，您就可以利用熟悉的編輯器來撰寫所需要的 html，並且裡面會用到的 CSS、Javascript、圖片、影片皆能夠透過存放到 Azure Storage Blob 上來進行使用

撰寫完 HTML 之後，只需要將所有 html 以及網站所用到的所有資源 (CSS、Javascript、圖片、影片) 上傳到前幾個步驟建立的 public Blob 中各對應的容器 ( container )，即完成了靜態網站的佈署。您能夠透過類似以下的網址來連接到您的靜態網站 :

https://儲存體帳戶名稱.blob.core.windows.net/Blob名稱

本範例網址為 :

https://teststaticweb.blob.core.windows.net/page/enter.html

倘若您需要使用公司或組織的 Domain Name，可依據此篇文章的方法，透過 DNS CNAME 的設定方式，將公司或組織的 Domain Name 對應到 Azure Storage blob 的 Domain Name。

透過上述步驟，就能夠將靜態網站佈署到 Azure Storage Blob上

2. 啟用 Azure CDN

佈署完畢靜態網站之後，有些使用者的網站可能為全球性的服務，也因此需要使用 CDN ( Content delivery network )，來將網站內容傳遞到世界各地。而在 Azure 上的託管服務中，Azure CDN 就能夠完成上述使用者的需求。

1. 建立 Azure CDN 服務

在新增 Azure CDN時，就能夠選擇先前發布靜態網站所使用的儲存體帳戶

這個設定動作只需要數秒就可以完成，並且也完成了 Azure CDN 服務的所有設定。但是 Azure CDN服務生效的時間至多需要一小時

以本篇範例來說「https://az763605.vo.msecnd.net/」就是我們用來存取 CDN 的端點，也因此我們也可以透過此網域名稱來進入我們的網站。

https://az763605.vo.msecnd.net/page/enter.html

不過端點建立的設定無法立即使用，因為 Azure CDN 最多需要 60 分鐘才會生效，也因此在此之前若使用 CDN 網域進入網站只會得到狀態碼 400 (不正確的要求)。同樣地，倘若您需要使用公司或組織的 Domain Name，可以透過 DNS CNAME 的設定方式，將公司或組織的 Domain Name 對應到 Azure CDN 的 Domain Name。

結語

Azure Storage 佈署靜態網站，Azure CDN 將網站內容發佈到包含台灣高雄以及世界各地的端點 (Pop node)，以建立快取承載巨量存取並分散流量。透過上述兩個步驟，我們只需要經過簡單的開發流程，並且也省下許多成本，就能夠將網站成功的發佈到世界各地去了。