Hosting situs web statik di Azure Storage

Anda dapat menyajikan konten statik (HTML, CSS, JavaScript, dan file gambar) langsung dari kontainer di akun tujuan-umum V2 atau BlockBlobStorage. Untuk mempelajari selengkapnya, lihat Hosting situs web statik di Azure Storage.

Artikel ini memperlihatkan kepada Anda cara mengaktifkan hosting situs web statik dengan menggunakan portal Azure, Azure CLI, atau PowerShell.

Aktifkan hosting situs web statik

Hosting situs web statik adalah fitur yang harus Anda aktifkan di akun penyimpanan.

Portal

1. Masuk ke portal Azure untuk memulai.

2. Temukan akun penyimpanan Anda dan pilih untuk menampilkan panel Ringkasan akun.

3. Di panel Ringkasan, pilih tab Kemampuan. Selanjutnya, pilih Situs web statik untuk menampilkan halaman konfigurasi untuk situs web statik.

   

4. Pilih Aktifkan untuk mengaktifkan hosting situs web statik untuk akun penyimpanan.

5. Di bidang Nama dokumen indeks, tentukan halaman indeks default (Misalnya: index.html).

   Halaman indeks default ditampilkan saat pengguna menavigasi ke akar situs web statik Anda.

6. Di bidang Jalur dokumen galat, tentukan halaman galat default (Misalnya: 404.html).

   Halaman kesalahan default ditampilkan saat pengguna mencoba menavigasi ke halaman yang tidak ada di situs web statik Anda.

7. Klik Simpan untuk menyelesaikan konfigurasi situs statik.

   

8. Pesan konfirmasi ditampilkan. Titik akhir situs web statik Anda dan informasi konfigurasi lainnya ditampilkan dalam panel Ringkasan.

   

Azure CLI

Anda dapat mengaktifkan penyelenggaraan situs web statis dengan menggunakan Azure CLI.

1. Pertama, buka Azure Cloud Shell, atau jika Anda telah menginstal Azure CLI secara lokal, buka aplikasi konsol perintah seperti Windows PowerShell.

2. Jika identitas Anda dikaitkan dengan lebih dari satu langganan, maka atur langganan Anda yang aktif ke langganan akun penyimpanan yang akan mengehost situs web statik Anda.

   az account set --subscription <subscription-id>
   

   Ganti nilai placeholder <subscription-id> dengan ID langganan Anda.

3. Aktifkan hosting situs web statik.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • Ganti nilai placeholder <storage-account-name> dengan nama akun penyimpanan.

   • Ganti placeholder <error-document-name> dengan nama dokumen galat yang akan muncul kepada pengguna saat browser meminta halaman di situs Anda yang tidak ada.

   • Ganti placeholder <index-document-name> dengan nama dokumen indeks. Dokumen ini umumnya "index.html".

PowerShell

Anda dapat mengaktifkan hosting situs web statik dengan menggunakan modul Azure PowerShell.

1. Buka jendela perintah Windows PowerShell.

2. Pastikan Anda memiliki modul Azure PowerShell Az versi 0.7 atau yang lebih baru.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   Jika Anda perlu menginstal atau meningkatkan, lihat Install modul Azure PowerShell.

3. Masuk ke langganan Azure Anda dengan perintah Connect-AzAccount dan ikuti petunjuk pada layar.

   Connect-AzAccount
   

4. Jika identitas Anda dikaitkan dengan lebih dari satu langganan, maka atur langganan Anda yang aktif ke langganan akun penyimpanan yang akan mengehost situs web statik Anda.

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   Ganti nilai placeholder <subscription-id> dengan ID langganan Anda.

5. Dapatkan konteks akun penyimpanan yang menentukan akun penyimpanan yang akan digunakan.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • Ganti nilai placeholder <resource-group-name> dengan nama grup sumber daya.

   • Ganti nilai placeholder <storage-account-name> dengan nama akun penyimpanan.

6. Aktifkan hosting situs web statik.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Ganti placeholder <error-document-name> dengan nama dokumen galat yang akan muncul kepada pengguna saat browser meminta halaman di situs Anda yang tidak ada.

   • Ganti placeholder <index-document-name> dengan nama dokumen indeks. Dokumen ini umumnya "index.html".

Unggah file

Portal

Instruksi berikut menunjukkan cara mengunggah file menggunakan portal Azure. Anda dapat menggunakan AzCopy, PowerShell, CLI, atau aplikasi kustom apa pun yang dapat mengunggah file ke kontainer $web akun Anda. Untuk tutorial langkah demi langkah mengunggah file dengan menggunakan kode Visual Studio, lihat Tutorial: Hosting situs web statik di Blob Storage.

1. Di portal Azure, buka akun penyimpanan yang berisi situs web statik Anda. Pilih Kontainer di panel navigasi kiri untuk menampilkan daftar kontainer.

2. Di panel Kontainer, pilih kontainer $web untuk membuka panel Ringkasan kontainer.

   

3. Di panel Ringkasan, pilih ikon Unggah untuk membuka panel Unggah blob. Selanjutnya, pilih bidang File di dalam panel Unggah blob untuk membuka browser file. Buka file yang ingin Anda unggah, pilih file tersebut, lalu pilih Buka untuk mengisi bidang File. Jika diperlukan, pilih kotak centang Timpa jika file sudah ada.

   

4. Jika Anda ingin browser menampilkan konten file, pastikan bahwa jenis konten file tersebut berupa text/html. Untuk memverifikasi ini, pilih nama blob yang Anda unggah di langkah sebelumnya untuk membuka panel Ringkasan. Pastikan bahwa nilai diatur dalam bidang properti CONTENT-TYPE.

   

   Catatan

   Properti ini secara otomatis diatur ke text/html untuk ekstensi yang dikenal secara umum seperti .html. Namun, dalam beberapa kasus, Anda harus mengatur ini sendiri. Jika Anda tidak mengatur properti ini ke text/html, browser akan meminta pengguna untuk mengunduh file alih-alih menyajikan konten. Properti ini dapat diatur di langkah sebelumnya.

Azure CLI

Unggah objek ke kontainer $web dari direktori sumber.

Contoh ini mengasumsikan bahwa Anda menjalankan perintah dari sesi Azure Cloud Shell.

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

Catatan

Jika browser meminta pengguna untuk mengunduh file alih-alih menyajikan konten, Anda dapat menambahkan --content-type 'text/html; charset=utf-8' ke perintah.

• Ganti nilai placeholder <storage-account-name> dengan nama akun penyimpanan.

• Ganti placeholder <source-path> dengan jalur ke lokasi file yang ingin Anda unggah.

Catatan

Jika Anda menggunakan instalasi lokasi Azure CLI, maka Anda dapat menggunakan jalur ke lokasi mana pun di komputer lokal Anda (Misalnya: C:\myFolder.

Jika menggunakan Azure Cloud Shell, Anda harus mereferensikan berbagi file yang terlihat oleh Cloud Shell. Lokasi ini bisa menjadi file bersama Cloud itu sendiri atau file bersama yang Anda pasang dari Cloud Shell. Untuk mempelajari cara melakukannya, lihat Tahan file di Azure Cloud Shell.

PowerShell

Unggah objek ke kontainer $web dari direktori sumber.

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

Catatan

Jika browser meminta pengguna untuk mengunduh file alih-alih menyajikan konten, Anda dapat menambahkan -Properties @{ ContentType = "text/html; charset=utf-8";} ke perintah.

• Ganti nilai placeholder <path-to-file> dengan jalur yang sepenuhnya memenuhi syarat ke file yang ingin Anda unggah (Misalnya: C:\temp\index.html).

• Ganti nilai placeholder <blob-name> dengan nama yang ingin Anda berikan ke blob yang dihasilkan (Misalnya: index.html).

Temukan URL situs web

Anda bisa menampilkan halaman situs Anda dari browser dengan menggunakan URL publik situs web.

Portal

Di panel yang muncul di samping halaman gambaran umum akun penyimpanan Anda, pilih Situs Web Statik. URL situs Anda muncul di bidang Titik akhir primer.

Azure CLI

Temukan URL publik situs web statik Anda dengan menggunakan perintah berikut:

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

• Ganti nilai placeholder <storage-account-name> dengan nama akun penyimpanan.

• Ganti nilai placeholder <resource-group-name> dengan nama grup sumber daya.

PowerShell

Temukan URL publik situs web statik Anda dengan menggunakan perintah berikut:

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

• Ganti nilai placeholder <resource-group-name> dengan nama grup sumber daya.

• Ganti nilai placeholder <storage-account-name> dengan nama akun penyimpanan.

Aktifkan metrik di halaman situs web statik

Setelah Anda mengaktifkan metrik, statistik lalu lintas pada file di kontainer $web dilaporkan di dasbor metrik.

1. Klik Metrik di bawah bagian Monitor pada menu akun penyimpanan.

   

   Catatan

   Data metrik dihasilkan dengan mengaitkan ke API metrik yang berbeda. Portal hanya menampilkan anggota API yang digunakan dalam kerangka waktu tertentu untuk hanya fokus pada anggota yang mengembalikan data. Untuk memastikan Anda dapat memilih anggota API yang diperlukan, langkah pertama adalah memperluas jangka waktu.

2. Klik tombol jangka waktu, pilih jangka waktu, lalu klik Terapkan.

   

3. Pilih Blob dari menu geser turun Namespace.

   

4. Lalu pilih metrik Egress.

   

5. Pilih Jumlah dari pemilih Agregasi.

   

6. Klik tombol Tambah filter dan pilih nama API dari pemilih Properti.

   

7. Centang kotak di samping GetWebContent di pemilih Nilai untuk mengisi laporan metrik.

   

   Catatan

   Kotak centang GetWebContent hanya muncul jika anggota API tersebut digunakan dalam jangka waktu tertentu. Portal hanya menampilkan anggota API yang digunakan dalam kerangka waktu tertentu untuk hanya fokus pada anggota yang mengembalikan data. Jika Anda tidak dapat menemukan anggota API tertentu dalam daftar ini, perluas jangka waktunya.

Langkah berikutnya

• Pelajari cara mengonfigurasi domain kustom dengan situs web statik Anda. Lihat Petakan domain kustom ke titik akhir Azure Blob Storage.