Tutorial: Menyebarkan repositori GitLab di Azure Static Web Apps

  • Artikel

Azure Static Web Apps memiliki opsi penyebaran fleksibel yang memungkinkan untuk bekerja dengan berbagai penyedia. Dalam artikel ini, Anda menyebarkan aplikasi web yang dihosting di GitLab ke Azure Static Web Apps.

Dalam tutorial ini, Anda mempelajari caranya:

  • Mengimpor repositori ke GitLab
  • Membuat Static Web App
  • Mengonfigurasi repositori GitLab untuk disebarkan ke Azure Static Web Apps

Prasyarat

Membuat repositori

Artikel ini menggunakan repositori GitHub sebagai sumber untuk mengimpor kode ke repositori GitLab.

  1. Masuk ke akun GitLab Anda dan buka https://gitlab.com/projects/new#import_project

  2. Pilih Repositori menurut URL.

  3. Dalam kotak URL repositori Git, masukkan URL repositori untuk kerangka kerja pilihan Anda.

  4. Dalam kotak Simpul proyek, masukkan my-first-static-web-app.

  5. Pilih Buat proyek dan tunggu sebentar saat repositori Anda disiapkan.

Membuat Static Web App

Setelah repositori dibuat, Anda dapat membuat aplikasi web statik dari portal Microsoft Azure.

  1. Buka portal Microsoft Azure.

  2. Pilih Buat Sumber Daya.

  3. Cari Static Web Apps.

  4. Pilih Static Web Apps.

  5. Pilih Buat.

  6. Di bagian Dasar , mulailah dengan mengonfigurasi aplikasi baru Anda.

    Pengaturan Nilai
    Langganan Azure Pilih langganan Azure Anda.
    Grup Sumber Daya Pilih tautan Buat baru dan masukkan static-web-apps-gitlab.
    Nama Masukkan my-first-static-web-app.
    Jenis paket Pilih Gratis.
    Region for Azure Functions API dan lingkungan pementasan Pilih wilayah yang terdekat dengan Anda.
    Sumber Pilih Lainnya.

  7. Pilih Tinjau + buat.

  8. Pilih Buat.

  9. Pilih Buka sumber daya.

  10. Pilih Kelola token penyebaran.

  11. Salin nilai token penyebaran dan sisihkan di editor untuk digunakan nanti.

  12. Pilih Tutup pada jendela Kelola token penyebaran.

Membuat tugas alur di GitLab

Selanjutnya Anda menambahkan tugas alur kerja yang bertanggung jawab untuk membangun dan menyebarkan situs Saat Anda membuat perubahan.

Menambahkan token penyebaran

Saat mengikuti langkah-langkah di bawah ini, pastikan Anda memilih * untuk bagian lingkungan. Mungkin muncul nilai default adalah semua tetapi Anda perlu mengklik dropdown dan secara manual memilih *.

  1. Buka repositori di GitLab.
  2. Pilih pengaturan.
  3. Pilih CI/CD.
  4. Di samping bagian Variabel , pilih Perluas.
  5. Pilih Tambahkan variabel.
  6. Dalam kotak Kunci , masukkan DEPLOYMENT_TOKEN.
  7. Dalam kotak Nilai , tempelkan nilai token penyebaran yang Anda sisihkan di langkah sebelumnya.
  8. Pilih Tambahkan variabel.

Tambah File

  1. Pilih opsi menu Repositori.

  2. Pilih File.

  3. Pastikan cabang utama dipilih di drop-down cabang di bagian atas.

  4. Tekan menu drop-down tanda plus dan pilih File baru.

  5. Buat file baru bernama .gitlab-ci.yml di akar repositori. (Pastikan ekstensi file adalah .yml.)

  6. Masukkan YAML berikut ke dalam file.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    Properti konfigurasi berikut digunakan dalam file .gitlab-ci.yml untuk mengonfigurasi aplikasi web statis Anda.

    Variabel $CI_PROJECT_DIR memetakan ke lokasi folder akar repositori selama proses build.

    Properti Deskripsi Contoh Wajib
    APP_PATH Lokasi kode aplikasi Anda. Masukkan $CI_PROJECT_DIR/ apakah kode sumber aplikasi Anda berada di akar repositori, atau $CI_PROJECT_DIR/app jika kode aplikasi Anda berada di folder bernama app. Ya
    API_PATH Lokasi kode Azure Functions Anda. Masukkan $CI_PROJECT_DIR/api jika kode aplikasi Anda berada di folder bernama api. No
    OUTPUT_PATH Lokasi folder output build relatif terhadap APP_PATH. Jika kode sumber aplikasi Anda berada di $CI_PROJECT_DIR/app , dan file output skrip build ke folder $CI_PROJECT_DIR/app/build, lalu atur $CI_PROJECT_DIR/app/build sebagai nilai OUTPUT_PATH. No
    API_TOKEN Token API untuk penyebaran. API_TOKEN: $DEPLOYMENT_TOKEN Ya

  7. Pilih Terapkan perubahan.

  8. Pilih ITEM menu CI/CD lalu Alur untuk melihat kemajuan penyebaran Anda.

Setelah penyebaran selesai, Anda dapat melihat situs web Anda.

Menampilkan situs web

Ada dua aspek untuk menyebarkan aplikasi statik. Langkah pertama membuat sumber daya Azure yang mendasar yang membentuk aplikasi Anda. Yang kedua adalah alur kerja GitLab yang membangun dan menerbitkan aplikasi Anda.

Sebelum Anda dapat membuka situs statis baru Anda, build penyebaran harus terlebih dahulu selesai berjalan.

Jendela gambaran umum Static Web Apps menampilkan serangkaian tautan yang membantu Anda berinteraksi dengan aplikasi web Anda.

  1. Kembali ke aplikasi web statis Anda di portal Azure.
  2. Buka jendela Gambaran Umum .
  3. Pilih tautan di bawah label URL . Situs web Anda dimuat di tab baru.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, Anda dapat menghapus instans Azure Static Web Apps dan semua layanan terkait dengan menghapus grup sumber daya.

  1. Pilih grup sumber daya static-web-apps-gitlab dari bagian Gambaran Umum.
  2. Pilih Hapus grup sumber daya di bagian atas Gambaran Umum grup sumber daya.
  3. Masukkan nama grup sumber daya static-web-apps-gitlab di dialog konfirmasi Apakah Anda yakin ingin menghapus "static-web-apps-gitlab"?
  4. Pilih Hapus.

Proses untuk menghapus grup sumber daya mungkin memerlukan waktu beberapa menit untuk diselesaikan.

Langkah berikutnya

Menambahkan API