= Mengehos aplikasi React anda dengan AWS dalam masa 30 minit =
Tutorial ini sangat berat imej dan disasarkan kepada pemula yang lengkap. Ia menerangkan cara anda boleh mengehoskan aplikasi React anda di tapak web, dengan sistem kebenaran yang lengkap. Ia menggunakan kuasa AWS MobileHub melalui Mobilehub CLI (Antara Muka Talian Perintah). Tutorial ini tidak memerlukan kemahiran dengan perkhidmatan AWS dan juga akan menunjukkan kepada anda untuk menyediakan aplikasi boilerplate React.
Jika anda sudah mempunyai aplikasi React,
**anda boleh melangkau ke bahagian 2 di mana kami memasang awsmobile-cli dan menambahkannya pada aplikasi kami
= Sebelum kita bermula, kita memerlukan beberapa perkara yang ditetapkan pada komputer anda =
**Persekitaran Node 8.x dipasang pada komputer anda**
- Ini ialah persekitaran masa jalan untuk pelayan aplikasi Javascript. Ia diikuti dengan pengurus pakej nod (NPM).
- NPM digunakan untuk memasang pakej nod seperti React, AWS Amplify, pakej penyambung AWS-JS dan itu pada asasnya.
- httpsnodejs.org/en/download/
**Akaun Peringkat Percuma AWS
- Anda mendapat akses percuma kepada Perkhidmatan AWS melalui Peringkat Percuma. Untuk tutorial ini, ini sepatutnya lebih daripada cukup. Walau bagaimanapun, ingat bahawa setiap perkhidmatan mempunyai had penggunaan setiap bulan dan ini mungkin membebankan anda dengan wang sebenar.
- httpsaws.amazon.com/free/
**Pasang AWS CLI (Antara Muka Talian Perintah) untuk memanggil perkhidmatan AWS terus dari konsol anda** **Untuk kursus ini kami akan menggunakan boilerplate yang diselenggara daripada Facebook, pencipta React **Seorang editor pilihan anda
- Saya cadangkan bermula dengan Visual Studio Code, editor ringan yang boleh diubah suai yang boleh menjalankan kebanyakan bahasa pengaturcaraan dan rangka kerja.
Petua pro:Dalam proses pemasangan Kod VS, pastikan tandai kotak yang menambahkannya pada nama laluan persekitaran anda. Ini memberi anda akses untuk membuka Kod VS dari terminal dengan menaip âÃÂÃÂnama fail kod.jsâÃÂàatau âÃÂÃ. Âkod .âÃÂàuntuk keseluruhan projek yang anda gunakan. **Terminal yang anda ¢ÃÂà Âselesa dalam
- Kebanyakan pembangun sepatutnya memasang Git pada komputer mereka. Ini memberi anda akses kepada Git Bash yang merupakan terminal pergi ke banyak pembangun.
Mari kita mulakan!
**1. Buat aplikasi React dan masukkan folder projek melalui terminal**
Masukkan terminal dan cari folder anda tempat anda menyimpan aplikasi. Saya cadangkan folder bernama âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app nama projek&& nama projek cd
atau
npm -g pasang create-react-app create-react-app nama projek
Di sini kami mencipta aplikasi React berdasarkan boilerplate. âÃÂÃÂnpxâÃÂàialah alat Nod yang menggunakan pelayan npm untuk memanggil pakej jauh. Coretan kod kedua memasang apl cipta-reaksi secara setempat dengan
*npm -g install create-react-app* **dan kemudian buat aplikasi. Saya cadangkan menggunakan npx untuk sentiasa dikemas kini dengan create-react-appand kemudian mencipta aplikasi. Saya cadangkan menggunakan npx untuk sentiasa terkini dengan create-react-app. **2. Pasang awsmobile CLI pada komputer anda dan jalankannya dalam projek**
Dari sudut ini, anda harus memberi perhatian kepada aplikasi React anda dalam editor kod anda. Akan ada folder tambahan seperti /awsmobile dan beberapa tambahan pada fail package.json.
Dalam tetingkap terminal, taip
npm install -g awsmobile-cli
untuk memasang awsmobile-cli secara global. Kami akan menggunakan ini selepas melakukan beberapa kerja dalam konsol AWS Mobile Hub.
Pastikan anda berada di dalam projek anda dan taip
awsmobile init
Anda digesa dengan satu set soalan, yang mana lalainya bagus jadi tekan enter melalui setiap tetapan sehingga ia membuka AWS secara automatik dalam penyemak imbas lalai anda. Log masuk dengan akaun Peringkat Percuma anda jika anda belum melakukannya.
Ini memastikan awsmobile-cli bahawa kami disambungkan ke akaun AWS yang betul. Kembali ke terminal anda dan Tekan Enter untuk meneruskan.
AWS perlu menyediakan pengguna untuk mengawal aplikasi. Ini akan dilakukan secara automatik oleh awsmobile-cli apabila anda terus menekan enter.
Selepas melengkapkan ini, anda akan dibawa ke AWS IAM di mana anda akan âÃÂÃÂSeterusnya ¢ÃÂàjalan anda untuk mencapai kesempurnaan! Dalam langkah kedua, ia sepatutnya secara automatik menyemak âÃÂÃÂAdministrator AccessâÃÂàyang memberikan Pengguna akses kepada semua ciri AWS yang kami perlukan.
Apabila selesai, amat penting anda memuat turun fail .csv dengan bukti kelayakan rahsia anda kerana ia hanya akan dipaparkan sekali dalam AWS. Kekunci ini akan digunakan dalam langkah seterusnya tetingkap terminal anda.
Ini berjaya mencipta aplikasi AWS MobileHub anda dan memasang aws-amplify secara automatik& aws-amplify-react ke dalam projek React tempatan anda
Apabila proses ini selesai (~1 min) anda boleh menaip
konsol awsmobile
untuk melihat aplikasi Hab Mudah Alih anda dalam penyemak imbas lalai anda. Anda juga boleh menaip âÃÂÃÂawsmobileâÃÂàuntuk melihat senarai tindakan yang berbeza. Dari sini, kami akan menambah Log Masuk Cognito dengan penyemak imbas, tetapi anda boleh melakukannya dari awsmobile CLI.
**3. Sebenarnya menambahkan Log Masuk dan Pengehosan Cognito**
Untuk langkah terakhir, kami akan menambahkan AWS Cognito pada projek kami melalui AWS MobileHub Console. Anda juga boleh menyemak Hosting yang telah didayakan secara lalai.
Untuk menguji Hosting, klik ciri dalam konsol anda dan klik URL yang telah anda sediakan. Kandungan di sini ialah templat oleh AWS, tetapi anda akan menimpanya dengan aplikasi React tidak lama lagi.
**Untuk menambah Log Masuk Pengguna Cognito, tatal ke bawah untuk mencari âÃÂÃÂLog Masuk PenggunaâÃÂàdan klik padanya. **Ini membolehkan Kumpulan Pengguna Cognito dengan sistem pengesahan. Gunakan âÃÂÃÂEmelâÃÂàdari alamat E-mel atau nombor telefon untuk memaksa e-mel sebagai nama pengguna dalam log masuk anda. Atau anda boleh menggunakan Nama Pengguna dan dayakan âÃÂÃÂE-melâÃÂà+ âÃÂÃÂNama Penggunaâà Âàuntuk membenarkan pengguna memilih. Anda akan menerima kod pengesahan melalui e-mel sama ada cara.
Kami menerima e-mel kerana AWS tidak mengenakan bayaran untuk menghantar kod pengesahan pendaftaran ke e-mel, sementara ia memerlukan wang sebenar untuk menghantar SMS.
Yang menghasilkan:
Jika anda mengklik Tindakan >Edit dalam Cognito, anda akan melihat konsol Cognito untuk mengurus Pengguna anda dan ciri keselamatan lanjutan. Beberapa persediaan yang anda lakukan dalam langkah ini tidak boleh diterbalikkan tetapi anda sentiasa boleh memadamkan kumpulan pengguna anda dan membuat yang baharu.
Ini melengkapkan konfigurasi AWS Cognito di dalam MobileHub. Sudah tiba masanya untuk menambah kod. Berapa banyak? 5 baris! Dan 3 daripadanya hanya import dalam React.
= Menambah tetapan anda pada projek React dan menerbitkan ke tapak web anda =
Di terminal anda, anda boleh pada bila-bila masa menggunakan awsmobile pull atau awsmobile push untuk masing-masing menarik perubahan anda daripada AWS MobileHub Console ke aplikasi anda, atau menolak perubahan setempat anda dilakukan melalui awsmobile CLI dalam terminal.
Untuk kes penggunaan ini, kami ingin mengambil perubahan yang kami buat. Kembali ke terminal anda dan taip
Kembali dalam Kod VS, anda akan melihat bahawa projek anda kini telah diubah suai. Anda boleh menyemak konfigurasi setempat anda dalam ./awsmobile/backend/mobile-hub-project.yml
Selain itu, dalam ./package.json anda akan mendapati dua perpustakaan yang diserlahkan ditambah oleh awsmobile init yang kami lakukan sebelum ini.
Kami kini akan menggunakan ini untuk membungkus aplikasi kami dalam tetingkap log masuk Cognito. Buka ./src/index.js dan ubah suai ini:
untuk ini:
import React daripada 'react';
import ReactDOM daripada 'react-dom';
import index.css';
import Apl daripada Apl';
import registerServiceWorker dari registerServiceWorker';
import awsMobile daripada aws-exports';
import Amplify daripada 'aws-amplify';
import { withAuthenticator } daripada "aws-amplify-react"Amplify.configure(awsMobile);
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
