Menghosting situs web statis di Azure Storage

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

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

Mengaktifkan hosting situs web statis

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

Portal

1. Masuk ke portal Microsoft Azure untuk memulai.

2. Temukan akun penyimpanan Anda dan pilih untuk menampilkan panel Gambaran Umum akun.

3. Di panel Gambaran Umum , pilih tab Kapabilitas . Selanjutnya, pilih Situs web statis untuk menampilkan halaman konfigurasi untuk situs web statis.

   

4. Pilih Diaktifkan untuk mengaktifkan hosting situs web statis 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 statis Anda.

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

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

7. Klik Simpan untuk menyelesaikan konfigurasi situs statis.

   

8. Pesan konfirmasi akan ditampilkan. Titik akhir situs web statis Anda dan informasi konfigurasi lainnya ditampilkan dalam panel Gambaran Umum .

   

Azure CLI

Anda dapat mengaktifkan hosting 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 aktif ke langganan akun penyimpanan yang akan menghosting situs web statik Anda.

   az account set --subscription <subscription-id>
   

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

3. Aktifkan hosting situs web statis.

   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.

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

   • <index-document-name> Ganti tempat penampung dengan nama dokumen indeks. Dokumen ini biasanya "index.html".

PowerShell

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

1. Buka jendela perintah Windows PowerShell.

2. Verifikasi bahwa 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 Menginstal 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 aktif ke langganan akun penyimpanan yang akan menghosting 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 statis.

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

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

   • <index-document-name> Ganti tempat penampung dengan nama dokumen indeks. Dokumen ini biasanya "index.html".

Unggah berkas

Portal

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

1. Di portal Microsoft Azure, navigasikan ke akun penyimpanan yang berisi situs web statis Anda. Pilih Kontainer di panel navigasi kiri untuk menampilkan daftar kontainer.

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

   

3. Di panel Gambaran Umum , pilih ikon Unggah untuk membuka panel Unggah blob . Selanjutnya, pilih bidang File di dalam panel Unggah blob untuk membuka browser file. Navigasikan ke file yang ingin Anda unggah, pilih file tersebut, lalu pilih Buka untuk mengisi bidang File . Secara opsional, pilih kotak centang Timpa jika file sudah ada .

   

4. Jika Anda ingin browser menampilkan konten file, pastikan bahwa tipe konten file tersebut diatur ke text/html. Untuk memverifikasi ini, pilih nama blob yang Anda unggah di langkah sebelumnya untuk membuka panel Gambaran Umumnya . Pastikan bahwa nilai ditetapkan dalam kolom properti CONTENT-TYPE.

   

   Nota

   Properti ini secara otomatis diatur ke text/html untuk ekstensi yang umum dikenali seperti .html. Namun, dalam beberapa kasus, Anda harus mengaturnya sendiri. Jika Anda tidak mengatur properti ini ke text/html, browser akan meminta pengguna untuk mengunduh file alih-alih merender konten. Properti ini dapat diatur pada 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>

Nota

Jika browser meminta pengguna untuk mengunduh file alih-alih merender 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.

Nota

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

Jika Anda menggunakan Azure Cloud Shell, Anda harus merujuk pada folder berbagi yang terlihat oleh Cloud Shell. Lokasi ini bisa menjadi berbagi file dari Cloud itu sendiri atau berbagi file yang ada yang Anda pasang dari Cloud Shell. Untuk mempelajari cara melakukannya, lihat Menyimpan 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

Nota

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

• Gantilah nilai placeholder di <path-to-file> dengan jalur lengkap ke file yang ingin Anda unggah (misalnya: C:\temp\index.html).

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

Menemukan URL situs web

Anda dapat melihat halaman situs Anda dari browser dengan menggunakan URL publik situs web.

Portal

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

Azure CLI

Temukan URL publik situs web statis 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 statis 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.

Mengaktifkan metrik pada halaman situs web statis

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

1. Klik Metrik di bawah bagian menu Pantau akun penyimpanan.

   

   Nota

   Data metrik dihasilkan dengan menghubungkan ke API metrik yang berbeda. Portal hanya menampilkan anggota API yang digunakan dalam jangka 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 kerangka waktu, pilih jangka waktu, lalu klik Terapkan.

   

3. Pilih Blob dari menu drop-down Namespace .

   

4. Lalu pilih metrik Egress .

   

5. Pilih Jumlah dari pemilih Agregasi .

   

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

   

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

   

   Nota

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

Langkah berikutnya

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