Latihan - Menerbitkan API dengan GitHub Actions

  • 4 menit

Aplikasi web dan API Anda sama-sama berjalan secara lokal. Sekarang saatnya untuk menerbitkan aplikasi web dan API Anda ke Azure Static Web Apps.

Mendorong perubahan ke GitHub

Anda membuat perubahan pada API Anda di latihan sebelumnya. Terapkan tersebut ke cabang api dan dorong ke GitHub dengan mengikuti langkah berikut:

  1. Di Visual Studio Code, buka palet perintah dengan menekan F1
  2. Ketik dan pilih Git: Terapkan Semua. Jika Visual Studio Code meminta Anda untuk otomatis menampilkan semua perubahan dan menerapkannya secara langsung, pilih Ya.
  3. Masukkan pesan penrapan seperti perubahan api
  4. Buka palet perintah dengan menekan F1
  5. Ketik dan pilih Git: Dorong
  6. Jika Anda diminta dengan pesan Cabang 'api' tidak memiliki cabang hulu. Anda ingin menerbitkan cabang ini? tekan tombol OK

Membuat Permintaan Pull

Anda mendorong cabang api Anda ke GitHub. Sekarang Anda ingin GitHub Action menerbitkan aplikasi web dan API Anda dalam URL pratinjau. Jadi, langkah berikutnya adalah membuat permintaan pull terhadap cabang utama.

  1. Membuka browser

  2. Menavigasi ke repositori Anda

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. Pilih tautan Permintaan pull

  4. Pilih tombol Permintaan pull baru

  5. Pilih cabang utama dari drop-down dasar

  6. Pilih cabang api dari drop-down bandingkan

  7. Pilih tombol Buat permintaan pull

  8. Sekali lagi, pilih tombol Buat permintaan pull kedua

GitHub Action Anda sekarang dipicu.

Awasi build dan penerbitan GitHub Action

Anda dapat tetap berada di browser di repositori Anda dan mengawasi kemajuan GitHub Action. Ikuti langkah ini untuk melihat kemajuan:

  1. Pilih menu Tindakan
  2. Di bawah menu Alur Kerja, pilih item alur kerja CI/CD Azure Static Web Apps Screenshot showing how to find the correct workflow.
  3. Pilih tautan atas dalam daftar tindakan yang dijalankan.
  4. Pilih tautan Build and Deploy Job.

Screenshot showing the build and deploy button on the workflow page.

Anda dapat melihat kemajuan GitHub Action saat membuild dan menerbitkan aplikasi web dan API Anda.

Menelusuri URL pratinjau

Setelah GitHub Action berhasil diselesaikan, Anda dapat melihat aplikasi yang sedang berjalan di browser.

  1. Pilih menu Permintaan pull
  2. Pilih permintaan pull Anda
  3. Pilih tautan dengan mengikuti pesan Azure Static Web Apps: Situs panggung Anda sudah siap! Kunjungi di sini

Perhatikan bahwa URL pratinjau berisi tanda hubung yang diikuti dengan angka. Nomor tersebut cocok dengan nomor permintaan pull untuk permintaan pull yang Anda buat. Untuk setiap permintaan pull yang Anda buat, Anda mendapatkan URL pratinjau yang unik dan dapat diulang. Wilayah ini juga digunakan untuk membentuk URL pratinjau.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Langkah berikutnya

Selamat, Anda membuat instans Azure Static Web Apps pertama Anda dengan aplikasi web dan API!