Latihan - Membuat Azure Static Web App

  • 5 menit

Dalam latihan ini, Anda akan membuat instans Azure Static Web Apps termasuk GitHub Action yang otomatis membuild dan menerbitkan aplikasi Anda.

Membuat Static Web App

Setelah membuat repositori GitHub, Anda dapat membuat instans Static Web Apps dari portal Microsoft Azure.

Modul ini menggunakan kotak pasir Azure untuk menyediakan langganan Azure gratis sementara yang dapat digunakan untuk menyelesaikan latihan Anda. Sebelum melanjutkan, pastikan Anda telah mengaktifkan kotak pasir di bagian atas halaman ini.

Kotak pasir Azure yang Anda aktifkan memungkinkan Anda menggunakan layanan Azure tanpa dikenakan biaya apa pun.

Memasang ekstensi Azure Static Web Apps untuk Visual Studio Code

  1. Buka Visual Studio Marketplace dan instal ekstensi Azure Static Web Apps untuk Visual Studio Code.

  2. Saat tab ekstensi dimuat di Visual Studio Code, pilih tombol Instal .

  3. Setelah penginstalan selesai, pilih Mulai ulang untuk memperbarui jika diminta.

Masuk ke Azure di Visual Studio Code

  1. Di Visual Studio Code, masuk ke Azure dengan mengeklik Tampilkan>Palet Perintah, lalu masukkan Azure: Masuk.

    Penting

    Masuk ke Azure menggunakan akun yang sama dengan yang digunakan untuk membuat kotak pasir. Kotak pasir menyediakan akses ke Langganan Concierge.

  2. Ikuti perintah untuk menyalin dan menempelkan kode yang disediakan di browser web, yang mengautentikasi sesi Visual Studio Code.

Pilih Langganan Anda

  1. Buka Visual Studio Code, dan pilih File > Buka dan buka repositori yang Anda kloning ke komputer di penyunting.

  2. Verifikasi bahwa Anda telah memfilter langganan Azure untuk menyertakan Langganan Concierge dengan membuka palet perintah dan memasukkan Azure: Select Subscriptions, lalu tekan Enter.

  3. Pilih Langganan Concierge dan tekan Enter.

    Screenshot of VS Code showing how to filter by subscription.

Membuat Static Web App

  1. Buka Visual Studio Code, dan pilih File > Buka untuk membuka repositori yang Anda kloning ke komputer di penyunting.

  2. Di dalam Visual Studio Code, pilih logo Azure di Bilah Aktivitas untuk membuka jendela ekstensi Azure.

    Screenshot of the Azure Logo in VS Code.

    Catatan

    Proses perincian masuk Azure dan GitHub diperlukan. Jika Anda belum masuk ke Azure dan GitHub dari Visual Studio Code, ekstensi akan meminta Anda untuk masuk ke keduanya selama proses pembuatan.

  3. Letakkan mouse Anda di atas judul Static Web Apps , klik kanan, dan pilih Buat Static Web App.

    Screenshot showing where to go to create a web app.

  4. Masukkan my-first-static-web-app, dan tekan Enter.

    Screenshot showing how to create a Static Web App.

  5. Pilih lokasi Anda dan tekan Enter.

    Screenshot showing how to select a subscription.

  6. Pilih opsi Kustom, dan tekan Enter

    Screenshot showing the custom option selected.

  1. Pilih angular-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the code location entered as Angular app.

  2. Masukkan dist/angular-app sebagai lokasi output build dalam membuat file untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing how to enter the build output location for Angular.

  1. Pilih react-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the code location entered as react app.

  2. Masukkan build sebagai lokasi output build dalam membuat file untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing how to enter the build output location for React.

  1. Pilih svelte-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the code location entered as Svelte app.

  2. Masukkan publik sebagai lokasi output build dalam membuat file untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing how to enter the build output location for Svelte.

  1. Pilih vue-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the code location entered as Vue app.

  2. Masukkan dist sebagai lokasi output build dalam membuat file untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing how to enter the build output location for Vue

Catatan

Repositori Anda mungkin sedikit berbeda dari yang telah Anda gunakan di masa lalu. Repositori ini berisi empat aplikasi yang berbeda dalam empat folder yang berbeda. Setiap folder berisi aplikasi yang dibuat dalam kerangka kerja JavaScript yang berbeda. Biasanya, Anda memiliki satu aplikasi di root repositori Anda dan menentukan / untuk lokasi jalur aplikasi. Ini adalah contoh yang bagus mengapa Azure Static Web Apps memungkinkan Anda untuk mengonfigurasi lokasi - Anda mendapatkan kontrol penuh atas bagaimana aplikasi dibangun.

  1. Setelah aplikasi dibuat, pemberitahuan konfirmasi ditampilkan di Visual Studio Code.

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

    Saat penyebaran sedang berlangsung, ekstensi Visual Studio Code melaporkan status build kepada Anda.

    Screenshot of the VS Code UI showing waiting for deployment.

  2. Anda dapat melihat kemajuan penyebaran menggunakan tindakan GitHub dengan memperluas menu Tindakan.

    Screenshot showing how to check progress via GitHub Actions.

    Setelah penyebaran selesai, Anda dapat menavigasi langsung ke situs web Anda.

  3. Untuk menampilkan situs web di browser, klik kanan pada proyek di ekstensi Static Web Apps, dan pilih Telusuri Situs.

    Screenshot showing how to browse to your static web app site.

Selamat! Anda telah menyebarkan aplikasi pertama Anda ke Azure Static Web Apps!

Catatan

Jangan khawatir jika Anda melihat halaman web yang mengatakan aplikasi belum dibuat dan disebarkan. Refresh browser beberapa saat. GitHub Action berjalan secara otomatis saat Azure Static Web Apps dibuat. Jika Anda melihat halaman splash, aplikasi masih disebarkan.