Bagikan melalui


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

Mulai cepat ini memandu Anda melalui cara termudah dan tercepat untuk membuat dan menyebarkan solusi Python untuk web dan database ke Azure. Dengan mengikuti instruksi dalam panduan cepat ini, Anda:

  • 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 azd yang Anda pilih.
  • Gunakan GitHub Codespace dan terminal bash Visual Studio Code online. Terminal memungkinkan Anda menggunakan perintah CLI Pengembang Azure untuk menjalankan templat azd untuk membuat sampel aplikasi web dan database, dan membuat dan mengonfigurasi sumber daya Azure yang diperlukan, lalu menyebarkan aplikasi web sampel ke Azure.
  • Edit aplikasi web di GitHub Codespace dan gunakan perintah azd untuk menyebarkan ulang.
  • Gunakan perintah azd 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 azd ini untuk pengembangan aplikasi web Python, lihat:

Prasyarat

Penting

Codespace GitHub 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 menggunakan tingkat opsi yang paling murah, tetapi beberapa mungkin tidak gratis. Gunakan Azure Kalkulator harga untuk lebih memahami biaya. Untuk informasi selengkapnya, lihat harga GitHub Codespaces untuk detail selengkapnya.

Pilih templat dan buat codespace

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

  1. Dari daftar templat berikut, pilih salah satu 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 Azure Container Apps Ruang Kode Baru
    azure-django-postgres-flexible-appservice Django Server Fleksibel PostgreSQL Azure App Service Ruang Kode Baru
    azure-django-cosmos-postgres-aca Django Cosmos DB (Adaptor PostgreSQL) Azure Container Apps Ruang Kode Baru
    azure-django-cosmos-postgres-appservice Django Cosmos DB (Adaptor PostgreSQL) Azure App Service Codespace Baru
    azure-django-postgres-addon-aca Django Add-on PostgreSQL untuk Azure Container Apps Azure Container Apps Ruang Kode Baru

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

    Selama proses ini, Anda mungkin diminta untuk masuk ke akun GitHub Anda. Anda juga 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 dimuat sebagai ruang kerja dalam tampilan Explorer.

Mengautentikasi untuk Azure dan menyebarkan templat azd

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

  1. Di Visual Studio Code berbasis web, terminal terbuka secara default. Jika tidak, gunakan kunci tilde ~ untuk membuka terminal. Secara default, terminal adalah 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 mulai mengautentikasi 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 digunakan [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 tersedia di internet publik dan Langganan Azure Anda 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 contoh aplikasi web, gunakan azd down untuk menghapus semua layanan yang azd up dibuat.

    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.

    Menjalankan azd up dapat 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 akan dimulai. Tunggu 5-10 menit untuk melihat apakah masalah diselesaikan sendiri sebelum pemecahan masalah.

    1. 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 Azure.

Mengedit dan menyebarkan ulang

Selanjutnya, buat perubahan kecil pada aplikasi web lalu sebarkan ulang.

  1. Kembali ke tab browser yang berisi Visual Studio Code. Gunakan tampilan Explorer Visual Studio Code untuk masuk ke folder src/templates. 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. Bergantung pada platform hosting web yang Anda gunakan, mungkin perlu 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 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 untuk sementara berjalan dan bertahan dalam jangka pendek di Codespace. Jika Anda berencana untuk terus mengerjakan kode, terbitkan 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 buka https://github.com/codespaces.

  3. Di dekat bagian bawah, Anda akan melihat daftar Codespace terbaru. Cari item yang Anda buat di bagian yang berjudul "Owned by 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 menjalankan lingkungan pengembangan Visual Studio Code Anda dengan kode baru yang dihasilkan dari templat azd. Namun, kode tidak disimpan dalam repositori GitHub. Jika Anda berencana untuk terus mengerjakan kode, prioritaskan menyimpannya di repositori.

  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 dibuat dan kode yang Anda buat sebelumnya dalam Mulai Cepat ini didorong ke repositori baru. Pilih tombol Lihat repositori untuk masuk ke repositori baru.
  4. Untuk membuka kembali dan melanjutkan pengeditan kode, pilih drop-down hijau "<> Kode", beralihlah ke tab Codespaces , dan pilih nama Codespace yang Anda kerjakan sebelumnya. Anda kembali ke lingkungan pengembangan Visual Studio Code Codespace 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, coba langkah-langkah berikut:

  • Jalankan azd down untuk menghapus sumber daya apa pun yang dibuat perintah. Atau, Anda dapat menghapus grup sumber daya yang Anda buat di portal Azure.
  • Buka halaman Codespace untuk akun GitHub Anda, temukan Codespace yang dibuat selama Mulai Cepat ini, pilih elipsis di sebelah kanan, dan pilih Delete dari menu konteks.
  • Di portal Azure, cari Key Vault. Pilih Kelola vault yang dihapus, lalu pilih langganan Anda, pilih semua key vault yang berisi nama azdtest atau nama lingkungan Anda, dan pilih Purge.
  • Ulangi 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, dan tanpa karakter khusus.
  • Saat mencoba kembali langkah-langkah panduan cepat, pilih lokasi lain.

Untuk daftar yang lebih komprehensif tentang kemungkinan masalah dan solusi, lihat FAQ.