= Cara Nggunakake AWS Amplify kanggo nyebarake Aplikasi React =
== Pandhuan kanggo nyebarake Aplikasi React karo AWS Amplify ==
Wiwit aku miwiti konsultasi minangka Software Engineer, aku pengin nggawe situs web portofolio sing nuduhake
proyek pribadi lan profesional sing wis dakgarap. Liburan musim dingin iki, aku ngentekake wektu kanggo ngrancang, ngembangake, lan nyebarake situs portofolio, lan ing artikel iki, aku bakal nuntun sampeyan babagan carane nggunakake AWS Amplify. Sampeyan bisa ndeleng situs web ing dan-murphy.com lan kode ing GitHub.
= Latar Singkat =
Umume pakaryan profesionalku mbutuhake mbangun aplikasi sing didorong data lan nyepetake saluran pipa data. Kanggo ngrampungake tugas kasebut, aku nggunakake Python lan Ruby kanthi rutin lan nggabungake JavaScript kanggo karya frontend. Ing upaya dadi luwih nyaman karo React, aku mutusake nggunakake kerangka kanggo mbangun situs web portofolio.
= Nggawe Aplikasi =
Langkah pisanan sing ditindakake yaiku mutusake carane nggawe struktur aplikasi. Aku digunakake
create-react-app minangka cithakan dhasar kanggo direktoriku, banjur nyusun ulang aplikasi kasebut kanthi sawetara folder tambahan. Persiyapan sing wis rampung katon kaya iki:
src
komponen
âÃÂÃÂarsip
âÃÂÃÂekstra
âÃÂÃÂdata
âÃÂÃÂimgs
kaca
âÃÂÃÂkonten
âÃÂÃÂdata
gaya
tes
perlengkapan
Sawetara owah-owahan sing penting yaiku
**komponen**
, lan
**kaca**
direktori.
**gaya**
,
: Iki ngendi aku nyimpen kabeh komponen kanggo aplikasi. Kanthi nyimpen komponen ing folder terpusat, iku luwih gampang kanggo nggunakake maneh lan refactor sandi kode lan liyane intuisi kanggo ngerti. Sawetara komponen sing nggawe situs web portofolioku yaiku
komponen
Header,
Footer, lan
ProjectSidebar.
: Iki ngendi aku mbangun kaca sing béda kanggo aplikasi. Aku ngimpor komponen needed saka
kaca
folder banjur agregat kanggo ngrancang kaca. Punika conto carane aku iki kanggo
kaca ngarep komponen:
: Iki ngendi aku nemtokake gaya CSS global kanggo aplikasi. Aku seneng nggunakake
gaya
gaya-komponen kanggo komponen individu, nanging aku uga nemokake Iku migunani kanggo mbangun gaya global sing kasedhiya kanggo saben kaca.
Pungkasan, kanggo nggawe peta panjalukan menyang kaca sing bener, kita nggunakake
nanggepi-router-dom. Rute ditetepake ing
File App.js kaya ing ngisor iki:
Iki bakal peta
kaca ngarep,
/ projects panjalukan kanggo
Halaman Proyek,
/ bab panjalukan kanggo
AboutPage, lan
/ rak buku panjalukan kanggo
Halaman Buku. Saiki pangembangan aplikasi wis rampung, kita kudu nyebarake supaya wong liya bisa nggunakake!
/ panjalukan kanggo
= Nggunakake AWS Amplify =
== Ringkesan ==
Ana sawetara cara kanggo nyebarake situs web React, nanging aku nemokake manawa salah sawijining sing paling gampang yaiku nggunakake.
**AWS Amplify Amplify diterangake minangka cara paling cepet lan paling gampang kanggo mbangun aplikasi seluler lan web kanthi skala. AWS ekstrapolasi kabeh komplikasi nyetel server, nginstal dependensi, lan nggawe produksi produksi situs web sampeyan, ngidini sampeyan mung fokus ing mbangun UX intuisi. Kanggo mangerteni sing luwih lengkap babagan apa sing ditawakake AWS Amplify kanggo aplikasi sing didhukung data (khususe, situs web kanthi **frontend** lan **backend mriksa dokumentasine.
== Nyambungake Repositori sampeyan ==
Kanggo dadi host aplikasi web ing AWS Amplify, sampeyan kudu nyambungake repositori sing ngemot kode sumber sampeyan. Kanggo nindakake iki, sampeyan bisa navigasi menyang
*AWS Amplify* *Miwiti* **Inang Aplikasi Webku banjur klik **Sambungake repo aplikasi *kaca, gulung menyang*kaca, gulung menyang 
Banjur, sampeyan bakal dialihake menyang kaca sing kapisah ing ngendi sampeyan bisa nyambungake repositori sing ngemot kode sumber sampeyan. Kanggo conto iki, aku bakal milih GitHub, nanging AWS Amplify uga ndhukung BitBucket, GitLab, AWS CodeCommit, lan malah nyebar tanpa panyedhiya Git.
Sawise otorisasi sukses, sampeyan bisa milih repositori sing pengin dipasang lan pilih cabang AWS Amplify sing kudu digunakake kanggo mbangun produksi.
Sawise iku, klik
**Sabanjure** lan AWS bakal njaluk sampeyan ngatur setelan *build* lan *test*. Cithakan dhasar sing diwenehake AWS kapacak ing ngisor iki.
versi: 1
ngarep:
fase:
prabangun:
dhawuh:
- npm nginstal mbangun:
dhawuh:
- npm run mbangun
artefak:
baseDirectory: mbangun
berkas:
-
cache:
dalan:
- modul_node
Kajaba iku, ing ngisor
**setelan majeng** toggle, sampeyan bisa nyetel variabel lingkungan lan wadhah mbangun adat.
Pungkasan, sawise mriksa setelan kanggo aplikasi sampeyan, klik
**Simpen lan Nyebarake **lan **AWS bakal miwiti ngatur lan masang aplikasi sampeyan. Nalika AWS rampung nyebarke, sampeyan bisa navigasi menyang kaca ngarep Amplify lan ndeleng aplikasi sing mentas disebarake AWS bakal miwiti ngatur lan masang aplikasi sampeyan. Nalika AWS rampung nyebarke, sampeyan bisa navigasi menyang kaca ngarep Amplify lan ndeleng aplikasi sing mentas disebarake.
Saiki, ayo ngatur URL nggunakake
** Manajemen domain AWS Amplify
== Nambahake Domain Kustom ==
Kanggo miwiti nambah domain khusus, navigasi menyang sidebar kiwa banjur pilih
**manajemen domain 
** manajemen domain ** setelan.
Banjur, pilih
**nambah domain **konfigurasi domain **ketik jeneng domain sampeyan (kaya sing kapacak ing ngisor iki), banjur klik**ketik jeneng domain sampeyan (kaya ing ngisor iki), banjur klik 
Sawise iki, sampeyan bisa nyetel pangalihan apa wae sing perlu kanggo domain sampeyan. Contone, ing conto ing ngisor iki, aku nggawe pangalihan saka httpsdan-murphy.com menyang httpswww.dan-murphy.com.
Pungkasan, sawise domain khusus sampeyan dikonfigurasi kanthi bener, AWS bakal menehi sampeyan a
** Sertifikat Validasi Sampeyan uga bisa ndeleng sertifikat iki ing konsol AWS Certificate Manager.
== Nambahake Rekam CNAME ==
Langkah pungkasan kanggo ngatur domain khusus sampeyan yaiku nambah rekaman CNAME. Ing conto ing ngisor iki, aku nggunakake Google Domains, nanging konsep dhasar tetep padha ing macem-macem registrar domain.
Pisanan, gulung mudhun menyang
**Catatan Sumber Daya Khusus** ing Google Domains. Nggawe *CNAME *rekaman sing nunjuk kabeh subdomain menyang domain AWS Amplify: Jeneng: ketik jeneng subdomain. Yen subdomain yaiku www.domain.com, ketik . Yen www app.domain.com, ketik app. Data: Ing kaca manajemen domain, klik Tindakan banjur pilih Ndeleng Rekam DNS. Banjur, ketik domain AWS Amplify sing kasedhiya ing Konfigurasi panyedhiya DNS. 
**Domains Management**page, pilih **Actions **View DNS Records**
Kabeh, rekaman sumber daya khusus bakal katon kaya ing ngisor iki:
Sabanjure, nambah siji maneh
*CNAME* rekaman sing nuduhake server validasi AWS Certificate Manager. AWS Certificate Manager sing wis divalidasi nangani TLS kanggo aplikasi sampeyan: Jeneng: ketik subdomain server validasi. Yen cathetan DNS kanggo verifikasi kepemilikan domain sampeyan yaiku _1234.example.com, ketik mung _1234. Data: ketik sertifikat validasi ACM. Yen server validasi _1234.abcdefg.acm-validations.aws., ketik _1234.abcdefg.acm-validations.aws.
Kabeh informasi kanggo Sertifikat Validasi ditemokake ing konsol AWS Certificate Manager. Sawise kapindho
*CNAME* ditambahake, cathetan khusus sampeyan kudu katon kaya iki: 
Pungkasan, ayo nambahake a
**Rekam Sintetis** kanggo nyiyapake subdomain maju: Subdomain: ketik URL Domain: www. 
= Bungkus =
Sakabèhé, ing artikel iki, kita sinau babagan carane nggawe Aplikasi React lan nyebarake karo AWS Amplify. Kaping pisanan, kita ngrembug babagan cara modularisasi aplikasi reaksi
*komponen* *kaca* folder. Banjur, kita sinau babagan **AWS Amplify** lan carane masang aplikasi statis lan data-driven karo iku. Pungkasan, kita sinau babagan nggunakake **AWS Amplify Domain Management** lan **Google Domains **kanggo ngatur domain aplikasi kita. **lan**lan
Yen sampeyan duwe pitakon, uneg-uneg, utawa saran babagan artikel iki utawa situs portofolioku, aja ragu-ragu menehi komentar utawa ngirim email menyang
*
[email protected]*. Matur nuwun kanggo maca!
