Bagikan melalui

Mulai cepat: Membuat dan menyebarkan aplikasi web Python dari GitHub Codespaces ke Azure menggunakan templat Azure Developer CLI

Panduan mulai cepat ini membimbing Anda melalui cara tercepat dan termudah untuk membuat dan menyebarkan solusi web dan database Python ke dalam Azure. Dengan mengikuti petunjuk dalam panduan cepat ini, Anda akan:

  • Pilih templat Azure Developer CLI (azd) berdasarkan kerangka kerja web Python, platform database Azure, dan platform hosting web Azure yang ingin Anda bangun.
  • Buat GitHub Codespace baru yang berisi kode yang dihasilkan dari templat yang azd Anda pilih.
  • Gunakan GitHub Codespaces dan terminal bash Visual Studio Code online. Terminal memungkinkan Anda menggunakan perintah Azure Developer CLI untuk menjalankan azd templat untuk membuat sampel aplikasi web dan database, dan membuat dan mengonfigurasi sumber daya Azure yang diperlukan, lalu menyebarkan contoh aplikasi web ke Azure.
  • Edit aplikasi web di GitHub Codespace dan gunakan azd perintah untuk menyebarkan ulang.
  • azd Gunakan perintah untuk membersihkan sumber daya Azure.
  • Tutup dan buka kembali GitHub Codespace Anda.
  • Terbitkan kode baru Anda ke repositori GitHub.

Diperlukan waktu kurang dari 25 menit untuk menyelesaikan tutorial ini. Setelah selesai, Anda dapat mulai memodifikasi proyek baru dengan kode kustom Anda.

Untuk mempelajari selengkapnya tentang templat ini azd untuk pengembangan aplikasi web Python:

Prasyarat

Penting

Baik GitHub Codespaces dan Azure adalah layanan berbasis langganan berbayar. Setelah beberapa jatah gratis, Anda mungkin dikenakan biaya untuk menggunakan layanan ini. Mengikuti panduan cepat ini dapat memengaruhi alokasi atau penagihan. Jika memungkinkan, azd templat dibuat menggunakan tingkat opsi yang paling murah, tetapi beberapa mungkin tidak gratis. Gunakan kalkulator Harga Azure untuk lebih memahami biayanya. Untuk informasi selengkapnya, lihat Harga GitHub Codespaces untuk detail selengkapnya.

Pilih templat dan buat codespace

Pilih templat berdasarkan kerangka kerja web Python, platform hosting web Azure, dan platform database Azure yang azd ingin Anda bangun.

  1. Dari daftar templat berikut, pilih templat yang menggunakan teknologi yang ingin Anda gunakan di aplikasi web baru Anda.

    Templat Kerangka Kerja Web Basis data Hosting Platform Codespace Baru
    azure-django-postgres-flexible-aca Django Server Fleksibel PostgreSQL Aplikasi Kontainer Azure Codespace Baru
    azure-django-postgres-flexible-appservice Django Server Fleksibel PostgreSQL Azure App Service Codespace Baru
    azure-django-cosmos-postgres-aca Django Cosmos DB (Adaptor PostgreSQL) Aplikasi Kontainer Azure Codespace Baru
    azure-django-cosmos-postgres-appservice Django Cosmos DB (Adaptor PostgreSQL) Azure App Service Codespace Baru
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL Tambahan Aplikasi Kontainer Azure Codespace Baru

  1. Demi kenyamanan Anda, kolom terakhir dari setiap tabel berisi tautan yang membuat Codespace baru dan menginisialisasi azd templat di akun GitHub Anda. Klik kanan dan pilih "Buka di tab baru" pada tautan "Codespace Baru" di samping nama templat yang Anda pilih untuk memulai proses penyiapan.

    Selama proses ini, Anda mungkin diminta untuk masuk ke akun GitHub Anda, dan Anda diminta untuk mengonfirmasi bahwa Anda ingin membuat Codespace. Pilih tombol "Buat Codespace" untuk melihat halaman "Menyiapkan codespace Anda".

  2. Setelah beberapa menit, versi Visual Studio Code berbasis web dimuat di tab browser baru dengan templat web Python yang dimuat sebagai ruang kerja dalam tampilan Explorer.

Mengautentikasi ke Azure dan menyebarkan templat azd

Sekarang setelah Anda memiliki GitHub Codespace yang berisi kode yang baru dibuat, Anda menggunakan azd utilitas dari dalam Codespace untuk menerbitkan kode ke Azure.

  1. Di Visual Studio Code berbasis web, terminal harus terbuka secara default. Jika tidak, gunakan kunci tilde ~ untuk membuka terminal. Selain itu, secara default, terminal harus menjadi terminal bash. Jika tidak, alihkan ke bash di area kanan atas jendela terminal.

  2. Di terminal bash, masukkan perintah berikut:

    azd auth login

    azd auth login memulai proses autentikasi Codespace Anda ke akun Azure Anda.

    Start by copying the next code: XXXXXXXXX
Then press enter and continue to log in from your browser...

Waiting for you to complete authentication in the browser...

  3. Ikuti instruksi, yang meliputi:

    • Menyalin kode yang dihasilkan
    • Memilih enter untuk membuka tab browser baru dan menempelkan kode ke dalam kotak teks
    • Memilih akun Azure Anda dari daftar
    • Mengonfirmasi bahwa Anda mencoba masuk ke Microsoft Azure CLI

  4. Jika berhasil, pesan berikut ditampilkan kembali di tab Codespaces di terminal:

    Device code authentication completed.
Logged in to Azure.

  5. Sebarkan aplikasi baru Anda ke Azure dengan memasukkan perintah berikut:

    azd up

    Selama proses ini, Anda diminta untuk:

    • Masukkan nama lingkungan baru
    • Pilih Langganan Azure untuk menggunakan [Gunakan panah untuk memindahkan, mengetik untuk memfilter]
    • Pilih lokasi Azure yang akan digunakan: [Gunakan panah untuk memindahkan, mengetik untuk memfilter]

    Setelah Anda menjawab pertanyaan tersebut, output dari azd menunjukkan bahwa penyebaran sedang berlangsung.

    Penting

    Setelah azd up berhasil diselesaikan, aplikasi web sampel akan tersedia di internet publik dan Langganan Azure Anda akan mulai dikenakan biaya untuk semua sumber daya yang dibuat. Pembuat azd templat sengaja memilih tingkat murah tetapi belum tentu tingkat gratis karena tingkat gratis sering memiliki ketersediaan terbatas. Setelah Anda selesai bekerja dengan sampel aplikasi web, gunakan azd down untuk menghapus semua layanan yang dibuat oleh azd up.

    Ikuti instruksi saat diminta untuk memilih Langganan Azure yang akan digunakan untuk pembayaran, lalu pilih lokasi Azure yang akan digunakan. Pilih wilayah yang dekat dengan Anda secara geografis.

    Mengeksekusi azd up bisa memakan waktu beberapa menit karena menyediakan dan menyebarkan beberapa layanan Azure. Saat kemajuan ditampilkan, perhatikan kesalahan. Jika Anda melihat kesalahan, lihat bagian Pemecahan Masalah di bagian bawah dokumen ini.

  6. Ketika azd up berhasil diselesaikan, output serupa ditampilkan:

    (✓) Done: Deploying service web
- Endpoint: https://xxxxx-xxxxxxxxxxxxx-ca.example-xxxxxxxx.westus.azurecontainerapps.io/

SUCCESS: Your application was provisioned and deployed to Azure in 11 minutes 44 seconds.
You can view the resources created under the resource group xxxxx-rg in Azure Portal:
https://portal.azure.com/#@/resource/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/xxxxx-rg/overview

    Jika Anda melihat layar default atau layar kesalahan, aplikasi mungkin dimulai. Harap tunggu 5-10 menit untuk melihat apakah masalah diselesaikan sendiri sebelum pemecahan masalah.

    Ctrl + klik URL pertama setelah kata - Endpoint: untuk melihat contoh proyek aplikasi web yang berjalan secara langsung di Azure.

  7. Ctrl + klik URL kedua dari langkah sebelumnya untuk melihat sumber daya yang disediakan di portal Microsoft Azure.

Mengedit dan menyebarkan ulang

Langkah selanjutnya adalah membuat perubahan kecil pada aplikasi web lalu menyebarkan ulang.

  1. Kembali ke tab browser yang berisi Visual Studio Code, dan gunakan tampilan Penjelajah Visual Studio Code untuk menavigasi ke folder src/templat , dan buka file index.html . Temukan baris kode berikut:

    <h1 id="page-title">Welcome to ReleCloud</h1>

    Ubah teks di dalam H1:

    <h1 id="page-title">Welcome to ReleCloud - UPDATED</h1>

    Kode Anda disimpan saat Anda mengetik.

  2. Untuk menyebarkan ulang aplikasi dengan perubahan Anda, jalankan perintah berikut di terminal:

    azd deploy

  3. Setelah perintah selesai, refresh tab browser dengan situs web ReleCloud untuk melihat pembaruan. Tergantung pada platform hosting web yang digunakan, bisa memakan waktu beberapa menit sebelum perubahan Anda terlihat.

    Anda sekarang siap untuk mengedit dan menghapus file dalam templat. Untuk informasi selengkapnya, lihat Apa yang bisa saya edit atau hapus di templat?

Membersihkan sumber daya

Bersihkan sumber daya yang dibuat oleh templat dengan menjalankan perintah azd down .

azd down

Perintah azd down menghapus sumber daya Azure dan alur kerja GitHub Actions. Ketika diminta, setuju untuk menghapus semua sumber daya yang terkait dengan grup sumber daya.

Opsional: Temukan codespace Anda

Bagian ini menunjukkan bagaimana kode Anda (sementara) berjalan dan bertahan dalam jangka pendek di Codespace. Jika Anda berencana untuk terus mengerjakan kode, Anda harus menerbitkan kode ke repositori baru.

  1. Tutup semua tab yang terkait dengan artikel Mulai Cepat ini, atau matikan browser web Anda sepenuhnya.

  2. Buka browser web Anda dan tab baru, dan navigasikan ke: https://github.com/codespaces

  3. Di dekat bagian bawah, Anda akan melihat daftar Codespace terbaru. Cari yang Anda buat di bagian berjudul "Dimiliki oleh Azure-Samples".

  4. Pilih elipsis di sebelah kanan Codespace ini untuk melihat menu konteks. Dari sini Anda dapat mengganti nama codespace, menerbitkan ke repositori baru, mengubah jenis komputer, menghentikan codespace, dan banyak lagi.

Opsional: Menerbitkan repositori GitHub dari Codespace

Pada titik ini, Anda memiliki Codespace, yang merupakan kontainer yang dihosting oleh GitHub yang menjalankan lingkungan pengembangan Visual Studio Code Anda dengan kode baru yang dihasilkan dari azd templat. Namun, kode tidak disimpan di repositori GitHub. Jika Anda berencana untuk terus mengerjakan kode, Anda harus menjadikannya prioritas.

  1. Dari menu konteks untuk codespace, pilih "Terbitkan ke repositori baru".
  2. Dalam dialog "Terbitkan ke repositori baru", ganti nama repositori baru Anda dan pilih apakah Anda ingin repositori publik atau privat. Pilih "Buat repositori".
  3. Setelah beberapa saat, repositori akan dibuat dan kode yang Anda buat sebelumnya dalam Mulai Cepat ini akan didorong ke repositori baru. Pilih tombol "Lihat repositori" untuk menavigasi ke repositori baru.
  4. Untuk membuka kembali dan melanjutkan pengeditan kode, pilih menu turun hijau "<> Kode", beralih ke tab Codespaces, dan pilih nama Codespace yang Anda kerjakan sebelumnya. Anda sekarang harus dikembalikan ke lingkungan pengembangan Codespace Visual Studio Code Anda.
  5. Gunakan panel Kontrol Sumber untuk membuat cabang dan tahap baru dan menerapkan perubahan baru pada kode Anda.

Penyelesaian Masalah

Jika Anda melihat kesalahan selama azd up, cobalah hal berikut:

  • Jalankan azd down untuk menghapus sumber daya apa pun yang mungkin telah dibuat. Atau, Anda dapat menghapus grup sumber daya yang dibuat di portal Microsoft Azure.
  • Buka halaman Codespace untuk akun GitHub Anda, temukan Codespace yang dibuat selama Mulai Cepat ini, pilih elipsis di sebelah kanan dan pilih "Hapus" dari menu konteks.
  • Di portal Microsoft Azure, cari Key Vault. Pilih Mengelola vault yang dihapus, pilih langganan Anda, pilih semua vault kunci yang berisi nama azdtest atau apa pun yang Anda beri nama lingkungan Anda, dan pilih Hapus menyeluruh.
  • Coba ulang langkah-langkah dalam panduan cepat ini. Kali ini ketika diminta, pilih nama yang lebih sederhana untuk lingkungan Anda. Coba nama pendek, huruf kecil, tanpa angka, tidak ada huruf besar, tanpa karakter khusus.
  • Saat mencoba kembali langkah-langkah panduan cepat, pilih lokasi lain.

Lihat FAQ untuk daftar masalah dan solusi yang lebih komprehensif.

Konten terkait