= Amazon S3'te React Uygulamalarını Dağıtın =
== React Apps'ın S3 ile nasıl dağıtılacağına ilişkin 5 dakikalık kılavuz ==
Yani React uygulamanızı tamamladınız ve onu bir yerde barındırmak istiyorsunuz. React uygulamalarınızı barındırmak için Amazon AWS S3'ü kullanabileceğinizi biliyor muydunuz? Nispeten kolay, düşük maliyetli ve kurulumu hızlıdır.
= Haydi başlayalım! =
== Önkoşullar ==
Barındırmaya geçmeden önce, yönetimsel kurulumu yapalım. Aşağıdakilerin tamamlandığından emin olun:
**Bir AWS Hesabınız var Bir AWS hesabı için buradan kaydolun: httpsaws.amazon.com/resources/create-account/ **AWS Konsolunda bir AWS Kullanıcısı oluşturun, IAM sekmesine gidin ve à öğesine gidin. Kenar çubuğunda ¢ÃÂÃÂKullanıcılarâÃÂàbölümü.
âÃÂÃÂKullanıcı EkleâÃÂàöğesine tıklayın ve âÃÂÃÂProgramatik erişimâàseçeneğini işaretleyin. ÃÂ.
âÃÂÃÂİleri: İzinlerâÃÂÃÂ'ye tıklayın ve burada âÃÂÃÂMevcut politikaları doğrudan ekleâÃ'yi seçin. ÂÃÂ. Dağıtım amacı için "Yönetici Erişimi"ni kontrol edin.
İleri düğmelerine tıklayın ve son olarak âÂÃÂKullanıcı oluşturâÃÂÃÂ'ye tıklayın.
Son adımda, bir Erişim anahtarı kimliği ve Gizli erişim anahtarı alıyoruz. İndir ve
**buna daha sonra ihtiyaç duyacağınız için bunları bilgisayarınıza kaydedin
== AWS CLI'yi kurun ==
AWS CLI, dağıtım sürecini basitleştirmemize yardımcı olabilecek güçlü bir araçtır.
Homebrew (macOS için) kullanarak AWS CLI'yi yükleyelim. Henüz yapmadıysanız Homebrew'u kurun.
*Not: Windows kullanıyorsanız talimatları resmi belgelerde * *burada* bulabilirsiniz
Terminalinizi açın ve girin
awscli'yi kurun.
CLI aracı yüklendikten sonra, AWS hesabımızı şununla yapılandırabiliriz:
aws yapılandırın. Daha önce indirdiğiniz erişim anahtarı bilgilerini girmeniz gereken yer burasıdır. Aşağıdaki gibi bir şey olmalıdır.
Bölge için AWS Konsolunda URL'nizi kontrol edebilirsiniz ve bölgenizden bahsedecektir. Örneğin, benimki âÃÂÃÂap-güneydoğu-1âÃÂÃÂ.
= Bir React Uygulaması Oluşturma =
React uygulamanızı dağıtmaya hazır hale getirmiş olabilirsiniz. Ancak örnek bir uygulamaya ihtiyacınız varsa aşağıdaki seçenekleri kullanabilirsiniz:
- Çalıştırarak standart bir React uygulaması oluşturun
npx oluştur-tepki-uygulama benim-uygulamam
- Örnek React uygulamamı (bir form örneğiyle birlikte) httpsgithub.com/harishv7/react-hook-form-example adresinden indirin. Bu, React uygulamalarına form eklemeye yönelik bir eğitim için yapıldı. Buradan kontrol edin.
Bittiğinde, bağımlılıkların tümünün kullanılarak yüklendiğinden emin olun.
yarn yükleyin ve uygulamayı kullanarak çalıştırın
iplik başlangıcı.
= Bir S3 Kovası Kurun =
Artık örnek uygulamamız hazır olduğuna göre, uygulamamızı barındırmak için bir S3 klasörü yapılandıralım.
AWS Konsolunda âÃÂÃÂS3âÃÂàifadesini arayın ve S3 Dashboard'a gidin. âÃÂÃÂPaket oluşturâÃÂàseçeneğine tıklayın ve gruba âÃÂÃÂmy-react gibi bir ad verin -app-2021âÃÂà(veya dilediğiniz herhangi bir şey).
*Not: Grup adı, S3'ün tamamında benzersiz olmalıdır. Bu yüzden var olmayan benzersiz bir ad seçin, aksi takdirde bir hata alırsınız!* 
Canlı olarak barındırdığımız için gruba genel erişimi açın.
Ayarların geri kalanını olduğu gibi bırakın ve "Paket oluştur"a tıklayın. S3 kontrol panelinizde aşağıdakine benzer bir giriş göreceksiniz.
Haydi tıklayın ve yeni oluşturulan S3 grubumuza gidelim.
âÃÂÃÂs âÃÂÃÂÖzelliklerâÃÂÃÂ'ye tıklayın ve istediğiniz yere kadar aşağı kaydırın bkz. âÃÂÃÂStatik web sitesi barındırmaâÃÂÃÂ.
âÃÂÃÂEtkinleştirâÃÂàöğesine tıklayın ve âÃÂÃÂindex.htmlâàgirin àDizin belgesi altında.
Diğer alanları aynı bırakın ve âÃÂÃÂDeğişiklikleri kaydetâÃÂÃÂ'ye tıklayın.
= S3'e dağıtım =
Artık uygulamamızı S3'e dağıtmaya hazırız. Bunu yapmanın yolu, aşağıdaki CLI komutunu kullanmaktır:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Bu komutu package.json dosyamıza da âÃÂÃÂdeployâÃÂàscripti olarak ekleyebiliriz.
Uygulamamızı kullanarak oluşturalım
Optimize edilmiş bir üretim yapısının oluşturulmasına yardımcı olan iplik yapısı.
Ardından, yukarıda verilen CLI komutunu çalıştıralım veya package.json'da yayın betiğinizi kurduysanız, kullanabiliriz
iplik dağıtımı.
İşte bu kadar, uygulamamız artık dağıtıldı!
Uygulamamızın nerede barındırıldığını (web sitesi bağlantısı) bulmak için AWS S3 konsoluna gidin ve oluşturduğunuz klasöre tıklayın.
âÃÂÃÂÖzelliklerâÃÂàsekmesine gidin ve âÃÂÃÂStatik web sitesine gidin hostingâÃÂàbölümü ve URL'miz orada olacak.
Üzerine tıklayın ve uygulamanız yeni bir sekmede açılacaktır. İşte benim!
= Sonuç =
React uygulamamızı başarıyla Amazon S3'e dağıttık! Bu, React prototiplerinizi hızlı bir şekilde dağıtmak, test etmek ve başkalarıyla paylaşmak için harika bir seçimdir. Dağıtımı da gerçekten kolay ve hızlıdır.
Umarım bu eğitim sizin için yararlı olmuştur!
Mutlu kodlama! ðÃÂÃÂû
*Daha fazla içerik için *plainenglish.io*
