AWS S3 ve Github Action Kullanarak React Deployment Pipeline’ı Oluşturmak
Bu makalede bir react projesi amazon servisleri kullanılarak nasıl deploy edilir , deploy edilen projemizin github actions kullanılarak CI/CD süreci nasıl yönetilir gibi sorulara örnek proje üzerinden değineceğiz.
Aws S3 Nedir ?
Temelinde Aws S3(Simple Storage Service) hizmeti amazon tarafında statik dosyaların barındırılmasını sağlayan bir depolama hizmetidir.Genel olarak bu servis üzerinde dosya barındırma(resim video vb..) işlemlerini yapabilmekteyiz.Bunun yanında react tarafında build alınmış dosyalarda her hangi bir web server ihtiyacı olmadığından dolayı bu hizmet üzerinde barındırılabilmekte.İstenirse s3 yerine amazon tarafında farklı servisler de tercih edilebilir.
a) S3 Bucket Oluşturulması
Amazon tarafında bucket ismini domain isminiz ile aynı olması ileride kullanacağımız route53 servisinde sizin için büyük fayda sağlayacaktır.
Bucket oluşturduktan sonra permission sekmesinden gerekli izinleri açmanız gerekmekte.
İlk aşamada bu şekilde bucketımızı projemizin kurulumu için hazırlamış oluyoruz.
2) Github Actions Nedir ?
Github actionu tanımlamadan önce temel olarak bir projede CI/CD akışına neden gerek duyarız bize ne gibi katkılar sağlar sorularına cevap vermek daha doğru olacaktır.
Yazılım ekosisteminin her geçen gün büyümesiyle birlikte sürecin yönetilmesi , kod kalitesinin kontrol edilmesi ,güncelleme anında kesintiye yol açılmaması gibi bir çok kavram önem kazanmaya başlamıştır.Bu süreçlerin yönetilmesi kosunda ise destek olacak bir çok araç bulunmaktadır.Github actions’ta bu süreçleri yönetebilmemizi sağlayan araçlardan bir tanesi.
Projemize dönecek olursak s3 tarafında bucketımızı oluşturduktan sonra react projemizi ilk aşamada manuel olarak upload etmek yerine bu işlemi github actions servisini kullanarak yapacağız.
Github actions kullanmayacaksanız bu noktada bucket üzerinden properties kısmına girerek static website hosting’i aktif etmeniz ve react projenizi bucket’ın içine upload etmeniz yeterli olacaktır.
a) Github Actions .yml Hazırlanması
İlk olarak github üzerinden projemizi oluşturuyoruz.
Daha sonra oluşturduğumuz repoyu bilgisayarımıza klonlayıp react uygulamamızı içine atıyoruz.
Son olarak github action için sürecin ne şekilde işleneceğini ve hangi aksiyonların çalışacağını belirttiğimiz bir .yml hazırlamamız gerekmekte.Bu dosyayı projemizin içinde .github/workflows/ klasörünün altında oluşturuyoruz.
Alt satırda bulunan örnek react projesi için oluşturduğumuz .yml dosyasını inceleyebilirsiniz.
.yml dosyamızı oluştururken AWS CLI için bilgileri doğru girmemiz önemli.Bu noktada amazon hesabınızdan secret keyi nasıl alacağınızı bilmiyorsanız linkten öğrenebilirsiniz.Güvenlik açısından aldığımız bu keyleri .yml dosyasında tutmak yerine yine github üzerinde projenin secret store’unda tutabilirsiniz.Bunun için projede settings sekmesine gelip AWS_ACCESS_KEY_ID ve AWS_SECRET_ACCESS_KEY adlı iki adet kayıt oluşturup bu kayıtları örnekte olduğu gibi .yml dosyasına variable olarak çağırabilirsiniz.
.yml dosyasını belirtilen şekilde oluşturduktan sonra projemizi master branche her pushladığımızda action çalışacaktır .yml dosyasında belirttiğiniz süreçleri bu dosya üzerinden kontrol edebilirsiniz.
Actionumuz başarılı olduğu takdirde projemiz derlenip s3 bucketına atılmış olacaktır.Son olarak s3 bucketınıza gidip properties sekmesinden static web hostingi aktif etmeniz gerekmekte.Aynı panel üzerinden amazonun size verdiği endpointten projenize ulaşabilirsiniz. Eğer başka bir domain kullanmak istersek AWS üzerinden route53 hizmetinden faydalanabiliriz.
Özet:
Bu yazımızda bir react projesinin CI/CD süreci github actions üzerinden nasıl yönetilir ve projemizi düşük maliyet ile AWS S3 bucketta barındırabiliriz ona değindik.
Süreci madde madde özetlemek gerekir ise;
- Aws S3 Bucket Açılması
- Policylerin ayarlanması
- Github Action İçin .yml Dosyasının Hazırlanması
- Github Secretlerın Oluşturulması
- .yml Dosyasının Atılması Ve İlk Actionun Çalışması
- Bucket Üzerinden Static Web Hostingin Aktif Edilmesi
Kaynakça:
