分享方式:


在 Azure 儲存體中裝載靜態網站

您可以直接從一般用途 V2BlockBlobStorage 帳戶中的容器提供靜態內容 (HTML、CSS、JavaScript 和影像檔)。 若要深入了解,請參閱 Azure 儲存體中的靜態網站裝載

本文說明如何使用 Azure 入口網站、Azure CLI 或 PowerShell 來啟用靜態網站裝載。

啟用靜態網站裝載

靜態網站裝載是您必須在儲存體帳戶上啟用的功能。

  1. 登入 Azure 入口網站以開始進行操作。

  2. 找出您的儲存體帳戶,然後選取該儲存體帳戶來顯示帳戶的 [概觀] 窗格。

  3. 在 [概觀] 窗格中,選取 [功能] 索引標籤。接下來,選取 [靜態網站] 以顯示靜態網站的設定頁面。

    Image showing how to access the Static website configuration page within the Azure portal

  4. 選取 [已啟用] 以啟用儲存體帳戶的靜態網站代管功能。

  5. 在 [索引文件名稱] 欄位中,指定預設的索引頁 (例如:index.html)。

    當使用者瀏覽至您靜態網站的根目錄時,就會顯示此預設索引頁面。

  6. 在 [錯誤文件路徑] 欄位中,指定預設的錯誤頁面 (例如:404.html)。

    當使用者嘗試瀏覽至您靜態網站中所沒有的網頁時,就會顯示此預設錯誤頁面。

  7. 按一下 [儲存] 以完成靜態網站設定。

    Image showing how to set the Static website properties within the Azure portal

  8. 隨即顯示確認訊息。 靜態網站端點和其他設定資訊會顯示在 [概觀] 窗格中。

    Image showing the Static website properties within the Azure portal

上傳檔案

下列指示說明如何使用 Azure 入口網站來上傳檔案。 您也可使用 AzCopy、PowerShell、CLI 或任何可將檔案上傳到帳戶其 $web 容器的自訂應用程式。 如需使用 Visual Studio 程式碼上傳檔案的逐步教學課程,請參閱教學課程:在 Blob 儲存體上裝載靜態網站

  1. 在 Azure 入口網站中,瀏覽至包含靜態網站的儲存體帳戶。 選取左側瀏覽窗格中的 [容器] 來顯示容器清單。

  2. 在 [容器] 窗格中,選取 $web 容器以開啟容器的 [概觀] 窗格。

    Image showing where to locate the website storage container in Azure portal

  3. 在 [概觀] 窗格中,選取 [上傳] 圖示以開啟 [上傳 Blob] 窗格。 接下來,選取 [上傳 Blob] 窗格中的 [檔案] 欄位,以開啟檔案瀏覽器。 瀏覽至您要上傳的檔案、選取該檔案,然後選取 [開啟] 以填入 [檔案] 欄位。 或者,選取 [如果檔案已存在則覆寫] 核取方塊。

    Image showing how to upload files to the static website storage container

  4. 如果想要讓瀏覽器顯示檔案內容,請確認將該檔案的內容類型設為 text/html。 若要確認這一點,請選取您在上一個步驟中所上傳 Blob 的名稱,以開啟其 [概觀] 窗格。 請確定值是在 [CONTENT-TYPE] 屬性欄位中設定。

    Image showing how to verify blob content types

    注意

    會自動針對常見的副檔名 (例如 .html),將此屬性設為 text/html。 但是,在某些案例中,將需要自行設定。 如果沒有將此屬性設為 text/html,則瀏覽器會提示使用者下載檔案,而非轉譯內容。 您可以在上一個步驟中設定這個屬性。

尋找網站 URL

您可使用網站的公用 URL 來從瀏覽器檢視網站頁面。

在儲存體帳戶帳戶概觀頁面旁邊出現的窗格中,選取 [靜態網站]。 您網站的 URL 會出現在 [主要端點] 欄位中。

Azure Storage static websites metrics metric

在靜態網站頁面上啟用計量

啟用計量之後,計量儀表板會報告與 $web 容器中檔案有關的流量統計資料。

  1. 按一下儲存體帳戶功能表 [監視] 區段下方的 [計量]

    Metrics link

    注意

    藉由連結到不同的計量 API 來產生計量資料。 入口網站只會顯示指定時間範圍內所使用的 API 成員,以便只專注於傳回資料的成員。 為了確保可選取必要的 API 成員,第一個步驟是展開時間範圍。

  2. 按一下時間範圍按鈕,選擇時間範圍,然後按一下 [套用]

    Azure Storage static websites metrics time range

  3. 從 [命名空間] 下拉式清單中選取 [Blob]

    Azure Storage static websites metrics namespace

  4. 然後選取 [輸出] 計量。

    Screenshot that shows the Azure Storage static websites Egress metric.

  5. 從 [彙總] 選取器中選取 [總和]

    Azure Storage static websites metrics aggregation

  6. 按一下 [新增篩選] 按鈕,然後從 [屬性] 選取器中選擇 [API 名稱]

    Azure Storage static websites metrics API name

  7. 選取 [值] 選取器中 [GetWebContent] 旁邊的方塊,以填入計量報告。

    Azure Storage static websites metrics GetWebContent

    注意

    只有在於指定時間範圍內使用該 API 成員時,才會顯示 [GetWebContent] 核取方塊。 入口網站只會顯示指定時間範圍內所使用的 API 成員,以便只專注於傳回資料的成員。 若無法在此清單上找到特定 API 成員,請展開時間範圍。

下一步