在 Azure 儲存體中裝載靜態網站
您可以直接從一般用途 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
啟用靜態網站裝載。
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
上傳檔案
下列指示說明如何使用 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' 附加到命令。
注意
若正在使用 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";} 附加到命令。
尋找網站 URL
您可使用網站的公用 URL 來從瀏覽器檢視網站頁面。
在儲存體帳戶帳戶概觀頁面旁邊出現的窗格中，選取 [靜態網站]。 您網站的 URL 會出現在 [主要端點] 欄位中。
使用下列命令來尋找靜態網站的公用 URL：
az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv
使用下列命令來尋找靜態網站的公用 URL：
$storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web
在靜態網站頁面上啟用計量
啟用計量之後，計量儀表板會報告與 $web 容器中檔案有關的流量統計資料。
按一下儲存體帳戶功能表 [監視] 區段下方的 [計量]。
注意
藉由連結到不同的計量 API 來產生計量資料。 入口網站只會顯示指定時間範圍內所使用的 API 成員，以便只專注於傳回資料的成員。 為了確保可選取必要的 API 成員，第一個步驟是展開時間範圍。
按一下時間範圍按鈕，選擇時間範圍，然後按一下 [套用]。
從 [命名空間] 下拉式清單中選取 [Blob]。
然後選取 [輸出] 計量。
從 [彙總] 選取器中選取 [總和]。
按一下 [新增篩選] 按鈕，然後從 [屬性] 選取器中選擇 [API 名稱]。
選取 [值] 選取器中 [GetWebContent] 旁邊的方塊，以填入計量報告。
注意
只有在於指定時間範圍內使用該 API 成員時，才會顯示 [GetWebContent] 核取方塊。 入口網站只會顯示指定時間範圍內所使用的 API 成員，以便只專注於傳回資料的成員。 若無法在此清單上找到特定 API 成員，請展開時間範圍。
下一步
