Menyebarkan aplikasi Angular ke Firebase dengan Tindakan GitHub

Set arahan ini membantu anda menyiapkan tindakan github untuk membina projek sudut dan digunakan ke hosting firebase pada acara push. Malah anda boleh merujuk tutorial ini untuk membina nod.Permohonan JS dan Depploy to Firebase.

Tindakan GitHub membolehkan anda mengautomasikan, menyesuaikan, dan melaksanakan aliran kerja pembangunan perisian anda di repositori anda. Ini adalah cara terbaik untuk mencipta dan mengekalkan integrasi berterusan/penyebaran berterusan (CI/CD) untuk aplikasi anda.

Kami menganggap anda sudah menolak permohonan anda ke repositori github. Mari kita mulakan dengan konfigurasi tindakan github.

Langkah 1 - Buat tindakan github

Log masuk ke akaun GitHub anda dan akses repositori anda. Di repositori anda klik pada Tindakan tab, kemudian klik "Sediakan aliran kerja sendiri"Pautan.

Lihat di bawah tangkapan skrin untuk rujukan:

Langkah 2 - Buat aliran kerja

Sebaik sahaja anda mengklik pautan aliran kerja set, ini akan mengedit fail baru ".github/aliran kerja/utama.yml ”di bawah repositori. Yang mengandungi beberapa konfigurasi lalai untuk aliran kerja.

Anda akan melihat fail yang baru dikeluarkan, seperti ini:

Pekerjaan: # Aliran kerja ini mengandungi pekerjaan tunggal yang dipanggil "Bina" Bina: # Jenis pelari yang akan dijalankan di Runs-On: Ubuntu-Latest # Langkah-langkah mewakili urutan tugas yang akan dilaksanakan sebagai sebahagian daripada langkah-langkah pekerjaan : # Cek -keluar repositori anda di bawah $ github_workspace, jadi tugas anda dapat mengaksesnya - kegunaan: tindakan/[dilindungi e -mel] # menjalankan arahan tunggal menggunakan pelari shell - nama: lari skrip satu baris lari: echo hello, dunia! # Menjalankan satu set arahan menggunakan pelari shell - Nama: Jalankan skrip berbilang baris: | Echo Tambahkan tindakan lain untuk membina, menguji echo, dan gunakan projek anda. 

Langkah 3 - Sesuaikan aliran kerja anda

Sekarang, kami akan menyesuaikan fail konfigurasi aliran kerja berdasarkan keperluan kami. Dalam langkah ini, kita telah merosakkan langkah konfigurasi demi langkah untuk membuat anda faham. Malah anda boleh melangkau langkah ini, kerana fail konfigurasi penuh disediakan dalam langkah seterusnya.

1. Tentukan nama aliran kerja - Ini adalah langkah pilihan, tetapi anda boleh memberi nama kepada aliran kerja anda.

   Nama: Deploy_to_firebase_hosting 

2. Sesuaikan nama pekerjaan - Semua pekerjaan ditakrifkan di bawah bahagian "Pekerjaan:". Pertama, kita menukar nama kerja Defualt membina ke Firebase-Deploy. Anda boleh mengubahnya ke mana -mana nama sesuai dengan anda.

   Pekerjaan: Firebase-Deploy: 

3. Sesuaikan pencetus - Aliran kerja lalai mencetuskan pada setiap tolak ke mana -mana cawangan. Anda mungkin perlu mengehadkan ini ke cawangan tertentu.

   Sebagai contoh, aktifkan aliran kerja mencetuskan hanya pada push to main atau melepaskan/cawangan:

   ON: PUSH: Cawangan: - Utama - Siaran/* 

4. Kemas kini tindakan checkout - Aliran kerja lalai menggunakan tindakan/[dilindungi e -mel], yang merupakan versi terkini. Jadi tidak perlu membuat perubahan di sini tetapi anda masih boleh mengubahnya kepada tindakan paling terkini/[dilindungi e -mel]

   - Kegunaan: Tindakan/[dilindungi e -mel] 

5. Sesuaikan nod.JS membina pencetus - Sekarang, tentukan nod.versi js dan bina arahan untuk aplikasi sudut anda. Contohnya, kami menggunakan nod.JS 12.versi x untuk membina aplikasi ini.

   Langkah: - Kegunaan: Tindakan/[Dilindungi E -mel] - Kegunaan: Tindakan/[Dilindungi E -mel] Dengan: Nod -Vision: '12.X ' - Run: NPM Pasang - Jalankan: NPM Run Build: Prod 

6. Depploy to Firebase - Langkah terakhir adalah menggunakan aplikasi anda ke fungsi firebase.

   Langkah: - Kegunaan: Tindakan/[Dilindungi E -mel] - Kegunaan: Tindakan/[Dilindungi E -mel] Dengan: Nod -Vision: '12.X ' - RUN: NPM Pasang - Jalankan: NPM Run Build: Prod - Kegunaan: W9JDS/[E -mel dilindungi] dengan: args: deploy - hanya hosting env: firebase_token: $ secrets.Firebase_token 

   Seperti konfigurasi di atas, penggunaan akan dilakukan untuk hosting firebase sahaja. Anda juga boleh menukar nilai args ke "Deploy -hanya fungsi"Untuk menggunakan fungsi firbase.

Sekarang klik pada mulakan komit di sebelah kanan untuk melakukan aliran kerja baru anda.

Langkah 4 - Persediaan Token Firebase

Tindakan github menggunakan pekerjaan memerlukan firebase_token untuk pengesahan untuk menggunakan kod di firebase. Anda boleh menjana token menggunakan alat CLI Firebase pada sistem anda.

Pertama, pasangkan alat api firebase menggunakan npm.

NPM I -G -FireS -Tools  

Kemudian jalankan Log masuk Firebase: CI Perintah di terminal:

Log masuk Firebase: CI  

Ini akan menunjukkan kepada anda di terminal anda, buka pautan ini dalam pelayar web dan kebenaran lengkap. Ini akan menunjukkan kepada anda tanda untuk digunakan untuk tugas CI.

Contoh: Firebase Deploy -Token "\ $ firebase_token"

Kerana tidak selamat untuk menyimpan tanda ini dalam fail konfigurasi. Tambahkan token ini ke rahsia github.

Di repositori github anda, pergi ke Tetapan> Rahsia> Rahsia Repositori Baru:

Gunakan Firebase_token sebagai nama dan masukkan kod rahsia di nilai seksyen. Kemudian klik pada Tambah Butang Rahsia.

Langkah 5 - Konfigurasi Aliran Kerja Akhir

Fail konfigurasi aliran kerja akhir anda harus kelihatan seperti ini dalam editor teks:

Fail: .github/aliran kerja/utama.yml

Nama: Deploy_to_firebase_hosting ON: Push: Cawangan: - Master - Release/* Pekerjaan: Firebase -Deploy: Runs -On: Ubuntu -Latest Langkah -langkah: - Menggunakan: Tindakan/[Dilindungi E -mel] - Menggunakan: Tindakan/[E -mel dilindungi] Dengan: Nod-versi: '12.X ' - RUN: NPM Pasang - Jalankan: NPM Run Build: Prod - Kegunaan: W9JDS/[E -mel dilindungi] dengan: args: deploy - hanya hosting env: firebase_token: $ secrets.Firebase_token 

Sekarang anda boleh melakukan fail konfigurasi aliran kerja ke repositori anda. Aliran kerja ini ditambah ke .github/aliran kerja/utama.yml. Anda boleh menukar utama.yml fielname pilihan anda dengan .lanjutan YML.

Seterusnya, teruskan dan tolak beberapa perubahan pada repositori github anda. Ini akan menyentuh tindakan github dan melaksanakan langkah -langkah yang ditakrifkan dalam aliran kerja.

Kesimpulan

Dalam tutorial ini, anda telah belajar untuk membina projek sudut menggunakan tindakan github dan menggunakan hosting firebase.

Anda juga boleh melawat dokumentasi GitHub Actions untuk maklumat lanjut.