Bu modülde, AWS Amplify’ı yerleşik sürekli dağıtım ile web uygulamanızın statik kaynaklarını barındıracak şekilde yapılandıracaksınız. Amplify Console, tam yığın web uygulamalarının sürekli dağıtımı ve barındırılması için git tabanlı bir iş akışı sağlar. Takip eden modüllerde, AWS Lambda ve Amazon API Gateway ile oluşturulan uzak RESTful API’leri çağırmak için JavaScript kullanarak bu sayfalara dinamik işlevsellik ekleyeceksiniz.
Bu modülün mimarisi oldukça basittir. HTML, CSS, JavaScript, görüntüler ve diğer dosyalar dâhil olmak üzere tüm statik web içerikleriniz AWS Amplify Console tarafından yönetilecektir. Son kullanıcılarınız daha sonra AWS Amplify Console tarafından gösterilen genel web sitesi URL’sini kullanarak sitenize erişecektir. Sitenizi erişilebilir kılmak için herhangi bir web sunucusu çalıştırmanıza veya başka hizmetlerden faydalanmanıza gerek yoktur.
Çoğu gerçek uygulama için sitenizi barındırmak üzere özel bir etki alanı kullanmanız önerilir. Kendi etki alanınızı kullanmak isterseniz Amplify’da özel bir etki alanı kurmak için talimatları izleyin.
Modülü Tamamlama Süresi: 15 Dakika
Kullanılan hizmetler: AWS Amplify
Statik bir web sitesini barındırmak için aşağıda adım adım gösterilen talimatları takip edin. Bölümü genişletmek için her adımın numarasına tıklayın.
-
1. Adım Bir Bölge Seçin
Bu web uygulaması AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway ve Amazon DynamoDB dâhil olmak üzere bu uygulamada kullanılan tüm hizmetleri destekleyen herhangi bir AWS bölgesine dağıtılabilir.
Hangi bölgelerin desteklenen hizmetlere sahip olduğunu görmek için bölge tablosuna bakabilirsiniz. Seçebileceğiniz desteklenen bölgeler şunlardır:
- ABD Doğu (K. Virginia)
- ABD Doğu (Ohio)
- ABD Batı (Oregon)
- AB (Frankfurt)
- AB (İrlanda)
- AB (Londra)
- Asya Pasifik (Tokyo)
- Asya Pasifik (Seul)
- Asya Pasifik (Sidney)
- Asya Pasifik (Mumbai)
AWS Management Console'un sağ üst köşesindeki açılır listeden bölgenizi seçin.
(Büyütmek için tıklayın)
-
2. Adım: Bir Git Deposu Oluşturun
Bu modül için kaynak kodunu yönetmek üzere iki seçeneğiniz vardır: AWS CodeCommit (AWS Ücretsiz Kullanıma dâhildir) veya GitHub. Bu öğreticide uygulama kodumuzu depolamak için CodeCommit kullanacağınız fakat GitHub’da bir depo oluşturarak aynısını yapabilirsiniz.
a. AWS CodeCommit konsolunu açın
b. Depo Oluştur öğesini seçin
c. Dosya adını* “wildrydes-site” olarak ayarlayın
d. Oluştur öğesini seçin
e. Depo oluşturulduğuna göre bu talimatları izleyerek IAM konsolunda Git kimlik bilgileri ile bir IAM kullanıcısı oluşturun.
f. CodeCommit konsolunda Clone URL açılır menüsünden Clone HTTPS öğesini seçin
g. Bir terminal penceresinden git klonunu ve deponun HTTPS URL’sini çalıştırın:
$ git klon https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
'wildrydes-site'a klonlanıyor...
'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX için kullanıcı adı
'USERID' (‘KULLANICIKİMLİĞİ’): XXXXXXXXXXXX için parola
uyarı: görünüşe göre boş bir depo klonladınız.
-
3. Adım: Git deposunu doldurun
Git deponuzu oluşturmak için AWS CodeCommit veya GitHub.com kullandıktan sonra deponuzu yerel olarak klonlayınca bu atölye ile ilişkili mevcut genel olarak erişilebilir bir S3 klasöründen web sitesi içeriğini kopyalamanız ve içeriği deponuza eklemeniz gerekecektir.
a. Dizini deponuza olacak şekilde değiştirin ve S3’den statik dosyaları kopyalayın:
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Dosyaları Git hizmetine uygulayın
$ git add .
$ git pushNesneler sayılıyor: 95, tamamlandı.
Nesneler sıkıştırılıyor: %100 (94/94), tamamlandı.
Nesneler yazılıyor: %100 (95/95), 9,44 MiB | 14,87 MiB/s, tamamlandı.
Toplam 95 (delta 2), tekrar kullanılan 0 (delta 0)
Şuraya https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [yeni dal] master -> master
-
4. Adım: AWS Amplify Console ile Web Barındırmayı Sağlayın
Sonra, az önce git’e uyguladığınız web sitesini dağıtmak için AWS Amplify Console’u kullanacaksınız. Amplify Console, statik web uygulaması kodunuzu depolamak için bir yer kurma işini halleder ve hem uygulamanın yaşam döngüsünü basitleştirmek hem de en iyi uygulamaları sağlamak için bir takım yardımcı özellikler sağlar.
a. Amplify Console konsol sayfasını başlatın
b. Amplify Console ile Dağıt seçeneğinin altında Kullanmaya Başlayın seçeneğine tıklayın
c. Bugün kullanılan Depo hizmeti sağlayıcısını seçin ve İleri öğesini seçin.
d. GitHub’ı kullandıysanız, AWS Simplify’ı GitHub hesabınıza yetkilendirmeniz gerekecektir
e. Açılır menüden az önce oluşturduğunuz Depo ve Dal öğesini seçin
e. "Kurulum ayarlarını yapılandır" sayfasında varsayılanları ayarları olduğu gibi bırakın ve İleri öğesini seçin.
f. Gözden geçir sayfasında, Kaydet ve dağıt öğesini seçin
g. Bu işlem, Amplif Console’un kodunuzu dağıtması ve gerekli kaynakları oluşturması için birkaç dakika sürer.
Tamamlandıktan sonra Wild Rydes sitenizi başlatmak için site görüntüsüne tıklayın.
Master bağlantısına tıklarsanız, dalınız ile ilgili derleme ve dağıtım ayrıntılarını, ve uygulamanın çeşitli cihazlarda ekran görüntülerini göreceksiniz:
-
5. Adım: Sitenizde değişiklik yapın
AWS Amplify Console, bağlantılı depoda değişiklikler tespit ettiği zaman uygulamayı yeniden oluşturacak ve yeniden dağıtacaktır. Bu süreci test etmek için ana sayfada bir değişiklik yapın.
a. `index.html` sayfasını açın ve başlık satırında aşağıdaki gibi olacak şekilde değişiklik yapın: <title>Wild Rydes - Geleceğin Rydes’ı!</title>
b. Dosyayı kaydedin ve yeniden git deponuza uygulayın. Amplify Console, deponuzdaki güncellemeyi fark ettikten hemen sonra siteyi tekrar oluşturmaya başlayacaktır. Çabucak gerçekleşecektir! Amplify Console konsol sayfası’na dönün ve süreci izleyin.
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c. Tamamlandığında Wild Rydes sitesini tekrar açın ve başlıktaki değişikliği fark edin.
-
Özet
Bu modülde, Wild Rydes işimiz için temel olacak statik web sitesini oluşturdunuz. AWS Amplify Console, sürekli entegrasyon ve teslim modeli ile birlikte statik web sitelerini dağıtmayı oldukça kolaylaştırmaktadır. Daha karmaşık Javascript çerçevesi temelli uygulamalar “oluşturma” kabiliyetine ek olarak özellik dalı dağıtımı, kolay özel etki alanı kurulumu, anlık dağıtımlar ve parola koruması gibi özellikleri vardır.
