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.

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 memilih Tampilkan>Palet Perintah, dan masukkan Azure: Masuk.

  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 Buka File > dan buka repositori yang Anda kloning ke komputer Anda di editor.

  2. Verifikasi bahwa Anda telah masuk ke langganan Azure pilihan Anda dengan membuka palet perintah dan memasukkan Azure: Select Subscriptions, dan tekan Enter.

  3. Pilih langganan Anda (Tanda centang akan muncul di sampingnya) dan klik Ok.

Membuat Static Web App

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

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

    Cuplikan layar Logo Azure di Visual Studio 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.

    Cuplikan layar memperlihatkan tempat untuk membuat aplikasi web.

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

    Cuplikan layar memperlihatkan cara membuat Static Web App.

  5. Pilih lokasi Anda dan tekan Enter.

    Cuplikan layar memperlihatkan cara memilih langganan.

  1. Pilih opsi Sudut , dan tekan Enter.

    Cuplikan layar memperlihatkan opsi sudut yang dipilih.

  2. Masukkan /angular-app sebagai lokasi untuk kode aplikasi, dan tekan Enter.

    Cuplikan layar memperlihatkan lokasi kode yang dimasukkan sebagai aplikasi Angular.

  3. Masukkan dist/angular-app sebagai lokasi output build tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Cuplikan layar memperlihatkan cara memasukkan lokasi output build untuk Angular.

  1. Pilih opsi React , dan tekan Enter.

    Cuplikan layar memperlihatkan opsi react dipilih.

  2. Masukkan /react-app sebagai lokasi untuk kode aplikasi, dan tekan Enter.

    Cuplikan layar memperlihatkan lokasi kode yang dimasukkan sebagai aplikasi react.

  3. Masukkan build sebagai lokasi output build tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Cuplikan layar memperlihatkan cara memasukkan lokasi output build untuk React.

  1. Pilih opsi Svelte , dan tekan Enter.

    Cuplikan layar memperlihatkan opsi svelte dipilih.

  2. Masukkan /svelte-app sebagai lokasi untuk kode aplikasi, dan tekan Enter.

    Cuplikan layar memperlihatkan lokasi kode yang dimasukkan sebagai aplikasi Svelte.

  3. Masukkan publik sebagai lokasi output build tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Cuplikan layar memperlihatkan cara memasukkan lokasi output build untuk Svelte.

  1. Pilih opsi Vue , dan tekan Enter.

    Cuplikan layar menunjukkan bahwa opsi vue telah dipilih.

  2. Masukkan /vue-app sebagai lokasi untuk kode aplikasi, dan tekan Enter.

    Cuplikan layar memperlihatkan lokasi kode yang dimasukkan sebagai aplikasi Vue.

  3. Masukkan dist sebagai lokasi output build tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Cuplikan layar memperlihatkan cara memasukkan lokasi output build untuk 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.

    Cuplikan layar kode konfirmasi yang meminta pengguna untuk membuka tindakan di GitHub atau Lihat/Edit Konfigurasi.

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

    Cuplikan layar memperlihatkan cara memeriksa kemajuan melalui 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.

    Cuplikan layar memperlihatkan cara menelusuri ke situs aplikasi web statis Anda.

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.