Angular, Travis CI ve Firebase Hosting ile Sürekli Dağıtım

Angular, Travis CI ve Firebase Hosting ile Sürekli Dağıtım

Sürekli Dağıtım (Continuous Deployment – CD), modern yazılım geliştirme süreçlerinin vazgeçilmez bir parçası haline gelmiştir. Bu yaklaşım, kod değişikliklerinin otomatik olarak test edilmesini, derlenmesini ve üretim ortamına dağıtılmasını sağlayarak, geliştirme ekiplerinin daha hızlı, daha güvenilir ve daha verimli çalışmasına olanak tanır. Özellikle web uygulamaları söz konusu olduğunda, kullanıcıların sürekli güncel ve hatasız bir deneyim yaşaması büyük önem taşır. Bu makalede, popüler ön uç çerçevesi Angular’ı, güçlü sürekli entegrasyon/sürekli dağıtım (CI/CD) hizmeti Travis CI’ı ve hızlı, güvenilir hosting çözümü Firebase Hosting’i bir araya getirerek nasıl uçtan uca bir sürekli dağıtım hattı oluşturulacağını ayrıntılı bir şekilde inceleyeceğiz.

Sürekli Dağıtım Nedir ve Neden Önemlidir?

Sürekli Dağıtım, Sürekli Entegrasyon (Continuous Integration – CI) ve Sürekli Teslimat (Continuous Delivery – CD) kavramlarının bir uzantısıdır. CI, geliştiricilerin kodlarını sık sık ana depoya birleştirmesini ve her bir birleştirme işleminde otomatik testlerin çalıştırılmasını içerir. CD ise, bu birleştirilen ve test edilen kodun, herhangi bir insan müdahalesi olmadan üretim ortamına otomatik olarak dağıtılmaya hazır hale getirilmesini sağlar. Sürekli Dağıtım ise, bu “dağıtıma hazır” kodun otomatik olarak üretim ortamına gönderilmesi sürecidir.

Sürekli Dağıtımın temel faydaları şunlardır:

* Hız ve Verimlilik: Geliştiriciler, kodlarını tamamladıklarında manuel dağıtım süreçleriyle uğraşmak yerine doğrudan yeni özellikler geliştirmeye veya hataları düzeltmeye odaklanabilirler. Dağıtım süreci otomatiktir ve dakikalar içinde tamamlanır.
* Hata Azaltma: Manuel dağıtım süreçleri insan hatasına açıktır. Otomatikleştirilmiş bir süreç, bu tür hataları ortadan kaldırır ve dağıtımın her zaman tutarlı bir şekilde yapılmasını sağlar.
* Daha Hızlı Geri Bildirim Döngüsü: Yeni özellikler veya düzeltmeler hızla kullanıcılara ulaştırılabildiğinden, geri bildirim döngüsü kısalır. Bu, ürünün daha hızlı adapte olmasına ve kullanıcı ihtiyaçlarına daha iyi yanıt vermesine olanak tanır.
* Daha Yüksek Güven: Otomatik testler ve dağıtım süreçleri sayesinde, geliştiriciler ve paydaşlar, üretim ortamına giden kodun kalitesine ve kararlılığına daha fazla güvenirler.
* Azaltılmış Risk: Küçük, sık yapılan dağıtımlar, büyük ve nadir yapılan dağıtımlara göre daha az risk taşır. Bir sorun ortaya çıktığında, sorunun kaynağını bulmak ve düzeltmek daha kolaydır.

Bu faydalar göz önüne alındığında, modern web uygulamaları için sürekli dağıtımın benimsenmesi kaçınılmazdır. Angular gibi dinamik ön uç uygulamaları, hızlı iterasyon ve dağıtım gerektirdiğinden, bu süreçler için ideal bir adaydır.

Angular: Modern Web Uygulamalarının Temeli

Angular, Google tarafından geliştirilen açık kaynaklı, TypeScript tabanlı bir ön uç web uygulama çerçevesidir. Büyük ölçekli ve performans odaklı tek sayfa uygulamaları (Single Page Applications – SPA) geliştirmek için tasarlanmıştır. Bileşen tabanlı mimarisi, güçlü CLI (Command Line Interface) araçları, zengin ekosistemi ve güçlü tip güvenliği sağlayan TypeScript kullanımı sayesinde geliştiricilere verimli bir geliştirme deneyimi sunar.

Angular uygulamaları, geliştirme aşamasında birçok modül ve bağımlılık içerir. Ancak dağıtım için, bu uygulama ng build --prod komutu ile derlenir. Bu komut, uygulamayı optimize eder, kodları küçültür (minification), birleştirir (bundling) ve statik HTML, CSS ve JavaScript dosyalarından oluşan bir dist klasörü oluşturur. Sürekli dağıtım sürecinde, bu dist klasörünün üretim ortamına taşınması hedeflenir.

Travis CI: Bulut Tabanlı CI/CD Gücü

Travis CI, GitHub ile entegre çalışan, bulut tabanlı popüler bir sürekli entegrasyon ve sürekli dağıtım hizmetidir. Açık kaynak projeler için ücretsiz destek sunması ve kolay kurulumu sayesinde geniş bir geliştirici kitlesi tarafından tercih edilmektedir. Travis CI, bir GitHub deposundaki kod değişikliklerini izler ve her bir push veya pull request olayında otomatik olarak belirli görevleri (test etme, derleme, dağıtma) çalıştırır.

Travis CI’ın çalışma prensibi oldukça basittir:

1. GitHub Entegrasyonu: Travis CI hesabınızı GitHub hesabınızla bağlarsınız.
2. Depo İzleme: Belirlediğiniz GitHub depolarını Travis CI’ın izlemesi için etkinleştirirsiniz.
3. .travis.yml Dosyası: Projenizin kök dizininde bulunan .travis.yml adlı bir yapılandırma dosyası oluşturursunuz. Bu dosya, Travis CI’ın projenizi nasıl derlemesi, test etmesi ve dağıtması gerektiğini adım adım tanımlar.
4. Olay Tetikleme: GitHub’a yapılan her kod push’unda veya pull request’inde, Travis CI otomatik olarak tetiklenir.
5. Ortam Oluşturma: Travis CI, .travis.yml dosyasında belirtilen ayarlara göre (örneğin, Node.js sürümü) sanal bir ortam (build environment) oluşturur.
6. Adımları Yürütme: Bu ortamda, .travis.yml dosyasındaki install, script ve deploy gibi bölümlerde tanımlanan komutları sırasıyla çalıştırır.
7. Durum Bildirimi: Tüm adımlar tamamlandığında, Travis CI, build’in başarılı olup olmadığını GitHub’a geri bildirir. Başarılı ise dağıtım gerçekleşir, başarısız ise süreç durdurulur ve geliştiriciye bilgi verilir.

.travis.yml dosyası, Travis CI’ın beynidir. Bu dosyanın doğru yapılandırılması, sürekli dağıtım hattının sorunsuz çalışması için kritik öneme sahiptir.

Firebase Hosting: Hızlı ve Güvenilir Web Barındırma

Firebase, Google tarafından sunulan bir mobil ve web uygulama geliştirme platformudur. Gerçek zamanlı veritabanı, kimlik doğrulama, bulut işlevleri, depolama ve hosting gibi birçok hizmeti tek bir çatı altında sunar. Firebase Hosting, bu hizmetlerden biridir ve statik ve dinamik web uygulamaları için hızlı, güvenli ve global olarak ölçeklenebilir bir barındırma çözümü sunar.

Firebase Hosting’in temel özellikleri ve avantajları şunlardır:

* Küresel CDN (Content Delivery Network): Uygulamanızın dosyaları dünya genelindeki birçok sunucuda önbelleğe alınır. Bu sayede kullanıcılar, kendilerine en yakın sunucudan içeriği alır ve bu da yükleme sürelerini önemli ölçüde kısaltır.
* Ücretsiz SSL Sertifikası: Tüm barındırılan siteler otomatik olarak ücretsiz SSL sertifikaları ile gelir, bu da sitenizin güvenli ve HTTPS üzerinden erişilebilir olmasını sağlar.
* Özel Alan Adı Desteği: Kendi özel alan adlarınızı kolayca bağlayabilirsiniz.
* Tek Tıkla Dağıtım: firebase deploy komutu ile uygulamanızı saniyeler içinde dağıtabilirsiniz.
* Versiyonlama ve Geri Alma: Firebase Hosting, her dağıtımın bir versiyonunu tutar. Bu sayede, herhangi bir sorun oluştuğunda önceki bir versiyona kolayca geri dönebilirsiniz.
* Hızlı ve Güvenilir: Google’ın altyapısı üzerinde çalıştığı için yüksek performans ve güvenilirlik sunar.

Angular gibi derlenmiş statik dosyalar üreten SPA’lar için Firebase Hosting, mükemmel bir seçimdir. dist klasöründeki tüm dosyalar kolayca Firebase’e dağıtılabilir.

Angular, Travis CI ve Firebase Hosting Entegrasyon Adımları

Şimdi, bu üç teknolojiyi bir araya getirerek bir sürekli dağıtım hattı oluşturma adımlarını inceleyelim.

Adım 1: Angular Projesi Oluşturma

Öncelikle, yeni bir Angular projesi oluşturarak veya mevcut bir projeyi kullanarak başlayın. Eğer yeni bir proje oluşturuyorsanız, Angular CLI’ı global olarak yüklemeniz gerekir:

npm install -g @angular/cli
ng new my-angular-app --strict --routing=false
cd my-angular-app

Bu komutlar, my-angular-app adında yeni bir Angular projesi oluşturacak ve projenin dizinine geçecektir. Projenizin düzgün çalıştığından emin olmak için yerel olarak çalıştırabilirsiniz:

ng serve --open

Uygulamanız tarayıcınızda açılacaktır.

Adım 2: Git ve GitHub Entegrasyonu

Sürekli dağıtım hattının tetikleyicisi GitHub olacağı için, projenizi bir Git deposuna eklemeniz ve GitHub’a yüklemeniz gerekir.

git init
git add .
git commit -m "Initial Angular project setup"
git branch -M main
git remote add origin https://github.com/your-username/my-angular-app.git # Kendi GitHub depo URL'nizi kullanın
git push -u origin main

Projeniz artık GitHub’da yayınlanmış olmalıdır.

Adım 3: Firebase Projesi Oluşturma ve Hosting Ayarları

Firebase Console’a (console.firebase.google.com) gidin ve yeni bir proje oluşturun. Projenize anlamlı bir ad verin (örneğin, my-angular-app-cd).

Proje oluşturulduktan sonra, yerel makinenizde Firebase CLI’ı yüklemeniz gerekir:

npm install -g firebase-tools

Daha sonra, Firebase hesabınıza giriş yapın:

firebase login

Bu komut, tarayıcınızı açacak ve Firebase hesabınızda oturum açmanızı isteyecektir. Başarılı bir şekilde giriş yaptıktan sonra, projenizin kök dizininde Firebase’i başlatın:

firebase init

Bu komut size birkaç soru soracaktır:

1. Which Firebase features do you want to set up for this directory? Hosting seçeneğini seçin (boşluk tuşu ile seçip Enter ile devam edin).
2. Please select a Firebase project for this directory: Daha önce oluşturduğunuz Firebase projenizi seçin.
3. What do you want to use as your public directory? Angular uygulamaları ng build --prod komutu ile derlendiğinde dist/ dizinine çıktı verir. Bu nedenle, dist/my-angular-app (veya projenizin adını) olarak ayarlayın.
4. Configure as a single-page app (rewrite all URLs to /index.html)? Yes (y) seçeneğini seçin. Bu, Angular’ın istemci tarafı yönlendirmesinin düzgün çalışmasını sağlar.
5. Set up automatic builds and deploys with GitHub? No (n) seçeneğini seçin, çünkü bu makalede Travis CI’ı kullanacağız.

firebase init komutu, projenizin kök dizininde firebase.json ve .firebaserc dosyalarını oluşturacaktır. firebase.json dosyanız yaklaşık olarak şöyle görünmelidir:

{
  "hosting": {
    "public": "dist/my-angular-app",
    "ignore": [
      "firebase.json",
      "/.*",
      "/node_modules/"
    ],
    "rewrites": [
      {
        "source": "",
        "destination": "/index.html"
      }
    ]
  }
}

Uygulamanızı manuel olarak dağıtarak her şeyin yolunda olduğundan emin olabilirsiniz:

ng build --prod
firebase deploy --only hosting

Uygulamanız bir Firebase Hosting URL’sinde yayınlanacaktır.

Adım 4: Travis CI Hesap Kurulumu ve GitHub Bağlantısı

Travis CI web sitesine (travis-ci.com) gidin ve GitHub hesabınızla giriş yapın. Giriş yaptıktan sonra, Travis CI’ın GitHub depolarınıza erişim izni vermeniz gerekebilir. Ayarlar bölümünde (Settings), depolarınızı senkronize edin. Ardından, sürekli dağıtım yapmak istediğiniz GitHub deponuzu (örneğin, my-angular-app) bulun ve yanındaki anahtarı açarak Travis CI’ın bu depoyu izlemesini sağlayın.

Adım 5: .travis.yml Dosyasını Yapılandırma

Projenizin kök dizininde .travis.yml adında yeni bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

language: node_js
node_js:
  - "16" # Kullanmak istediğiniz Node.js sürümünü belirtin (Angular projenizin gereksinimlerine göre)

cache: npm # npm paketlerini önbelleğe alarak build sürelerini hızlandırır

install:
  - npm install # Proje bağımlılıklarını yükle

script:
  - npm run lint # İsteğe bağlı: Kod kalitesi kontrolü
  - npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI # İsteğe bağlı: Testleri çalıştır
  - ng build --prod # Angular uygulamasını üretim için derle

deploy:
  provider: firebase
  token: $FIREBASE_TOKEN # Travis CI ortam değişkeni olarak saklanan Firebase token'ı
  project: my-angular-app-cd # Firebase proje ID'niz
  skip_cleanup: true # Build sonrası dist klasörünü silmeyi engelle
  on:
    branch: main # Sadece 'main' dalına yapılan push'larda dağıtım yap

Bu dosyadaki her bir bölümü açıklayalım:

* language: node_js: Projenin Node.js tabanlı olduğunu belirtir.
* node_js: - "16": Build ortamında kullanılacak Node.js sürümünü belirtir. Angular projenizin gerektirdiği sürümü kullandığınızdan emin olun.
* cache: npm: node_modules dizinini Travis CI’ın önbelleğine alır. Bu, sonraki build’lerde npm install süresini önemli ölçüde hızlandırır.
* install: Dağıtım öncesinde çalıştırılacak kurulum komutlarını içerir. Burada npm install ile projenin bağımlılıkları yüklenir.
* script: Uygulamanın test edilmesi ve derlenmesi gibi ana adımları içerir.
* npm run lint ve npm test: İsteğe bağlıdır ancak CI/CD sürecinin önemli bir parçasıdır. Kod kalitesini ve işlevselliğini garanti altına alır. ChromeHeadlessCI ile başsız tarayıcıda testleri çalıştırırız.
* ng build --prod: Angular uygulamasını üretim ortamı için derler. Bu komut, dist/my-angular-app klasörünü oluşturur.
* deploy: Sürekli dağıtımın asıl sihrinin gerçekleştiği bölümdür.
* provider: firebase: Dağıtımın Firebase Hosting’e yapılacağını belirtir.
* token: $FIREBASE_TOKEN: Bu, Firebase’e dağıtım yapmak için gerekli olan kimlik doğrulama token’ıdır. Bu token’ı doğrudan .travis.yml dosyasına yazmamalısınız. Güvenlik nedeniyle, bu bir Travis CI ortam değişkeni olarak saklanmalıdır. Daha sonra nasıl ayarlanacağını açıklayacağız.
* project: my-angular-app-cd: Firebase projenizin ID’sidir. Firebase Console’da projenizin ayarlarında bulabilirsiniz.
* skip_cleanup: true: Travis CI varsayılan olarak script aşamasından sonra tüm build dizinini temizler. Ancak Angular’ın dist klasörüne ihtiyacımız olduğu için bu ayarı true yapmalıyız. Aksi takdirde, dist klasörü silinecek ve Firebase’e dağıtılacak bir şey kalmayacaktır.
* on: branch: main: Dağıtımın yalnızca main dalına yapılan push işlemlerinde tetiklenmesini sağlar. Bu, geliştirme dallarındaki değişikliklerin üretim ortamına gitmesini engeller.

Adım 6: Ortam Değişkenleri ve Güvenlik (Firebase Token)

Firebase’e otomatik olarak dağıtım yapmak için bir kimlik doğrulama token’ına ihtiyacımız var. Bu token’ı elde etmek için yerel makinenizde aşağıdaki komutu çalıştırın:

firebase login:ci

Bu komut, tarayıcınızı açacak ve Firebase hesabınızda oturum açmanızı isteyecektir. Başarılı bir şekilde giriş yaptıktan sonra, terminalinizde uzun bir alfanümerik dize olan bir “refresh token” görüntüleyecektir. Bu token’ı asla GitHub deponuza veya .travis.yml dosyanıza doğrudan eklemeyin. Bu token, Firebase hesabınıza tam erişim sağlar ve güvenliği ihlal edilirse ciddi riskler oluşturabilir.

Bu token’ı güvenli bir şekilde Travis CI ortam değişkeni olarak saklamalıyız:

1. Travis CI web sitesinde, deponuzun ayarlarına (Settings) gidin.
2. “Environment Variables” bölümünü bulun.
3. “Name” alanına FIREBASE_TOKEN yazın.
4. “Value” alanına firebase login:ci komutuyla aldığınız token’ı yapıştırın.
5. “Add” düğmesine tıklayın.
6. Önemli: “Display value in build log” seçeneğinin işaretli olmadığından emin olun. Bu, token’ın build log’larında görünmesini engeller.

Artık .travis.yml dosyasındaki $FIREBASE_TOKEN değişkeni, Travis CI tarafından bu güvenli ortam değişkeninin değeriyle değiştirilecektir.

Adım 7: Sürekli Dağıtımın Tetiklenmesi

Tüm yapılandırmaları tamamladıktan sonra, .travis.yml dosyasını ve varsa diğer değişiklikleri GitHub deponuza push edin:

git add .travis.yml
git commit -m "Add Travis CI configuration for Firebase deployment"
git push origin main

Bu push işlemi, Travis CI’ı tetikleyecektir. Travis CI web sitesinde deponuzun build geçmişini kontrol edebilirsiniz. Birkaç dakika içinde:

1. Travis CI, yeni bir build başlatacak.
2. Node.js ortamını kuracak.
3. npm install ile bağımlılıkları yükleyecek.
4. ng build --prod ile Angular uygulamasını derleyecek.
5. deploy aşamasında, FIREBASE_TOKEN ortam değişkenini kullanarak Firebase’e bağlanacak ve dist/my-angular-app klasöründeki statik dosyaları Firebase Hosting’e dağıtacaktır.

Build başarılı olduğunda, Firebase Hosting URL’nize giderek uygulamanızın güncellendiğini görebilirsiniz. Artık main dalına her kod push’unda uygulamanız otomatik olarak dağıtılacaktır!

Sürekli Dağıtımın Avantajları ve Faydaları

Bu entegrasyonu kurmakla elde edeceğiniz başlıca avantajlar şunlardır:

* Otomatik Güncellemeler: Geliştiriciler, kodlarını main dalına birleştirdiklerinde, uygulamanın otomatik olarak güncellendiğini bilirler. Manuel dağıtım süreçleriyle zaman kaybetmezler.
* Tutarlı Dağıtımlar: Her dağıtım aynı otomatik süreçten geçer, bu da insan hatasını ortadan kaldırır ve dağıtım tutarlılığını artırır.
* Hızlandırılmış Geliştirme Döngüsü: Yeni özellikler ve hata düzeltmeleri çok daha hızlı bir şekilde kullanıcılara ulaşır, bu da ürünün pazar hızını artırır.
* Geliştirici Odaklılık: Geliştiriciler, altyapı veya dağıtım süreçleriyle uğraşmak yerine temel işlevsellik geliştirmeye odaklanabilirler.
* Güvenilirlik: Otomatik testler ve dağıtım adımları, üretim ortamına giden kodun kalitesini ve kararlılığını artırır.

Potansiyel Zorluklar ve Çözümler

Sürekli dağıtımın birçok faydası olsa da, dikkat edilmesi gereken bazı potansiyel zorluklar ve bunların çözümleri vardır:

* Test Kapsamı: CI/CD hattının etkinliği, testlerinizin kalitesine ve kapsamına bağlıdır. Yetersiz testler, otomatik dağıtımın hatalı kodları üretim ortamına göndermesine neden olabilir. Çözüm: Kapsamlı birim, entegrasyon ve uçtan uca testler yazmaya yatırım yapın.
* Ortam Farklılıkları: Geliştirme, test ve üretim ortamları arasında farklılıklar olabilir. Bu farklılıklar, beklenmedik hatalara yol açabilir. Çözüm: Tüm ortamların mümkün olduğunca benzer olmasını sağlamaya çalışın. Ortam değişkenlerini kullanarak yapılandırma farklılıklarını yönetin.
* Rollback Stratejileri: Otomatik dağıtımın her zaman başarılı olacağı garantisi yoktur. Bir sorun durumunda hızlıca önceki bir sürüme geri dönebilmek önemlidir. Çözüm: Firebase Hosting, dağıtım geçmişini tutar ve tek tıklamayla önceki bir sürüme geri dönmenizi sağlar. Bu özelliği kullanmayı planlarınıza dahil edin.
* Güvenlik: Ortam değişkenleri (örneğin, FIREBASE_TOKEN) gibi hassas bilgilerin güvenli bir şekilde yönetilmesi kritik öneme sahiptir. Çözüm: Bu makalede gösterildiği gibi, hassas bilgileri Travis CI’ın şifrelenmiş ortam değişkenleri olarak saklayın ve asla doğrudan kod deposuna eklemeyin.

Sonuç

Angular, Travis CI ve Firebase Hosting üçlüsü, modern web uygulamaları için güçlü, verimli ve güvenilir bir sürekli dağıtım hattı oluşturmak için mükemmel bir kombinasyondur. Bu makalede adım adım gösterilen entegrasyon süreci sayesinde, geliştiriciler kodlarını daha hızlı bir şekilde kullanıcılara ulaştırabilir, hata oranlarını düşürebilir ve genel geliştirme verimliliğini artırabilirler.

Sürekli dağıtım, sadece teknolojik bir kurulumdan ibaret değildir; aynı zamanda bir kültür ve geliştirme felsefesidir. Otomasyona yatırım yaparak, ekipler daha güvenle çalışabilir, daha sık yineleme yapabilir ve sonuç olarak daha iyi ürünler sunabilirler. Bu kurulum, küçük bir kişisel projeden büyük ölçekli kurumsal uygulamalara kadar her tür Angular projesi için uygulanabilir ve geliştirme süreçlerinizi bir sonraki seviyeye taşıyacaktır. Gelecekte, bu hattı daha da geliştirmek için bildirimler, gelişmiş test senaryoları ve farklı dağıtım stratejileri gibi özellikler eklenebilir.