Zahmetli ayrıntılarla ilgilenen bir CI/CD ardışık düzeniyle üretim ve dağıtım sıkıntılarınızı azaltın.

Web uygulamalarını Firebase Hosting'e dağıtmak bir güçlük olabilir. Ancak GitHub eylemlerini kullanarak dağıtım sürecini basitleştirebilir ve kolaylaştırabilir ve bir yazılımın tüm ömrü boyunca dağıtım iş akışlarını yönetmek inanılmaz derecede kolay proje.

Yalnızca birkaç basit adımda, süreci otomatikleştirmek için bir dağıtım iş akışı oluşturabilirsiniz. Bu, dallardaki yeni değişikliklerin izlenmesini ve hataların günlüğe kaydedilmesini içerir. Bir React uygulamasının Firebase'in barındırma hizmetinde nasıl devreye alınacağını öğrenmek için okumaya devam edin.

CI/CD İşlem Hattı Nedir?

Bir CI/CD (Sürekli Entegrasyon/Sürekli Teslimat) işlem hattı, uygulamaları sürekli olarak oluşturmayı, test etmeyi ve dağıtmayı mümkün kılmak için uygulanan bir dizi otomatikleştirilmiş işlemdir.

Basitçe söylemek gerekirse, yazılım geliştirme yaşam döngüsünde yer alan süreçleri otomatikleştirmek için bir CI/CD işlem hattı kurulur. Buna gerçek geliştirme, test etme, sürümler (beta, alfa ve son sürüm), hata düzeltmeleri ve hatta özellik güncellemeleri dahildir. Temel olarak, bu süreç, kaliteli yazılımın kolay ve hızlı bir şekilde gönderilmesini mümkün kılar.

instagram viewer

Bir CI/CD boru hattı tipik olarak birkaç aşamayı kapsar, buna şunlar dahildir:

  1. Kaynak aşaması: Bu aşama, uygulama kodunun Git gibi bir sürüm kontrol aracıyla fiili olarak geliştirilmesini ve bakımını kapsar.
  2. Derleme Aşaması: Bu adım, kaynak kodunu tüm bağımlılıklarıyla birlikte yürütülebilir bir biçimde birleştirir.
  3. Test aşaması: Bu aşama, yazılımın kalitesini doğrulamak için otomatik testler içerir. Nihai hedef, herhangi bir hatayı tespit etmek ve düzeltmektir. Bu aşamada farklı testler yapabilirsiniz ve kod testleri geçtikten sonra konuşlandırmaya hazırdır.
  4. Dağıtım: Bu aşama, üretim ortamında dağıtım sürecini otomatikleştirir.

Boru hattı, herhangi bir hata olmadığından emin olmak ve gelecekteki sürümler için tüm süreci iyileştirmek için her aşamayı izlemelidir.

GitHub İşlemleri Nedir?

GitHub Eylemleri, bir yazılımın CI/CD ardışık düzenlerindeki dağıtım iş akışı süreçlerini otomatikleştirmek için GitHub tarafından sağlanan bir özelliktir. Dağıtım iş akışlarını doğrudan projenizin GitHub deposundan tanımlamayı ve otomatikleştirmeyi mümkün kılar.

GitHub Actions'ın çeşitli avantajları vardır:

  1. Kullanımı kolay: GitHub Actions, dağıtım iş akışlarını ayarlamak için kullanıcı dostu bir arayüz ve basit bir sözdizimi sağlar. GitHub'daki yerleşik düzenleyiciyi kullanarak proje iş akışlarınızı kolay ve hızlı bir şekilde tanımlayabilirsiniz.
  2. Yerel Entegrasyon: GitHub Actions, GitHub'ın bir parçasıdır ve projenizin kodunun yanı sıra iş akışlarını kurmayı, yönetmeyi ve iş akışları üzerinde işbirliği yapmayı kolaylaştırır.
  3. Esnek ve özelleştirilebilir: GitHub Actions, özel ihtiyaçlarınıza uygun iş akışları oluşturabilmenizi sağlayan esnek ve özelleştirilebilir bir platform sağlar. Ayrıca, birden fazla programlama dilini destekler. Yani, tercih ettiğiniz teknoloji ile kullanabilirsiniz.

Bir Firebase Projesi ve React İstemcisi Kurun

Başlamak için şuraya gidin: Firebase ve Google hesabınızla oturum açın. Konsola genel bakış sayfasında, Proje Oluştur yeni bir proje kurmak ve projenin adını sağlamak.

Sonraki, bir React uygulaması oluştur ve Firebase komut satırı araçlarını kurun:

npm install -g firebase araçları

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub deposu.

Firebase hesabı kimlik bilgilerinizi kullanarak terminalinizden Firebase'de oturum açın.

Firebase girişi: ci

Bu, henüz oturum açmadıysanız oturum açma ayrıntılarınızı girmenizi isteyen Firebase kimlik doğrulama akışını tetikleyecektir. Firebase kimliğinizi doğruladıktan sonra bir belirteç yazdırır. Bu belirteci kopyalayın; GitHub Actions kurulumunuzda Firebase komutlarını çalıştırmak için kullanacaksınız.

Son olarak, uygulamanızın üretime hazır bir sürümünü oluşturun:

npm derlemeyi çalıştır

Bu komut, uygulamayı dağıtmak için gerekli olan kök dizinde yeni bir 'build' klasörü içinde gerekli dosyaları ve varlıkları oluşturur.

Firebase'i React Uygulamanızda Başlatın

Firebase'i proje klasörünüzde başlatmak için bu komutu çalıştırın:

ateş üssü başlangıcı

Ardından, projenizde Firebase'i başlatmak istediğinizi onaylayın ve devam edin ve Barındırma: Firebase Barındırma için dosyaları yapılandırın ve (isteğe bağlı olarak) GitHub Action dağıtımlarını kurunseçenekler listesinden.

Mevcut bir projeyi kullanmak istediğinizi belirtin ve Firebase'in geliştirici konsolunda başlangıçta oluşturduğunuz proje adını seçin.

Ardından, 'build' klasörünü şu şekilde belirtin: halk dizin, seç HAYIR tüm URL'leri /index.html seçeneğine yeniden yazmak için seçin HAYIR GitHub'dan otomatik derlemeler ve dağıtımlar kurma seçeneğine ve son olarak Seç Evet build/index.html dosya seçeneğinin üzerine yazmak için.

Yukarıdaki değişiklikleri yaptıktan sonra CLI, kök dizinde bir firebase.json dosyası oluşturacaktır. Bu dosya, GitHub Actions iş akışının gerektireceği tüm barındırma yapılandırmasını içerir.

Son olarak, GitHub Actions iş akışını kurmadan önce, GitHub'da bir depo oluşturun, ve proje dosyalarını ona itin.

GitHub İşlemlerini Ayarlama

Projenizin GitHub'daki deposunda, Ayarlar > Sırlar ve Değişkenler > Hareketler. Deponun gizli sayfasında şunu girin: FIREBASE_TOKEN sırrın adı olarak girin ve kopyaladığınız Firebase belirtecine yapıştırın. Sırlar alanlar.

Dağıtım İş Akışını Ayarlama

Projenizin deposundaki Eylemler sekmesine tıklayın ve seçin Nodej'leri Yapılandır iş akışı Sürekli Entegrasyon bölüm.

Ardından, dosya adını şu şekilde yeniden adlandırın: firebase.yml, editördeki standart kodu silin ve aşağıdaki kodu ekleyin:

# Bu iş akışı, düğüm bağımlılıklarının temiz bir kurulumunu gerçekleştirecek,
# önbelleğe alın/geri yükleyin, kaynak kodlayın ve farklı testlerde çalıştırın
# düğüm sürümleri
# Daha fazla bilgi için bakınız:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
ad: Firebase CI


Açık:
 itmek:
 şubeler: [ ana ]
 çekme_isteği:
 şubeler: [ ana]


Meslekler:
 inşa etmek:


 çalışan: ubuntu-en son


 strateji:
 matris:
 düğüm sürümü: [14.x]

 adımlar:
 - kullanımlar: action/checkout@v2
 - ad: Node.js ${{ matrix.node-version }} kullanın
 kullanımlar: action/setup-node@v1
 ile:
 düğüm sürümü: ${{ matrix.node-version }}
 - çalıştır: npm kurulum -g npm
 - ad: npm kur, oluştur ve test et
 çalıştır: |
 npm kurulum
 npm derlemeyi çalıştır
 - ad: Arşiv Yapısı
 kullanımlar: action/upload-artifact@v2
 ile:
 isim: yapı
 yol: inşa et

 dağıtmak:
 ad: dağıt
 ihtiyaçlar: inşa etmek
 çalışan: ubuntu-en son
 adımlar:
 - kullanımlar: action/checkout@v2
 - ad: Derlemeyi İndir
 kullanımlar: action/download-artifact@v2
 ile:
 isim: yapı
 yol: inşa et
 - ad: Firebase'e dağıtın
 kullanım alanları: w9jds/firebase-action@master
 ile:
 args: dağıt --only barındırma
 ortam:
 FIREBASE_TOKEN: ${{ sırlar. FIREBASE_TOKEN }}

İşte açıklanan temel özelliklerden bazıları:

  1. Açık: Bu iş akışındaki eylemleri tetikleyen olaylar.
  2. Meslekler: Belirli bir Eylemin çalıştırması gereken işleri belirtir. Bu durumda, iki iş vardır: inşa et ve konuşlandır.
  3. devam eden: bu eylemin çalıştırılacağı makine.
  4. Adımlar: Eylemin belirli bir iş için gerçekleştirmesi için bir dizi adım tanımlar.
  5. İle: Çalıştırmak için Eylemler tarafından gerekli olan herhangi bir bağımsız değişkeni belirtir.
  6. İsim: Bir iş için belirli bir adımın adı.

Son olarak, bu dosyada yapılan değişiklikleri taahhüt edin. GitHub, React uygulamasını Firebase'in Barındırma hizmetinde oluşturup dağıtarak bu iş akışını otomatik olarak tetikleyecektir. Dağıtım günlüklerinde uygulamanın canlı URL'sini kontrol edebilirsiniz.

GitHub Eylemlerini Kullanarak Uygulamaları Dağıtma

GitHub Actions, kolaylaştırılmış bir dağıtım yaklaşımı sağlar. Oluşturduğunuz teknolojiden bağımsız olarak uygulamaları tutarlı ve güvenilir bir şekilde dağıtabilmenizi sağlar.

Ayrıca, özel CI/CD işlem hattı ihtiyaçlarınızı karşılamak için yerleşik dağıtım araçlarını kullanarak dağıtım iş akışını kolayca özelleştirebilirsiniz.