Membuat aplikasi web HTML statik di Azure

Mulai cepat ini menunjukkan cara menyebarkan situs HTML+CSS dasar ke Azure App Service. Anda akan menyelesaikan mulai cepat ini di Cloud Shell, tetapi Anda juga dapat menjalankan perintah ini secara lokal dengan Azure CLI.

Prasyarat

• Gunakan lingkungan Bash di Azure Cloud Shell. Untuk informasi lebih lanjut, lihat Mulai Cepat Azure Cloud Shell - Bash.

  

• Jika Anda lebih memilih untuk menjalankan perintah referensi CLI secara lokal, pasang Azure CLI. Jika Anda menjalankannya di Windows atau macOS, pertimbangkan untuk menjalankan Azure CLI dalam kontainer Docker. Untuk informasi lebih lanjut, lihat Cara menjalankan Azure CLI di kontainer Docker.

  • Jika Anda menggunakan instalasi lokal, masuk ke Azure CLI dengan menggunakan perintah login az. Untuk menyelesaikan proses autentikasi, ikuti langkah-langkah yang ditampilkan di terminal Anda. Untuk opsi masuk lainnya, lihat Masuk dengan Azure CLI.

  • Saat diminta, pasang ekstensi saat pertama kali menggunakan Azure CLI. Untuk informasi selengkapnya tentang ekstensi, lihat Menggunakan ekstensi dengan Azure CLI.

  • Jalankan versi az untuk menemukan versi dan pustaka dependen yang diinstal. Untuk meningkatkan ke versi terbaru, jalankan peningkatan az.

1. Menyiapkan lingkungan Anda

Jika Anda tidak memiliki langganan Azure, buat akun gratis Azure sebelum memulai.

Di Cloud Shell, buat direktori mulai cepat, lalu ubah ke direktori tersebut.

mkdir quickstart

cd $HOME/quickstart

Selanjutnya, jalankan perintah berikut untuk mengkloning repositori aplikasi sampel ke direktori mulai cepat Anda.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

---

2. Membuat aplikasi web

Ubah ke direktori yang berisi kode contoh dan jalankan perintah az webapp up. Ganti<app-name> dengan nama unik secara global.

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

Pemecahan masalah

• Jika perintah az tidak dikenali, pastikan Anda telah memasang Azure CLI seperti yang dijelaskan di Menyiapkan lingkungan Anda.
• Ganti <app-name> dengan nama yang unik di seluruh Azure (<app-name> ). Pola yang baik adalah menggunakan kombinasi nama perusahaan Anda dan pengidentifikasi aplikasi.
• Argumen --sku F1 akan membuat aplikasi web pada tingkat harga Gratis. Hapus argumen ini untuk menggunakan tingkat premium yang lebih cepat, yang akan dikenakan biaya per jam.
• Argumen --html meminta untuk memperlakukan semua konten folder sebagai konten statik dan menonaktifkan otomatisasi build.
• Anda dapat secara opsional menyertakan argumen --location <location-name> dengan <location-name> sebagai wilayah Azure yang tersedia. Anda dapat mengambil daftar wilayah yang diizinkan untuk akun Azure Anda dengan menjalankan perintah az account list-locations.

Perintah ini mungkin perlu waktu beberapa menit untuk diselesaikan.

Apa fungsi az webapp up?

Perintah az webapp up melakukan tindakan berikut:

• Membuat grup sumber daya default.
• Membuat paket App Service default.
• Membuat aplikasi App Service dengan nama yang ditentukan.
• Zip menyebarkan file dari direktori yang saat ini berjalan ke aplikasi.
• Saat dijalankan, pesan tentang pembuatan sumber daya, pengelogan, dan penyebaran ZIP akan tersedia.

Setelah selesai dijalankan, akan ditampilkan informasi yang mirip dengan contoh berikut:

{
  "app_url": "https://<app_name>.azurewebsites.net",
  "location": "westeurope",
  "name": "<app_name>",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/<username>/quickstart/html-docs-hello-world ",
  < JSON data removed for brevity. >
}

Anda akan memerlukan nilai resourceGroup untuk menghapus sumber daya nantinya.

---

3. Menelusuri aplikasi

Di browser, buka URL aplikasi: http://<app_name>.azurewebsites.net.

Halaman ini berjalan sebagai aplikasi web Azure App Service.

---

4. Memperbarui dan menyebarkan ulang aplikasi

Di Cloud Shell, ketiknano index.html untuk membuka editor teks nano.

Di tag judul <h1>, ubah "Azure App Service - Sampel Situs HTML Statik" menjadi "Azure App Service".

Simpan perubahan Anda menggunakan perintah ^O.

Keluar dari nano menggunakan perintah ^X.

Sebarkan ulang aplikasi dengan perintah az webapp up.

az webapp up --html

Beralih kembali ke jendela browser yang terbuka di langkah Menelusuri aplikasi.

Refresh halaman.

---

5. Mengelola aplikasi Azure baru

Bukaportal Microsoft Azure.,

Cari dan pilihApp Services.

Pilih nama aplikasi Azure Anda.

Anda akan melihat halaman Ringkasan aplikasi web. Di sini, Anda dapat melakukan tugas manajemen dasar seperti menelusuri, menghentikan, memulai, menghidupkan ulang, dan menghapus.

Menu sebelah kiri menyediakan halaman yang berbeda untuk mengonfigurasi aplikasi Anda.

---

6. Menghapus sumber daya

Di langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Jika Anda tidak ingin membutuhkan sumber daya ini di masa mendatang, hapus grup sumber daya dengan menjalankan perintah berikut ini di Cloud Shell. Ingat bahwa nama grup sumber daya dibuat secara otomatis untuk Anda dalam langkah membuat aplikasi web.

az group delete --name appsvc_rg_Windows_westeurope

Perintah ini mungkin perlu waktu satu menit untuk dijalankan.

---

Langkah berikutnya

Petakan domain kustom