= Bir React Uygulamasını dağıtmak için AWS Amplify Nasıl Kullanılır =
== AWS Amplify ile React Uygulamalarını dağıtma kılavuzu ==
Yazılım Mühendisi olarak danışmanlığa başladığımdan beri, aşağıdakileri gösteren bir portföy web sitesi oluşturmak istedim:
üzerinde çalıştığım kişisel ve profesyonel projeler. Bu kış tatilinde portföy sitemi tasarlamak, geliştirmek ve dağıtmak için zaman harcadım ve bu makalede, onu AWS Amplify ile nasıl devreye aldığımı size anlatacağım. Web sitesini dan-murphy.com adresinde ve kodu GitHub'da görüntüleyebilirsiniz.
= Kısa Bir Arka Plan =
Profesyonel işimin çoğu, veri odaklı uygulamalar oluşturmayı ve veri boru hatlarını düzenlemeyi içeriyor. Bu görevleri gerçekleştirmek için düzenli olarak Python ve Ruby kullanıyorum ve herhangi bir ön uç çalışması için JavaScript'i dahil ediyorum. React ile daha rahat olma çabasıyla, portföy web sitemi oluşturmak için çerçeveyi kullanmaya karar verdim.
= Uygulamayı Kurmak =
Attığım ilk adım, uygulamayı nasıl yapılandıracağıma karar vermekti. kullandım
create-react-app'i dizinlerim için bir temel şablon olarak oluşturdum ve ardından uygulamayı birkaç ek klasörle yeniden yapılandırdım. Sonlandırılmış kurulum şöyle görünür:
kaynak
bileşenler
âÃÂÃÂarşivler
âÃÂÃÂekstralar
âÃÂÃÂveri
âÃÂÃÂimgs
sayfalar
âÃÂÃÂiçindekiler
âÃÂÃÂveri
stiller
testler
demirbaşlar
Dikkate değer değişikliklerden bazıları,
**bileşenler**
, ve
**sayfalar**
dizinler.
**stil**
,
: Bu, uygulama için tüm bileşenleri sakladığım yerdir. Bileşenleri merkezi bir klasörde saklayarak, kodumu yeniden kullanmak ve yeniden düzenlemek daha kolay ve başkalarının anlaması daha sezgisel. Portföy web sitemi oluşturan bileşenlerden bazıları şunlardır:
bileşenler
başlık,
Alt bilgi ve
Proje Kenar Çubuğu.
: Bu, uygulama için ayrı sayfaları oluşturduğum yerdir. Gerekli bileşenleri içe aktarıyorum
sayfalar
klasörü ve ardından sayfayı tasarlamak için bunları birleştirin. İşte bunu nasıl yaptığımın bir örneği
bileşenler ana sayfası:
: Burası uygulama için global CSS stillerini tanımladığım yer. kullanmayı seviyorum
stiller
styled-componentstek tek bileşenler için, ancak her sayfada kullanılabilen genel stiller oluşturmayı da faydalı buldum.
Son olarak, istekleri doğru sayfalara eşlemek için şunu kullanıyoruz:
tepki-yönlendirici-dom. Güzergahlar,
App.js dosyası aşağıda gösterildiği gibi:
Bu harita olacak
Ana Sayfa,
/proje istekleri
Projeler Sayfası,
/talepler hakkında
HakkındaSayfa ve
/kitaplık istekleri
Kitap Sayfası. Artık uygulamanın geliştirilmesi tamamlandığına göre, başkalarının kullanabilmesi için onu konuşlandırmamız gerekiyor!
/istekler
= AWS Amplify ile Dağıtım =
== Genel Bakış ==
Bir React web sitesini dağıtmanın birkaç yolu vardır, ancak en basitlerinden birinin kullanmak olduğunu gördüm.
**AWS Amplify Amplify, ölçeklenen mobil ve web uygulamaları oluşturmanın "en hızlı ve en kolay yolu"olarak tanımlanır. Bunu başarmak için, AWS, bir sunucu kurmanın, bağımlılıkları yüklemenin ve web sitenizin bir üretim derlemesini oluşturmanın tüm zorluklarını tahmin ederek yalnızca sezgisel bir UX oluşturmaya odaklanmanıza olanak tanır. AWS Amplify'ın veri odaklı uygulamalar (özellikle **ön uç** ve **arka uç içeren web siteleri) için sunduğu şeyler hakkında daha fazla bilgi edinmek için belgelerine bakın.
== Deponuzu Bağlamak ==
Web uygulamanızı AWS Amplify'da barındırmak için önce kaynak kodunuzu içeren depoyu bağlamanız gerekir. Bunu yapmak için şuraya gidebilirsiniz:
*AWS Amplify* *Başlarken* **Web Uygulamamı Barındırın ve **Uygulama deposunu bağla *sayfasına tıklayın,*sayfaya gidin, 
Ardından, kaynak kodunuzu içeren depoyu bağlayabileceğiniz ayrı bir sayfaya yönlendirileceksiniz. Bu örnek için GitHub'ı seçeceğim ancak AWS Amplify ayrıca BitBucket, GitLab, AWS CodeCommit'i ve hatta bir Git sağlayıcısı olmadan konuşlandırmayı da destekliyor.
Başarılı bir yetkilendirmenin ardından hangi depoyu dağıtmak istediğinizi seçebilir ve AWS Amplify'ın üretim derlemeleri için kullanması gereken dalı seçebilirsiniz.
Bundan sonra tıklayın
**Sonraki** ve AWS sizden *derleme* ve *test* ayarlarınızı yapılandırmanızı isteyecektir. AWS'nin sağladığı temel şablon aşağıda gösterilmiştir.
versiyon 1
başlangıç aşaması:
aşamalar:
ön yapı:
komutlar:
- npm kurulum yapısı:
komutlar:
- npm çalıştırma derlemesi
eserler:
baseDirectory: yapı
Dosyalar:
-
önbellek:
yollar:
- düğüm_modülleri
Ek olarak, altında
**gelişmiş ayarlar** geçiş, ortam değişkenlerini ve özel bir yapı kapsayıcısı ayarlayabilirsiniz.
Son olarak, uygulamanız için ayarları inceledikten sonra tıklayın.
**Kaydet ve Dağıt **ve **AWS, uygulamanızı yapılandırmaya ve dağıtmaya başlayacaktır. AWS'nin dağıtımı tamamlandığında, Amplify ana sayfasına gidebilir ve yeni dağıtılan uygulamanızı görebilirsiniz AWS, uygulamanızı yapılandırmaya ve dağıtmaya başlayacaktır. AWS'nin dağıtımı tamamlandığında, Amplify ana sayfasına gidebilir ve yeni dağıtılan uygulamanızı görebilirsiniz.
Şimdi, kullanarak URL'yi özelleştirelim
**AWS Amplify etki alanı yönetimi
== Özel Etki Alanı Ekleme ==
Özel bir alan adı eklemeye başlamak için sol kenar çubuğuna gidin ve
**etki alanı yönetimi 
**etki alanı yönetimi** ayarı.
Ardından, seçin
**etki alanı ekle **etki alanını yapılandır **alan adınızı girin (aşağıda gösterildiği gibi) ve tıklayın**alan adınızı girin (aşağıda gösterildiği gibi) ve  öğesini tıklayın. 1*e57WryLTPPC7Ro-_d5XAgQ.png)
Bundan sonra, alan adınız için gerekli olan tüm yönlendirmeleri ayarlayabilirsiniz. Örneğin aşağıdaki örnekte httpsdan-murphy.com'dan httpswww.dan-murphy.com'a yönlendirme oluşturuyorum.
Son olarak, özel etki alanınız doğru bir şekilde yapılandırıldıktan sonra AWS size
**Doğrulama Sertifikası Bu sertifikayı AWS Sertifika Yöneticisi konsolunda da görüntüleyebilirsiniz.
== CNAME Kaydı Ekleme ==
Özel etki alanınızı yapılandırmanın son adımı, bir CNAME kaydı eklemektir. Aşağıdaki örnekte Google Domains kullanıyorum, ancak temel kavramlar farklı alan adı kayıt sitelerinde aynı kalıyor.
İlk olarak, aşağı kaydırın
Google Domains'de **Özel Kaynak Kayıtları**. Tüm alt alan adlarını AWS Amplify etki alanına işaret eden bir *CNAME * kaydı oluşturun: Ad: alt alan adını girin. Alt alan adı www.domain.com ise, girin. www app.domain.com ise, app girin. Veri: Etki alanı yönetimi sayfasında, Eylemler'e tıklayın ve ardından DNS Kayıtlarını Görüntüle'yi seçin. Ardından, DNS sağlayıcısını Yapılandır altında bulunan AWS Amplify etki alanını girin. 
**Alan Yönetimi**sayfasında **Eylemler **DNS Kayıtlarını Görüntüle**'yi seçin
Toplamda, özel kaynak kaydı aşağıdaki gibi görünecektir:
Ardından, bir tane daha ekleyin
AWS Sertifika Yöneticisi doğrulama sunucusuna işaret eden *CNAME* kaydı. Doğrulanmış AWS Sertifika Yöneticisi, uygulamanız için TLS'yi yönetir: Ad: doğrulama sunucusunun alt etki alanını girin. Alanınızın sahipliğini doğrulamak için DNS kaydı _1234.example.com ise, yalnızca _1234 girin. Veri: ACM doğrulama sertifikasını girin. Doğrulama sunucusu _1234.abcdefg.acm-validations.aws ise, _1234.abcdefg.acm-validations.aws girin.
Doğrulama Sertifikalarınız için tüm bilgiler AWS Sertifika Yöneticisi konsolunda bulunur. ikinciden sonra
*CNAME* eklendi, özel kayıtlarınız şöyle görünmelidir: 
Son olarak, bir ekleyelim
**Sentetik Kayıt** bir alt alan yönlendirmesi ayarlamak için: Alt alan: Alan URL'sini girin: www. 
= Tamamlanıyor =
Genel olarak bu makalede, React Uygulamalarını nasıl yapılandıracağımızı ve bunları AWS Amplify ile dağıtacağımızı öğrendik. İlk olarak, bir tepki uygulamasının nasıl modüler hale getirileceğini tartıştık.
*bileşenler* *sayfalar* klasörler. Ardından **AWS Amplify** hakkında bilgi edindik ve onunla statik ve veri odaklı uygulamaları nasıl dağıtacağımızı öğrendik. Son olarak, uygulamamızın alan adını özelleştirmek için **AWS Amplify Domain Management** ve **Google Domains ** kullanmayı öğrendik. **ve ve
Bu makale veya portföy sitem hakkında herhangi bir sorunuz, endişeniz veya geri bildiriminiz varsa, yorum yapmaktan veya bana şu adresten e-posta göndermekten çekinmeyin:
*
[email protected]*. Okuduğunuz için teşekkürler!
