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

文章
05/11/2023

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

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

啟用靜態網站裝載

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

登入 Azure 入口網站以開始進行操作。
找出您的儲存體帳戶，然後選取該儲存體帳戶來顯示帳戶的 [概觀] 窗格。
在 [概觀] 窗格中，選取 [功能] 索引標籤。接下來，選取 [靜態網站] 以顯示靜態網站的設定頁面。
選取 [已啟用] 以啟用儲存體帳戶的靜態網站代管功能。
在 [索引文件名稱] 欄位中，指定預設的索引頁 (例如：index.html)。

當使用者瀏覽至您靜態網站的根目錄時，就會顯示此預設索引頁面。
在 [錯誤文件路徑] 欄位中，指定預設的錯誤頁面 (例如：404.html)。

當使用者嘗試瀏覽至您靜態網站中所沒有的網頁時，就會顯示此預設錯誤頁面。
按一下 [儲存] 以完成靜態網站設定。
隨即顯示確認訊息。靜態網站端點和其他設定資訊會顯示在 [概觀] 窗格中。

您可以使用 Azure CLI 來啟用靜態網站裝載。

首先，開啟 Azure Cloud Shell，或若已在本機安裝 Azure CLI，請開啟 Windows PowerShell 等命令主控台應用程式。
若身分識別與多個訂用帳戶建立關聯，請將使用中訂用帳戶設為將裝載靜態網站儲存體帳戶的訂用帳戶。
```
az account set --subscription <subscription-id>
```
使用訂閱識別碼取代 <subscription-id> 預留位置值。
啟用靜態網站裝載。
```
az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
```
- 使用您的儲存體帳戶名稱取代 <storage-account-name> 預留位置值。
- 將 <error-document-name> 預留位置值取代為在瀏覽器要求的頁面於網站上不存在時，要向使用者顯示的錯誤文件名稱。
- 將 <index-document-name> 預留位置值取代為索引文件的名稱。此文件通常是 "index.html"。

您可使用 Azure PowerShell 模組來啟用靜態網站裝載。

開啟 Windows PowerShell 命令視窗。
驗證已擁有 Azure PowerShell 模組 Az 版本 0.7 或更新版本。
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
如果您需要安裝或升級，請參閱安裝 Azure PowerShell 模組。
使用 Connect-AzAccount 命令登入 Azure 訂用帳戶並遵循畫面上的指示。
```
Connect-AzAccount
```
若身分識別與多個訂用帳戶建立關聯，請將使用中訂用帳戶設為將裝載靜態網站儲存體帳戶的訂用帳戶。
```
$context = Get-AzSubscription -SubscriptionId <subscription-id>
Set-AzContext $context
```
使用訂閱識別碼取代 <subscription-id> 預留位置值。
取得定義想要使用儲存體帳戶的儲存體帳戶內容。
```
$storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
$ctx = $storageAccount.Context
```
- 將 <resource-group-name> 預留位置值取代為資源群組的名稱。
- 使用您的儲存體帳戶名稱取代 <storage-account-name> 預留位置值。
啟用靜態網站裝載。
```
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
```
- 將 <error-document-name> 預留位置值取代為在瀏覽器要求的頁面於網站上不存在時，要向使用者顯示的錯誤文件名稱。
- 將 <index-document-name> 預留位置值取代為索引文件的名稱。此文件通常是 "index.html"。

上傳檔案

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

在 Azure 入口網站中，瀏覽至包含靜態網站的儲存體帳戶。選取左側瀏覽窗格中的 [容器] 來顯示容器清單。
在 [容器] 窗格中，選取 $web 容器以開啟容器的 [概觀] 窗格。
在 [概觀] 窗格中，選取 [上傳] 圖示以開啟 [上傳 Blob] 窗格。接下來，選取 [上傳 Blob] 窗格中的 [檔案] 欄位，以開啟檔案瀏覽器。瀏覽至您要上傳的檔案、選取該檔案，然後選取 [開啟] 以填入 [檔案] 欄位。或者，選取 [如果檔案已存在則覆寫] 核取方塊。
如果想要讓瀏覽器顯示檔案內容，請確認將該檔案的內容類型設為 text/html。若要確認這一點，請選取您在上一個步驟中所上傳 Blob 的名稱，以開啟其 [概觀] 窗格。請確定值是在 [CONTENT-TYPE] 屬性欄位中設定。

注意

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

將物件從來源目錄上傳至 $web 容器。

此範例假設您正在從 Azure Cloud Shell 工作階段執行命令。

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

注意

若瀏覽器提示使用者下載檔案，而非轉譯內容，則可將 --content-type 'text/html; charset=utf-8' 附加到命令。

使用您的儲存體帳戶名稱取代 <storage-account-name> 預留位置值。
將 <source-path> 預留位置值取代為想要上傳檔案的位置路徑。

注意

若正在使用 Azure CLI 的本機安裝，則可指向本機電腦上任何位置的路徑 (例如：C:\myFolder)。

若正在使用 Azure Cloud Shell，則將需要參考 Cloud Shell 可見的檔案共用。此位置可以是雲端共用本身的檔案共用，或在 Cloud Shell 中掛接的現有檔案共用。若要了解如何進行此操作，請參閱在 Azure Cloud Shell 中保存檔案 (機器翻譯)。

將物件從來源目錄上傳至 $web 容器。

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

注意

若瀏覽器提示使用者下載檔案，而非轉譯內容，則可將 -Properties @{ ContentType = "text/html; charset=utf-8";} 附加到命令。

將 <path-to-file> 預留位置值取代為想要上傳檔案的完整路徑 (例如：C:\temp\index.html)。
將 <blob-name> 預留位置值取代為想要提供所產生 blob 的名稱 (例如：index.html)。

尋找網站 URL

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

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

Azure Storage static websites metrics metric

使用下列命令來尋找靜態網站的公用 URL：

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

使用您的儲存體帳戶名稱取代 <storage-account-name> 預留位置值。
將 <resource-group-name> 預留位置值取代為資源群組的名稱。

使用下列命令來尋找靜態網站的公用 URL：

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

將 <resource-group-name> 預留位置值取代為資源群組的名稱。
使用您的儲存體帳戶名稱取代 <storage-account-name> 預留位置值。

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

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

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

注意

藉由連結到不同的計量 API 來產生計量資料。入口網站只會顯示指定時間範圍內所使用的 API 成員，以便只專注於傳回資料的成員。為了確保可選取必要的 API 成員，第一個步驟是展開時間範圍。
按一下時間範圍按鈕，選擇時間範圍，然後按一下 [套用]。
從 [命名空間] 下拉式清單中選取 [Blob]。
然後選取 [輸出] 計量。
從 [彙總] 選取器中選取 [總和]。
按一下 [新增篩選] 按鈕，然後從 [屬性] 選取器中選擇 [API 名稱]。
選取 [值] 選取器中 [GetWebContent] 旁邊的方塊，以填入計量報告。

注意

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