Selamlar.Bir cv challenge dökümanına göre aws üzerinde çalışan statik bir web sitesi kurdum.Bu yazıda sizlere bu web sitesini kurarken edindiğim tecrübeler ve karşılaştığım zorluklardan bahsedeceğim.
İncelemek İsterseniz:
Web Sitesi
Cv Challenge
İlk Adım Api Yazılması
Kullanılan Hizmetler
AWS Dynamodb
AWS Lambda
AWS API Gateway
AWS IAM
Eğer incelediyseniz web sitesine ilk girince karşınızda toplam ziyaretçi sayısını göreceksiniz.Bunlar sizin ile birlikte bu zamana kadar siteyi ziyaret eden kullanıcıların sayısıdır.Bu sayı AWS Lambda üzerinde Python ve boto3 kullanarak hazırladığım api sayesinde AWS Dynamodb üzerine kayıtları günceller ve web sitesinde kullandığım javascript kodu ile her 15 saniyede bir toplam ziyaretçi sayısını siteye çeker ve gösterir.
Lambda üzerinde illa Python kullanmanız gerekmiyor.Lambda üzerinde Java,Node.js,Javascript,.Net ve PHP kodları da çalıştırabilirsiniz.
IAM ile sadece Dynamodb üzerinde yetki sahibi bir rol oluşturup lambda kodlarınıza bu rolü atayın.Aksi halde lambda kodunuzla diğer aws hizmetleri üzerinde de işlem yapabilme ihtimaliniz var.
- AWS Dynamodb de ziyaretçi tablonuzu oluşturun. Kaynak
- AWS Lambda ile dynamodb üzerinde ihtiyacınız olan işlemleri kodlayın. Kaynak
- AWS API Gateway ile web sitenize gelen get,post gibi işlemlerde hangi lambda fonksiyonunuzun çalışacağını ayarlayın. Kaynak
Apiniz hazır Postman kullanarak apinizi deneyebilirsiniz.
Api kısmında en çok takıldığım nokta CORS(Cross-Origin Resource Sharing) oldu.Sanırım alabileceğim bütün CORS hatalarını web sitem üzerinden aldım.
Siz de CORS hatalarına takılırsanız Lambda ve web sitenizde apiyi kullandığınız kodda(ben bu işi javascript ile yaptım) headers kısmını gözden geçirmelisiniz.
İkinci Adım Web Sitesinin Oluşturulması
Kullanılan Diller Ve Api
HTML
CSS
Javascript
Kendi Yazdığımız Api
Ben kendi web sitemi bir ana sayfa ve bir cv sayfası olacak şekilde tasarladım.Siz isterseniz bir one page site veya multi page site tasarlayabilirsiniz.Siteyi oluşturmak için HTML, bu oluşuma bir tasarım katmak için CSS , tasarımlarımızı animasyonlarla taçlandırmak ve tabii ki api mizi kullanabilmek için Javascript kullanacağız.Eğer halihazırda HTML,CSS ve Javascript biliyorsanız sitenizi hazır bir template üzerine ekleme,çıkarma ve tasarım değişiklikleriyle inşa edebilirsiniz.
Bu size site yazma kısmında vakit kazandırabilir.
- HTML ile sitenizi oluşturun. Kaynak
- CSS ile web sitenize tasarımınızı katın. Kaynak
- Javascript ile animasyonlarınızı oluşturun ve apinizi kullanın. Kaynak
Bu adımları başarıyla tamamlayıp sitemizi apimizle test ettiğimizde eğer api herhangi bir engele takılmıyor ve tasarımsal açıdan da bir sıkıntı yoksa web sitemiz canlıya alınmaya hazır demektir.
Üçüncü Adım Web Sitesinin Canlıya Alınması
Kullanılan Hizmetler
AWS S3
AWS Route53
AWS CloudFront
AWS Certificate Manager
Bir Domain
Öncelikle web sitemizi 1 kereye mahsus olarak AWS S3 üzerine upload edeceğiz.Daha sonra properties kısmından Static Website Hosting bölümünü editleyip statik website hostingini açacağız.
Daha sonra Permission kısmında bir bucket policy yerleştirmemiz gerekiyor. Bucket Policy Yazmak İçin : Kaynak
S3 Tarafında işlemleri tamamladığımızda sıra aws certificate managere geliyor.Aws CM de web sitemizde kullanmak üzere ssl sertifikası oluşturacağız.Bu kısımda işlemimiz bu kadar.
AWS CloudFronta geldiğimizde kendimize bir distribution oluşturacağız.Oluşturma işleminde origin domain kısmına s3 üzerinde bulunan sitemizi gireceğiz.
Viewer protocol policy kısmında Redirect HTTP to HTTPS seçeneğini işaretleyeceğiz.Burası önemli çünkü eğer sitemize gelen istekleri https olarak yönlendirmezsek siteye http üzerinden giren kullanıcılar için ssl sertifikamız çalışmayacak dolayısıyla web sitemize güvenli değil uyarısı bulunacaktır.
Allowed HTTP Method üzerinden sitenizde izin verilen methodları işaretleyin.
Custom SSL certificate kısmından ise AWS CM de oluşturduğumuz sertifikayı göstereceğiz.
Son olarak Default root object kısmına web sitemizin ana sayfasının (genelde index.html olur) ismini gireceğiz.
Route53 de bir domain alabilirsiniz veya benim de yaptığım gibi farklı bir yerden de domaininizi satın alabilirsiniz.
R53 de domainimizin adıyla aynı olacak şekilde hosted zone açacağız.
Hosted zone girdiğimizde default olarak ayarlanmış bazı recordlar göreceksiniz onlara bir tane de biz ekleyeceğiz.Create record a basalım ve başlayalım.Record name'i boş bırakacağız.Record type A olacak Value kısmında Alias ı seçip Endpoint olarak Alias to Cloudfront Dist. seçeceğiz.Choose dist. kısmında ise cloudfrontta oluşturduğumuz dist. i göstereceğiz ve recordu oluşturacağız.
Bu kısım da tamam.Şimdi domain sağlayıcımıza gidip dns ler kısmına route53de bulunan type'i NS olan recordun Value/traffic to sekmesinde bulunan 4 tane dns adresimizi de domain servisimize ekleyeceğiz.Web sitemiz url ile artık ulaşılabilir.
- AWS S3 üzerine sitenizi yükleyin ve ayarlamaları yapın Kaynak
- AWS Certificate Manager üzerinden kendinize bir SSL Sertifikası oluşturun. Kaynak
- AWS CloudFront kullanarak distribution oluşturun Kaynak
- AWS Route53 kullanarak hosted zone oluşturun Kaynak
- Domaininize DNS leri ekleyin.
Web sitemiz artık kullanıma açık ama bir problemimiz var.Biz web sitemizde her güncelleme yapmak istediğimizde tekrar mı s3 e yüklemek zorundayız?
Dördüncü Adım Web Sitenin Versiyon Kontrolü
Kullanılan Hizmetler
AWS Codepipline
Github
Burada yapacaklarımız çok basit ve kısa.Web sitemizin kodlarını githuba yükleyeceğiz.AWS Codepipeline da bir pipeline oluşturup kaynak olarak github repomuzu göstereceğiz.
- Web site dosyalarını githuba yükleyin.
- AWS Codepipeline üzerinde bir pipeline oluşturun. Kaynak
Artık her github repomuzu güncellediğimizde s3 üzerindeki web sitemizde güncellenecek.
Siteyi oluşturmak için yaptığım işlemler bunlardı.Anlatabildiğim kadarıyla anlatmaya çalıştım.Okuduğunuz için teşekkür eder herkese iyi çalışmalar dilerim.
Top comments (0)