Merhaba, bu yazıda popüler front-end Javascript framework’lerinden biri olan VueJS’in CI/CD süreçlerinin, Azure DevOps servisi üzerinde oluşturulmasından bahsedeceğim.

CI (Continuous Integration) / CD (Continuous Delivery & Deployment) olarak 2 bölüm halinde anlatıyor olacağım.

BÖLÜM 1: CI (Continuous Integration)

• İlk olarak Azure DevOps üzerinde projemizi açıp, Pipelines bölümüne gidelim.

• Daha sonra sağ üste yer alan New pipeline butonuna tıklayalım.

• Açılan pencerede Use the classic editor kısmını seçelim.

• Bu adımda kullanacağımız repo servisini seçiyoruz. Biz, Azure DevOps üzerinde yer alan Azure Repos Git servisini kullanacağız. Repo’yu ve branch’i seçip devam ediyoruz.

• Template kısmında Empty job’ı seçiyoruz.

• Pipeline bölümünde, projemizi build alırken kullanacağımız sunucuyu seçiyoruz. Biz Microsoft sunucularını kullanacağız. Private olarak açılan projelerde, aylık 1800dk ücretsiz kullanım sunduğunu dipnot olarak iletelim.

• Agent job 1 kısmında hiçbir düzenleme yapmadan + simgesine tıklıyoruz.

• Sağ üst kısımda yer alan search bölümüne npm yazıp, npm task’ını ekliyoruz.

• Bu adımda npm paket yöneticisini kuruyoruz.

• Oluşturduğumuz task’a sağ tıklayıp, duplicate ediyoruz.

• Projemizi build almak için, duplicate ettiğimiz task’da aşağıdaki gibi düzenleme yapıyoruz.

• Build işlemi tamamlandıktan sonra, /dist folder’ı altında dosyalar oluşacaktır. Bu dosyaları arşivlemek için, Archive files task’ını kullanacağız. Bu task ile /dist altındaki dosyaları, Build.zip adıyla sıkıştırıyor olacağız. Bunun için Agent job 1‘de yer alan + simgesine tıklayarak Archive files task’ını ekliyoruz.

• Son olarak, bir sonraki bölümde anlatacağım CD kısmında, Build.zip adlı dosyayı çekmek için drop adında bir Artifact yaratıyoruz. Artifact yaratmak için yine Agent job 1 kısmından + simgesine tıklayarak Publish build artifacts task’ını ekliyoruz.

• CI pipeline’nımızın son hali aşağıdaki gibi olmalıdır. Save & queue diyerek, oluşturduğumuz pipeline’nı kaydedip, çalıştırıyoruz.

• CI pipeline’nı başarıyla tamamlandığında alacağımız çıktı aşağıdaki gibi olmalıdır.

BÖLÜM 2: CD (Continuous Delivery & Deployment)

Bu kısımda, build aldığımız projenin CD sürecini gerçekleştiriyor olacağız. Build aldığımız dosyalar şuan Microsoft sunucusunda barındırılıyor. Bu sunucu ile, projeyi yayına alacağımız sunucu arasında bir bağlantı kurmamız gerekiyor ki, dosyalarımızı uzak sunucudan kendi sunucumuza aktarabilelim. Bunun için Deployment groups servisinden yararlanacağız.

• İlk olarak DeployTest adında bir Deployment groups oluşturuyoruz.

• Create butonuna bastıktan sonra oluşan scripti, kopyalama yapacağımız sunucuda çalıştırıp, kolay bir şekilde kurulumu tamamlıyoruz. Kurulum sonrası sunucumuzda bir agent çalışıyor olacak. Bu agent bir nevi Microsoft sunucusu ile kendi sunucumuz arasında tunnel oluşturuyor diyebiliriz.

• Şimdi CD pipeline’nını oluşturma kısmına gelelim. Pipelines bölümünden Releases kısmına geliyoruz.

• Daha sonra New release pipeline butonuna tıklıyoruz.

• Sağ tarafta çıkan bölümde Empty job kısmını seçiyoruz.

• Artifacts bölümünde, CI kısmında oluşturduğumuz drop adındaki Artifact’ı, CD kısmına bağlıyoruz.

• Stages bölümünde, build dosyalarımızı sunucuya atmak için gerekli düzenlemeleri yapıyor olacağız. Stage 1 bölümünde yer alan + simgesine tıklıyoruz.

• Daha sonrasında Agent job kısmını silip, yerine deployment group job kısmını ekliyoruz.

• Deployment group kısmında, daha önceden oluşturmuş olduğumuz DeployTest’i seçiyoruz.

• CD pipeline’nını sürekli olarak kullanacağımız için, ilk olarak daha önceden indirdiğimiz artifact’leri siliyoruz. Bunun için Deployment group job kısmında yer alan + simgesine tıklayarak Bash task’ı ekliyoruz.

• Tekrardan Deployment group job kısmında yer alan + simgesine tıklayarak, Download build artifacts task’ını ekliyoruz. Build version kısmından Latest seçip, en son oluşan build paketini indir diyoruz. Artifact name kısmından ise drop’u seçiyoruz.

• İndirdiğimiz drop artifact’i içinde yer alan Build.zip adlı dosyayı, unzip yapıyoruz. Bunun için bir adet Bash task’ı ekliyoruz.

• Bir adet Bash task’ı daha ekleyerek, unzip yaptığımız dosyaları, projemizin yayın yapacağı dizine kopyalıyoruz.

• CD pipeline’nımızın son hali aşağıdaki gibi olmalıdır. Daha sonrasında Save butonuna tıklayıp kaydediyoruz.

• Son olarak sağ üstte yer alan Create release butonuna tıklayarak CD pipeline’nımızı çalıştırıyoruz.

• CI/CD sürecini başarıyla gerçekleştirdik!

Bir sonraki yazıda görüşmek üzere…