= React uygulamanızı AWS ile 30 dakikada barındırma =
Bu eğitim, çok fazla görsel içerir ve tamamen yeni başlayanlara yöneliktir. React uygulamanızı eksiksiz bir yetkilendirme sistemiyle bir web sitesinde nasıl barındırabileceğinizi açıklar. Mobilehub CLI (Komut Satırı Arayüzü) aracılığıyla AWS MobileHub'ın gücünü kullanır. Öğretici, AWS hizmetleriyle ilgili herhangi bir beceri gerektirmez ve ayrıca size bir React ortak uygulama kurmayı gösterecektir.
Halihazırda bir React uygulamanız varsa,
** awsmobile-cli'yi yüklediğimiz ve uygulamamıza eklediğimiz 2. bölüme atlayabilirsiniz
= Başlamadan önce bilgisayarınızda ayarlanmış birkaç şeye ihtiyacımız var =
**Bilgisayarınızda yüklü olan Node 8.x ortamı**
- Bu, Javascript uygulama sunucuları için çalışma zamanı ortamıdır. Düğüm paket yöneticisi (NPM) ile devam eder.
- NPM, React, AWS Amplify, bir AWS-JS bağlayıcı paketi gibi düğüm paketlerini kurmak için kullanılır ve temelde budur.
- httpsnodejs.org/en/download/
**Bir AWS Ücretsiz Kullanım hesabı
- Ücretsiz Kullanım aracılığıyla AWS Hizmetlerine ücretsiz erişim elde edersiniz. Bu eğitim için, bu fazlasıyla yeterli olmalıdır. Ancak, her hizmetin her ay bir kullanım sınırı olduğunu ve bunun size gerçek paraya mal olabileceğini unutmayın.
- httpsaws.amazon.com/free/
**AWS hizmetlerini doğrudan konsolunuzdan aramak için AWS CLI'yi (Komut Satırı Arayüzü) kurun** **Bu kurs için, React'in yaratıcıları olan Facebook'tan sağlanan standart şablonu kullanacağız **Seçtiğiniz bir düzenleyici
- Çoğu programlama dilini ve çerçevesini çalıştırabilen, oldukça değiştirilebilir hafif bir düzenleyici olan Visual Studio Code ile başlamanızı öneririm.
Profesyonel ipucu: VS Code'un kurulum sürecinde, onu ortam yol adlarınıza ekleyen kutuyu işaretlediğinizden emin olun. Bu, âÃÂÃÂcode filename.jsâÃÂàveya âÃÂà yazarak terminalden açık VS Koduna erişmenizi sağlar. Âkodu .âÃÂàiçinde bulunduğunuz tüm proje için. **İçinde bulunduğunuz bir terminal. Âre rahat
- Çoğu geliştiricinin bilgisayarında Git yüklü olmalıdır. Bu, birçok geliştiricinin gitme terminali olan Git Bash'e erişmenizi sağlar.
Hadi başlayalım!
**1. React uygulamasını oluşturun ve terminal üzerinden proje klasörüne girin**
Terminale girin ve uygulamaları sakladığınız klasörünüzü bulun. âÃÂÃÂdevâÃÂàadlı bir klasör öneririm.
npx create-react-app proje adı&& cd proje adı
veya
npm -g install-react-app oluştur-react-app proje-adı oluştur
Burada ortak kullanıma dayalı bir React uygulaması oluşturuyoruz. âÃÂÃÂnpxâÃÂÃÂ, uzak paketleri çağırmak için npm sunucusunu kullanan bir Düğüm aracıdır. İkinci kod parçacığı, create-react-app ile yerel olarak yükler.
*npm -g install create-react-app* **ve ardından uygulamayı oluşturur. Create-react-app ile her zaman güncel olmak için npx kullanmanızı öneririm ve ardından uygulamayı oluşturur. Create-react-app ile her zaman güncel olmak için npx kullanmanızı öneririm. **2. awsmobile CLI'yi bilgisayarınıza kurun ve projede çalıştırın**
Bu noktadan itibaren kod editörünüzdeki React uygulamanıza dikkat etmelisiniz. /awsmobile gibi klasörler eklenecek ve package.json dosyasına bazı eklemeler yapılacak.
Bir terminal penceresinde şunu yazın
npm kurulum -g awsmobile-cli
awsmobile-cli'yi global olarak yüklemek için. AWS Mobile Hub konsolunda biraz çalıştıktan sonra bunu kullanacağız.
Projenizin içinde olduğunuzdan emin olun ve yazın
awsmobile başlangıç
Size varsayılanların iyi olduğu bir dizi soru sorulur, bu nedenle varsayılan tarayıcınızda AWS otomatik olarak açılana kadar her ayarda enter tuşuna basın. Henüz yapmadıysanız Ücretsiz Kullanım hesabınızla giriş yapın.
Bu, awsmobile-cli'ye doğru AWS hesabına bağlı olduğumuzu garanti eder. Terminalinize geri dönün ve devam etmek için Enter'a basın.
AWS'nin uygulamayı kontrol etmesi için bir kullanıcı ayarlaması gerekir. Bu, enter tuşuna basmaya devam ettiğinizde awsmobile-cli tarafından otomatik olarak yapılacaktır.
Bunu tamamladıktan sonra, AWS IAM'ye yönlendirileceksiniz ve burada sadece "Sonraki"olacaksınız. ¢ÃÂàtamlığa giden yolunuz! İkinci adımda, Kullanıcıya ihtiyacımız olan tüm AWS özelliklerine erişim sağlayan âÃÂÃÂYönetici ErişimiâÃÂàöğesini otomatik olarak kontrol etmiş olmalıdır.
İşiniz bittiğinde, gizli kimlik bilgilerinizle .csv dosyasını indirmeniz çok önemlidir çünkü bunlar AWS'de yalnızca bir kez görüntülenecektir. Bu tuşlar, terminal pencerenizin sonraki adımlarında kullanılacaktır.
Bu, AWS MobileHub uygulamanızı başarıyla oluşturur ve aws-amplify'ı otomatik olarak kurar& yerel React projenize aws-amplify-react
Bu işlem bittiğinde (~1 dk) yazabilirsiniz.
awsmobile konsolu
Mobile Hub uygulamanızı varsayılan tarayıcınızda görmek için. Farklı eylemlerin bir listesini görmek için âÃÂÃÂawsmobileâÃÂàyazabilirsiniz. Buradan, tarayıcıyla Cognito Login'i ekleyeceğiz, ancak bunu awsmobile CLI'den yapabilirsiniz.
**3. Aslında Cognito Oturum Açma ve Barındırma** ekleme
Son adım için AWS MobileHub Konsolu aracılığıyla AWS Cognito'yu projemize ekleyeceğiz. Varsayılan olarak etkinleştirilmiş olan Barındırma'ya da göz atabilirsiniz.
Barındırmayı test etmek için konsolunuzdaki özelliği tıklayın ve size sağlanan URL'yi tıklayın. Buradaki içerik AWS tarafından hazırlanmış bir şablondur, ancak yakında React uygulamasıyla bunun üzerine yazacaksınız.
**Cognito User Sign-in'i eklemek için aşağı kaydırarak "User Sign-in"i bulmak için aşağı kaydırın ve tıklayın. **Bu, bir kimlik doğrulama sistemi ile Cognito Kullanıcı Havuzlarını etkinleştirir. Girişinizde e-postayı kullanıcı adı olarak zorlamak için E-posta adresinden veya telefon numarasından âÃÂÃÂEmailâÃÂàkullanın. Veya Kullanıcı Adını kullanabilir ve âÃÂÃÂEmailâÃÂà+ âÃÂÃÂKullanıcı AdıâÃ'yi etkinleştirebilirsiniz. Âàkullanıcının seçmesine izin vermek için. Onay kodunu her iki şekilde de e-posta ile alacaksınız.
E-postayı kabul ediyoruz çünkü AWS, kayıt onay kodlarını e-postaya göndermek için ücret almazken, SMS göndermek gerçek paraya mal olur.
Sonuç olarak:
Eylem >Cognito'da Düzenle'ye tıklarsanız, Kullanıcılarınızı ve gelişmiş güvenlik özelliklerini yönetmek için Cognito konsolunu göreceksiniz. Bu adımda yaptığınız bazı kurulumlar geri alınamaz ancak kullanıcı havuzunuzu her zaman silip yeni bir tane oluşturabilirsiniz.
Bu, MobileHub içindeki AWS Cognito yapılandırmasını tamamlar. Kod ekleme zamanı. Ne kadar? 5 satır! Ve 3 tanesi React'te sadece import.
= Ayarlarınızı React projesine eklemek ve web sitenizde yayınlamak =
Terminalinizde, değişikliklerinizi sırasıyla AWS MobileHub Konsolundan uygulamanıza çekmek için awsmobile pull veya awsmobile Push'u istediğiniz zaman kullanabilir veya yerel değişikliklerinizi terminaldeki awsmobile CLI aracılığıyla gönderebilirsiniz.
Bu kullanım durumu için yaptığımız değişiklikleri getirmek istiyoruz. Terminalinize geri dönün ve yazın
VS Code'a geri döndüğünüzde, projenizin artık değiştirildiğini göreceksiniz. Yerel yapılandırmalarınızı ./awsmobile/backend/mobile-hub-project.yml adresinden kontrol edebilirsiniz.
Ayrıca, ./package.json'da, daha önce yaptığımız gibi awsmobile init tarafından eklenen iki vurgulanmış kitaplığı bulacaksınız.
Şimdi bunları, uygulamamızı bir Cognito oturum açma penceresinde sarmak için kullanacağız. ./src/index.js dosyasını açın ve şunu değiştirin:
buna:
React'i 'react'ten içe aktarın;
ReactDOM'u 'react-dom'dan içe aktarın;
index.css'i içe aktar';
Uygulamadan Uygulamayı içe aktar';
registerServiceWorker'ı registerServiceWorker'dan içe aktarın';
aws-exports'tan awsMobile'ı içe aktar';
Amplify'ı 'aws-amplify'dan içe aktarın;
"aws-amplify-react"Amplify.configure(awsMobile)'dan { withAuthenticator } içe aktarın;
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
