Permudah masalah produksi dan penerapan Anda dengan pipeline CI/CD yang menangani detail yang melelahkan.

Men-deploy aplikasi web ke Firebase Hosting bisa merepotkan. Namun, dengan menggunakan tindakan GitHub, Anda dapat menyederhanakan dan merampingkan proses penerapan, dan membuatnya sangat mudah untuk mengelola alur kerja penerapan di seluruh masa pakai perangkat lunak proyek.

Hanya dengan beberapa langkah sederhana, Anda dapat menyiapkan alur kerja penerapan untuk mengotomatiskan proses. Ini termasuk melacak perubahan baru ke cabang dan mencatat setiap kesalahan. Baca terus untuk mengetahui cara menerapkan aplikasi React di layanan hosting Firebase.

Apa Itu Saluran CI/CD?

Pipeline CI/CD (Integrasi Berkelanjutan/Pengiriman Berkelanjutan) adalah serangkaian proses otomatis yang diterapkan untuk memungkinkan pembuatan, pengujian, dan penerapan aplikasi secara berkelanjutan.

Sederhananya, pipeline CI/CD disiapkan untuk mengotomatiskan proses yang terlibat dalam siklus hidup pengembangan perangkat lunak. Ini akan mencakup pengembangan aktual, pengujian, rilis (beta, alfa, dan rilis final), perbaikan bug, dan bahkan pembaruan fitur. Pada dasarnya, proses ini memungkinkan pengiriman perangkat lunak berkualitas dengan mudah dan cepat.

instagram viewer

Pipeline CI/CD biasanya mencakup beberapa tahap, termasuk:

  1. Tahap sumber: Tahap ini mencakup pengembangan aktual dan pemeliharaan kode aplikasi dengan alat kontrol versi seperti Git.
  2. Build Stage: Langkah ini mengumpulkan kode sumber dengan semua dependensinya ke dalam format yang dapat dieksekusi.
  3. Tahap pengujian: Tahap ini menggabungkan pengujian otomatis untuk memvalidasi kualitas perangkat lunak. Tujuan akhirnya adalah untuk mendeteksi dan memperbaiki bug apa pun. Anda dapat melakukan berbagai jenis pengujian dalam tahap ini dan setelah kode lulus pengujian, kode siap diterapkan.
  4. Penerapan: Tahap ini mengotomatiskan proses penerapan di lingkungan produksi.

Pipeline harus memantau setiap tahap untuk memastikan bahwa tidak ada bug dan untuk meningkatkan seluruh proses untuk rilis mendatang.

Apa Itu Tindakan GitHub?

GitHub Actions adalah fitur yang disediakan oleh GitHub untuk mengotomatiskan proses alur kerja penerapan perangkat lunak dalam pipeline CI/CD. Itu memungkinkan untuk menentukan dan mengotomatiskan alur kerja penerapan langsung dari repositori GitHub proyek Anda.

Tindakan GitHub memiliki beberapa manfaat:

  1. Mudah digunakan: Tindakan GitHub menyediakan antarmuka yang ramah pengguna dan sintaksis sederhana untuk menyiapkan alur kerja penerapan. Anda dapat dengan mudah dan cepat menentukan alur kerja proyek Anda menggunakan editor bawaan di GitHub.
  2. Integrasi Asli: GitHub Actions adalah bagian dari GitHub, memudahkan untuk menyiapkan, mengelola, dan berkolaborasi dalam alur kerja bersama kode proyek Anda.
  3. Fleksibel dan dapat disesuaikan: Tindakan GitHub menyediakan platform yang fleksibel dan dapat disesuaikan yang memastikan bahwa Anda dapat membuat alur kerja yang sesuai dengan kebutuhan spesifik Anda. Selain itu, ini mendukung banyak bahasa pemrograman. Artinya, Anda dapat menggunakannya dengan teknologi apa pun yang Anda sukai.

Siapkan Proyek Firebase dan React Client

Untuk memulai, pergilah ke Firebase dan masuk dengan akun Google Anda. Di halaman ikhtisar konsol, klik Buat Proyek untuk menyiapkan proyek baru dan memberikan nama proyek.

Berikutnya, membuat aplikasi Bereaksi dan instal alat baris perintah Firebase:

npm install -g firebase-tools

Anda dapat menemukan kode proyek ini di dalamnya repositori GitHub.

Masuk ke Firebase dari terminal Anda menggunakan kredensial akun Firebase Anda.

login firebase: ci

Ini akan memicu alur autentikasi Firebase yang akan meminta Anda memasukkan detail login jika Anda belum login. Setelah Firebase mengautentikasi Anda, itu akan mencetak token. Salin token ini; Anda akan menggunakannya untuk menjalankan perintah Firebase di pengaturan Tindakan GitHub Anda.

Terakhir, buat versi siap produksi dari aplikasi Anda:

npm jalankan build

Perintah ini menghasilkan file dan aset yang diperlukan, di dalam folder 'build' baru di direktori root, yang diperlukan untuk menerapkan aplikasi.

Inisialisasi Firebase di Aplikasi React Anda

Jalankan perintah ini untuk menginisialisasi Firebase di folder proyek Anda:

firebase init

Selanjutnya, konfirmasikan bahwa Anda ingin menginisialisasi Firebase di proyek Anda dan lanjutkan dan pilih Hosting: Konfigurasikan file untuk Firebase Hosting dan (opsional) siapkan penerapan GitHub Actiondari daftar pilihan.

Tentukan bahwa Anda ingin menggunakan proyek yang sudah ada dan pilih nama proyek yang awalnya Anda buat di konsol pengembang Firebase.

Selanjutnya, tentukan folder 'build' sebagai publik direktori, pilih TIDAK untuk menulis ulang semua opsi URL ke /index.html, pilih TIDAK ke opsi menyiapkan build dan penerapan otomatis dari GitHub, dan terakhir, Pilih Ya untuk menimpa opsi file build/index.html.

Setelah melakukan perubahan di atas, CLI akan membuat file firebase.json di direktori root. File ini berisi semua konfigurasi hosting yang diperlukan oleh alur kerja GitHub Actions.

Terakhir, sebelum menyiapkan alur kerja GitHub Actions, buat repositori di GitHub, dan Dorong file proyek ke sana.

Menyiapkan Tindakan GitHub

Di repositori proyek Anda di GitHub, pilih Pengaturan > Rahasia dan Variabel > Tindakan. Di halaman rahasia repositori, masukkan FIREBASE_TOKEN sebagai nama rahasianya, dan rekatkan di token Firebase yang Anda salin di Rahasia bidang.

Siapkan Alur Kerja Penerapan

Klik tab Tindakan di repositori proyek Anda, dan pilih Konfigurasikan Nodejs alur kerja di Integrasi Berkelanjutan bagian.

Selanjutnya, ganti nama file menjadi firebase.yml, hapus kode boilerplate pada editor, dan tambahkan kode di bawah ini:

# Alur kerja ini akan melakukan instalasi yang bersih dari dependensi node,
# cache/kembalikan, bangun sumber kode dan menjalankan tes di berbagai
# versi simpul
# Untuk informasi lebih lanjut lihat:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nama: Firebase CI


pada:
 dorongan:
 cabang: [ utama ]
 pull_request:
 cabang: [utama]


pekerjaan:
 membangun:


 berjalan: ubuntu-terbaru


 strategi:
 matriks:
 versi simpul: [14.x]

 Langkah:
 - menggunakan: tindakan/checkout@v2
 - nama: Gunakan Node.js ${{ matrix.node-version }}
 menggunakan: tindakan/setup-node@v1
 dengan:
 versi simpul: ${{ matrix.node-versi }}
 - jalankan: npm install -g npm
 - nama: npm instal, bangun dan uji
 lari: |
 instal npm
 npm jalankan build
 - nama: Pembuatan Arsip
 menggunakan: tindakan/upload-artefak@v2
 dengan:
 nama: membangun
 jalur: membangun

 menyebarkan:
 nama: Menyebarkan
 kebutuhan: membangun
 berjalan: ubuntu-terbaru
 Langkah:
 - menggunakan: tindakan/checkout@v2
 - nama: Unduh Build
 menggunakan: tindakan/unduh-artefak@v2
 dengan:
 nama: membangun
 jalur: membangun
 - nama: Terapkan ke Firebase
 menggunakan: w9jds/firebase-action@master
 dengan:
 args: gunakan --hanya hosting
 env:
 FIREBASE_TOKEN: ${{ rahasia. FIREBASE_TOKEN }}

Berikut adalah beberapa properti utama yang dijelaskan:

  1. Pada: Peristiwa yang memicu tindakan dalam alur kerja ini.
  2. Pekerjaan: Menentukan pekerjaan yang harus dijalankan oleh Tindakan tertentu. Dalam hal ini, ada dua pekerjaan: build dan deploy.
  3. Berjalan: mesin tempat tindakan ini harus dijalankan.
  4. Langkah: Menentukan urutan langkah-langkah yang akan dilakukan Tindakan untuk pekerjaan tertentu.
  5. Dengan:Menentukan argumen apa pun yang diperlukan oleh Tindakan untuk dijalankan.
  6. Nama: Nama langkah tertentu untuk pekerjaan.

Terakhir, komit perubahan yang dilakukan pada file ini. GitHub akan secara otomatis memicu alur kerja ini, membangun dan menerapkan aplikasi React di layanan Hosting Firebase. Anda dapat memeriksa URL langsung aplikasi di log penerapan.

Men-deploy Aplikasi Menggunakan Tindakan GitHub

Tindakan GitHub menyediakan pendekatan penerapan yang disederhanakan. Ini memastikan Anda dapat menerapkan aplikasi secara konsisten dan andal, terlepas dari teknologi yang Anda buat.

Selain itu, Anda dapat dengan mudah menyesuaikan alur kerja penerapan dengan menggunakan alat penerapan bawaan untuk memenuhi kebutuhan saluran CI/CD spesifik Anda.