Angular Uygulamasını AWS Amplify’a Deploy Etme

Merhaba,

Bu içeriğimizde, Angular mimarisinde geliştirilmiş bir uygulamayı GitHub eşliğinde AWS Amplify’a deploy etmeyi inceleyeceğiz. Tabi bunun için Amplify ortamının nasıl kurulacağını, gerekli barındırma ve kimlik doğrulama işlemlerinin nasıl yapılandırılacağını ve Amplify’ın altyapısından yararlanarak yıldırım hızında performans artışının ve ölçeklenebilirliğin nasıl kurgulanacağını öğreneceğiz. O halde fazla vakit kaybetmeksizin hadi başlayalım…

AWS Amplify Nedir?

AWS Amplify, Amazon Web Services(AWS) tarafından sunulan, cloud tabanlı uygulamaların geliştirilmesini ve dağıtımını kolaylaştıran bir araç seti ve hizmet platformudur. Geliştiricilerin, web ve mobil uygulamalar için kimlik doğrulama, depolama, analiz, push bildirimi vs gibi benzeri pek çok özelliği kolayca entegre etmesine olanak tanımaktadır.

AWS Amplify özellikle -modern uygulama geliştirme- pratiklerini benimseyenler için oldukça kullanışlıdır. Tabi nedir bu pratikler? diye soracaksınız haklı olarak… Bunlar özünde belli başlı prensiplerin ve yaklaşımların kabulüdür diyebiliriz. Misal olarak; uygulamaların fiziksel sunuculara yahut manuel yönetilen ortamlara bağımlılığı olmaksızın cloud tabanlı geliştirilmesi ve veritabanı, kimlik doğrulama, dosya depolama vs. gibi gereken altyapıların ve servislerin yönetiminin büyük ölçüde cloud sağlayıcıları tarafından üstlenilmesi modern uygulama geliştirme pratiğidir diyebiliriz. Benzer mantıkla, monolitik mimariler yerine microservice gibi distributed mimarilerin tasarlanması ve ihtiyaç noktalarında serverless hizmetlerden istifade edilmesi de bir modern uygulama yaklaşımıdır diyebiliriz. Ayrıca kodsal değişikliklerin olduğu durumlarda otomatik olarak testlerin çalışması ve hataların tespit edilmesi ve ardından hızla üretim ortamına deploy işlemlerinin gerçekleştirilebilmesi için sürece CI/CD(Continuous Integration / Continuous Delivery) yaklaşımlarının dahil edilmesi de modern yaklaşımın olmazsa olmazıdır diyebiliriz. Tüm bunların dışında uygulamada gözlemlenebilirlik ilkelerinin önemsenmesi, ölçeklenebilir bir altyapının tasarlanması ve Agile gibi organizasyonel yaklaşımların benimsenmesi de bu sürecin bir parçasıdır diyebiliriz.

İşte tüm bu süreçte AWS Amplify bizlere şu konularda ciddi avantajlar sağlamaktadır;

• Kolay Entegrasyon
  React, Vue, Angular vs. gibi popüler frontend ve mobil frameworklerle kolayca entegre olabilmekte ve özellikle CLI ve kütüphaneler sayesinde de hızla yapılandırılabilmektedir.
• Hızlı Kurulum ve Yönetim
  Cognito, API Gateway, S3, DynamoDB vs. gibi AWS servislerini tek çatı altında toplamakta ve yönetebilmektedir. Ayrıca backend servislerini birkaç komutla kurup güncelleyerek hızlıca prototip oluşturabilmek ve production ortamına geçiş sağlayabilmektedir.
• Otomatik Deploy (CI/CD)
  AWS Amplify, geliştirme aşamasında CI/CD süreçlerine dair otomasyon akışı sunmakta ve kod değişikliklerinde uygulamaların otomatik olarak yeniden yapılandırılarak deploy edilmesini sağlamaktadır.
• Ölçeklenebilirlik ve Güvenlik
  AWS altyapısını kullandığı için uygulamaların anlık trafik artışlarına karşı yüksek güvenlik standartlarıyla korunması ve bunun yanında otomatik olarak ölçeklendirilmesi mümkündür.

Özetle AWS Amplify, modern web ve mobil uygulamaları hızlıca geliştirmek, ölçeklendirmek, güvenli hale getirmek ve tek bir platform üzerinden yönetmek isteyen geliştiriciler için tasarlanmış bir çözümdür diyebiliriz.

Başlarken

Şimdi içerik boyunca AWS Amplify üzerinde incelemede bulunurken kullanabilmek için halihazırda bir Angular uygulaması oluşturalım ve bunu GitHub’a yükleyelim. (GitHub projesi için bknz : AWS.Amplify.Example)

AWS Amplify’ı Yapılandıralım

Artık hazır olduğumuza göre Angular uygulamamızı host edebilmek için AWS Aplify’ı yapılandırmamız gerekecektir. Bunun için AWS Console üzerinden AWS Amplify’ı aşağıdaki görseldeki gibi aratıp, açalım.İlgili servise tıkladığımızda aşağıdaki gibi bir açılış sayfası bizleri karşılayacaktır.Burada Deploy an app butonuna tıklayarak devam edelim.

Tabi yapılacak çalışmadan önce tarafımızca kullanılan kod deposunun ilgili servise bağlanması gerekecektir.Görüldüğü üzere AWS Amplify’da GitHub dışında birçok platforma bağlanabilmek söz konusudur. Bizler GitHub’ı seçerek yolumuza devam edelim.

Tabi GitHub hesabıyla ilgili AWS Amplify’ın yetkilendirilmesi gerekecektir. Burada bir pencere üzerinden bu işlemleri hallettikten sonra artık üzerinde çalışılacak repo’yu aşağıdaki görseldeki gibi seçelim ve ilerleyelim.Sonraki ekranda ise derleme talimatlarının yapılandırıldığını göreceğiz.Burada talimatları istek doğrultusunda daha net bir şekilde görebilmek için Edit YML File butonuna tıklayabilir ve hatta isterseniz burada kendinize göre düzenlemeler de yapabilirsiniz.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist/aws.amplify.example
    files:
      - '**/*'
  cache:
    paths:
      - .npm/**/*

Ayrıca bu kodu amplify.yml adında bir dosya ile GitHub reposuna ekleyerek, hem Amplify’da ki kodu geçersiz kılabilir hem de kaynak kod denetim süreçlerinde derleme komutlarını da daha sürdürülebilir kılabilirsiniz. Ve biryandan da AWS Amplify tarafından bu dosyanın otomatik olarak alınmasını sağlayabilirsiniz.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 18.19.0
        - nvm use 18.19.0
        - node -v
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist/aws.amplify.example/browser
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Nihai olarak Save and deploy butonuna tıklayalım ve uygulamayı deploy edelim…Evet, görüldüğü üzere ilk deploy’u başarıyla gerçekleştirmiş bulunuyoruz.Hatta test etmek için Domain alanındaki linke tıklayarak uygulamayı tarayıcıda görüntüleyebilirsiniz.Benim yaptığım çalışma projesinde yüz tanıma işlemini örnek olarak ele aldığım için böyle bir içeriğin bizleri karşılaması gayet doğal. Burada mühim olan başarıyla deploy işleminin gerçekleştirildiğini görmemiz. Artık, uygulama üzerinde yapılan geliştirmeler neticesinde her commit’e karşılık AWS Amplify’da deploy otomatik olarak başlatılacak ve başarıyla tamamlandığı taktirde yeni sürüm production’a yansıtılacaktır.

Özel Domain Adı Almak

AWS Amplify’da deploy edilmiş uygulamalara hazır domain’ler yerine özel adresler de belirleyebilmekteyiz. Bunun için ilgili uygulamanın ‘Hosting’ sekmesinden ‘Custom Domain’ menüsüne gelinmesi ve buradan da ‘Add domain’ butonuna tıklanması yeterlidir.Ardından açılan ekranda istenilen domain’i yazarak, uygun olduğu taktirde ücreti mukabilinde alıp ilgili uygulamayla ilişkilendirerek kullanabilirsiniz.

CI/CD

AWS Amplify’ı tercih etmemizin asıl amacı sürekli dağıtım(continuous deployment)’dır. Yani önceki satırlarda da temas ettiğimiz gibi uygulamanın reposuna yeni bir push yapıldığı taktirde provision-build-deploy sürecinin otomatik olarak tetiklenmesini sağlamaktır. Böylece main branc’de olan değişiklikler herhangi bir insan müdahalesine gerek duyulmaksızın mümkün olan en kısa sürede deploy edilerek production’a yansıtılmaktadır.

Pull Requests Preview

AWS Amplify’da Pull Request Preview, bir pull request açıldığında otomatik olarak uygulamanın bir önizleme sürümünü deploy eden bir özelliktir. Bu özellik sayesinde, geliştirme sürecinde yapılan değişiklikler canlı ortama alınmadan önce test edilebilir ve ekip üyeleri tarafından gözden geçirilebilir.

Bu özelliği kullanabilmek için main branch’in(master) yanında bir branch daha oluşturulmalı ve ardından uygulamadaki değişiklikler bu branch’e gönderilmelidir. Misal olarak, bizler ‘preview’ isminde bir branch oluşturduğumuzu varsayıp, değişiklikleri bu branch’e push’larsak eğer aşağıdaki ekran görüntüsünde olduğu gibi GitHub’da bu yeni branch’e gelen yeniliklerin olduğunu söyleyen bir uyarı göreceğiz.Compare & pull request butonuna tıklayıp ardından aşağıdaki görselde olduğu gibi yeni bir pull request oluşturursak,yeni açılan ekranda AWS Amplify Console Web Preview uygulamasını göreceğiz.Uygulama işlenirken bir yandan da AWS Amplify’a geri dönüp branch’lere göz atarsak eğer test branch’inin de listelendiğini görmüş olacağız.İşte bu kadar…

Tüm bunların dışında AWS Amplify, yalnızca static web uygulamalarını barındırmaktan ziyade backend işlemlerini de karşılayabilmekte ve bir yandan da AWS Cognito ile de authentication gerçekleştirebilmektedir. Ayrıca unutulmamalıdır ki; deploy ettiğimiz uygulamaların küresel olarak kullanılabilir şekilde CDN’lere otomatik olarak host edilmesini de sağlayabilmektedir. Ve tabi başka nice işlemleri de…

Nihai olarak;
AWS Amplify ile dakikalar içerisinde bir Angular uygulamasının nasıl deploy ediliğini, main branch’e yeni bir değişiklik gönderildiğinde otomatik bir şekilde derleme işleminin nasıl tetiklendiğini ve uygulamanın yeni sürümünün zahmetsizce nasıl yayınlanabildiğini deneyimlemiş bulunuyoruz. Bunların yanında özel domain yönetimi, pull request preview vs. gibi birkaç başka özelliğinde farkındalığını oluşturmuş oluyoruz.

İhtiyaç dahilinde veriminden istifade etmeniz ümidiyle… 🙂

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…