by Baris Ceviz


Posted on Wednesday 26 July 2017


TFS Üzerinde ReactJS App için Continuous Integration ve Continuous Delivery Kurulumu

ReactJS App inizi TFS üzerinde CI (Continuous Integration) ve CD (Continuous Delivery) konfigürasyonlarını yaparak DevOps uygulamak

Selamlar,

Bir önceki yazımda ReactJS App i Azure Web App e Deploy Etmek konusundan bahsetmiştim. Burada herhangi bir team project olarak yer almıyordu. Azure üzerinde sunulmuş Local Git Repository üzerinde çalışıyordu. Bu yazımda ise bir Team Project halinde çalışılan ReactJS uygulamalarınızı Visual Studio Team Services üzerinden nasıl Build & Release alınabileceğini anlatıyor olacağım.

 Visual Studio Team Services hesabımıza girelim ve eğer herhangi bir proje oluşturmadıysak oluşturalım. İsterseniz Visual Studio Team Services ı CI icin kullanabilirsiniz. Kodlarınızı Github veya başka Git Repository ler üzerinden alabilirsiniz. Ben Git projesi üzerinden örneklerimi anlatıyor olacağım

Bu teknik yazı için ReactJSAppCI adında bir proje oluşturuyorum. Bunun üzerinden Build & Release alma işlemlerini gerçekleştireceğiz. Projemize girdikten sonra üst bölümde Build & Release bölümünden Builds e girelim

Ardından yeni bir Build Definition oluşturuyoruz. Burada yazdığımız kodun derleyecek Runtime ın ve yapacağımız adımların configuration larını yapacağız. ReactJS uygulaması üzerinde CI - CD uygulayacağımız için npm package manager üzerinde gerekli tasklerimiz olacaktır. New Definition a tıklayarak build definition oluşturalım.

Burada kodlarınızı derleyip deploy package haline getirecek işlemleri hazırlayacağız. Visual Studio Team Services bize hazır template ler sunuyor. Böylelikle daha hızlı bir şekilde Build Definition hazırlayabiliriz. Burada Search bölümüne NodeJS yazıyorum ve herhangi birisini seçiyorum. Eğer projenizde gulp veya grunt kullanıyorsanız sizin için ideal bir template olur. Bizim geliştirdiğimiz ReactJS App de sadece Webpack olduğu için bizim için ikiside fark etmez. Gulp veya grunt işlemlerini devre dışı bırakıp devam edeceğiz. Herneyse, burada listelenen templateler den birisini seçiyoruz ve Apply a basıyoruz.

Sol bölümde sıra sıra yapılacak taskler listeleniyor. Siz build aldığınız zaman adım adım bu işlemler gerçekleştirilecektir. Öncelikle ilk ayarlamamız gereken bu oluşturduğumuz build definition ın nerede çalışacağı ile ilgilidir. Visual Studio Team Services ile artık Linux üzerinde de build çalıştırabiliyorsunuz. Biz burada normal bir Windows Server Agent üzerinden çalıştırabiliriz. Hosted ı seçerek standart bir windows makinası üzerinde build çalıştırabiliriz.

Process sekmesinde yapmamız gerekenleri tamamladıktan sonra bir sonraki adıma geçelim. Buradaki taskleri tek tek inceleyerek ilerleyeceğiz. Bir sonraki task olan  Get sources a bakalım. Burada dediğim gibi istediğiniz Source Control ile çalışabilirsiniz. Dışardaki kodunuzun üzerinden de build oluşturabilirsiniz. Ben burada VS TS üzerinde açtığım bir Git projesi üzerinde çalışacağım.

Sıradaki task npm install Bu task de ise projemizdeki package.json a bakarak npm paketlerini kurma işlemi gerçekleştirilecektir Eğer git repository içerisinde birden fazla proje bulunuyorsa ve bunlar alt klasörlerde duruyorsa Working folder with package.json bölümünde dizini göstererek sadece orada npm install komutunun çalışmasını sağlayabilirsiniz Bunun dışında --force gibi parametreleri de dahil edebilirsiniz. ReactJS app imiz için bu tarz bir configuration gerekmediği için herhangi bir değişiklik yapmadan devam ediyorum.

Ve sıradaki çok önemli bir task imiz Run grunt task Bu task i kaldırıyoruz arkadaşlar :) Eğer grunt kullanıyorsanız ekleyebilirsiniz fakat oluşturduğumuz ReactJS app inde sadece webpack olduğu için kullanmamıza gerek yok. Bu yüzden task imize sağ tıklayıp Remove selected task(s) e tıklıyoruz ve kaldırıyoruz. Bizim npm install dan sonra asıl yapmamız gereken task npm run build olacaktır. Çünkü arka tarafta webpack i çalıştırarak bir build package oluşturacak ve bizim de bunu Azure veya bir başka yere deploy alacağız. Bu task i oluşturmak için npm install a sağ tıklayalım ve Clone Task(s) i seçelim. Ardından yeni oluşan task imizi düzenlemeye başlayalım

Öncelikle Display Name i değiştirip npm run build yazalım.  Command i install yerine custom olarak seçelim ve custom command olarak run build yazalım.  Artık build package almaya hazır bir task imiz var. Ek olarak benim yaşadığım durumlardan bir tanesinden bahsetmek isterim. Scode içerisinde geliştirdiğimiz birtakım iş kolaylaştıran tool larımızı ReactJS ile geliştiriyoruz ve bu tool larda array ler ile daha kolay çalışmak için LINQ kütüphanesi yazmıştım fakat bunu webpack derlerken hata alıyor ama herhangi bir sorun olmadan devam edebiliyor. Yani error oluştursa bile build package oluşturabiliyor ve herhangi bir sorun yaşamıyor. Bu tarz durumlarda Control Options bölümünde Continue on error seçeneğini tıklayarak hata alsa da devam etmesini sağlayabilirsiniz. Eğer böyle bir durum yaşarsanız bunu değerlendirmenizi tavsiye ederim.

En önemli tasklerden birisine geldik, Archive File Burası en önemli noktadır. Deploy package oluşturulacağı için Build Output u burada bulup bir zip haline getirmek gerekiyor. Bu tarz bir işlemin gerçekleştirilmesi için doğru configuration ların yapılması gerekir. ReactJS için yapacağımız archive file da build klasörünü zipleyip deploy package haline getirmeliyiz. Bu yüzden neyi deploy package olarak ziplediğinize, içerisinde barındırılacak dosyaların hassasiyetine dikkat etmenizi önemle tavsiye ederim. 

Root folder (or file) to archive bölümünü $(System.DefaultWorkingDirectory)/build olarak ayarlıyorum. İsterseniz sağ tarafındaki butona tıklayarak klasörünüzü seçebilirsiniz. Üzerinde çalıştığımız klasörün alt klasörü olan build i ziplemesini istiyorum ve bir sonraki task e geçiyorum. 

Copy Publish Artifact: drop task inden bahsetmeden önce Artifact den bahsetmem gerekecek. Artifact sizin deploy package larınızın depolandığı yer diyebiliriz. Release almasanız da aldığınız build ler tarih veya sizin istediğiniz bir isimlendirmelerle ziplenip depolanır. Eski bir versiyona dönmek veya başka işlemleriniz için Artifact içerisindeki build package larını kullanabilirsiniz. Release alırken de yine buradan package seçerek release oluşturuyoruz.

Artık build definition ımızdaki tasklerimiz hazır. Şimdi çok sözünü ettiğimiz Continuous Integration ı açalım. Kodumu pushladığım zaman otomatik olarak tetiklenmesi için yapmamız gereken bir ayar var. Bunu Trigger sekmesinden yapıyoruz. Trigger sekmesi içerisinde Continuous Integration ı göreceksiniz ve Enable ettiğinizde altında hangi Repo ve branch olduğunu hatta neleri ekleyip neleri çıkarması gerektiği gibi ayarların yapıldığı bölümü göreceksiniz. Eğer bunu belirli zamanlarda yapmasını istiyorsanız sağ taraftaki Scheduled bölümünden ayarlayabilirsiniz

Tebrikler, artık sizin de bir projenizde Continuous Integration var. Artık DevOps yapmadım demiyeceksiniz .P Bunu kaydedelim ve testini yapalım.

Evet sample projemin kodunu pushladım ve bekliyorum neler olacak. Tekrardan Build & Release bölümünden Builds e girelim ve oluşturduğumuz Build Definition ın status ü In Progress da ise trigger işleminiz başarılı olmuş. Çift tıkladığınızda ise sizi yapılan işlemlerin listesine götürür ve orada logları takip edebilir hatta Console üzerinde neler olduğunu izleyebilirsiniz :)

Evet build imizin başarılı olduğunu görebiliyoruz. Şimdi geldik bölüm 2 ye bu bölümde ise Release alma işlemlerini hazırlayacağız. Burada alınan build i nasıl deploy ederiz onun üzerine işlemlerimizi yapacağız. Ben bu yazımda Azure App Services kullanacağım. Oluşturduğum deploy package ı Azure App Services a deploy edeceğim. Bunun için Build & Release sekmesinde Releases a gidelim.

Build de olduğu gibi burada da Release Definition oluşturacağız.  New Definition butonuna tıkladık ve bir designer ekranına benzer ekran geldi. Sağ bölümde nereye deploy edeceğiniz üzerine Template ler listelendi. Burada PHP, Python veya NodeJS uygulamaları için Azure un özel deploy configuration larını alabiliyorsunuz bunun dışında isterseniz kendi makinenize IIS üzerinde de deploy edebilirsiniz. Ben burada Azure App Service Deployment ı seçeceğim ve Apply a basıyorum.

Burada anlaşılır olması için Enviromment ınıza isim verebilirsiniz. Tasks sekmesine girelim ve Deploy Azure App Service ayarlarını yapalım. Visual Studio Team Services a giriş yaptığımız kullanıcıya bağlı olan Azure Subscriptions larından ilgili subscription ı seçelim.  Ardından sağ tarafındaki Authorize butonuna tıklayalım ve giriş yapalım. Dikkat tarayıcınızda popup engelleyicisi var ise hata verebilir. İzin verdiğinizden emin olunuz. Authorization tamamlandıktan sonra App Service Name bölümünde subscription içerisinde bulunan App Service ı seçelim. Bu yazı için oluşturduğum dmeo bir app service ımı seçiyorum. Burada en önemli olaylardan birisi File Transforms & Variable Substitution Options bölümünde Generate Web.config olacaktır. Burada ReactJS app iniz için özel Web.config oluşturmanız gerekecek. Burada uygun bir yapı olmadığı için Generate web.config tiklenmiş ise kaldıralım.

Evet artık bu tarafı da hazırladık. En son Artifacts imizi gösterip artık Release alabiliriz. Pipeline sekmesine dönelim ve burada Artifacts bölümüne Add Artifact butonuna tıklayalım. Sağ bölümde gelen alanda Source alias bölümünden oluşturduğumuz Build Definition ı seçelim ve Add e tıklayalım. 

Tüm işlemlerimiz bitti ve artık Save edebiliriz.Save ettikten sonra Save butonunun yanındaki Release bölümünden Create Release e tıklayalım. Gelen ekranda ilgili artifacts i seçelim.  Ardından Queue diyerek işlemi kuyruğa alalım.

Kuyrukta olan işlem uzun sürebilir. Deploy süreci Build e göre daha uzun zaman alabiliyor. 

Vee işte sonuç. Success ı gördük. Şimdi bakalım sitemiz nasıl gözüküyor. 

Tebrikler nur topu gibi CI-CD kurdunuz. Umarım bu yazım yararlı olmuştur. Yanlışlarım var ise bildirmenizi çok isterim. Gözden kaçırıdğım şeyler olabilir. Uzun soluklu bir yazı oldu benim için. Umarım faydası olmuştur.

İyi okumalar :)