= Sebarkan Aplikasi React pada Amazon S3 =

== Panduan 5 minit tentang cara menggunakan Aplikasi React dengan S3 ==

![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

Jadi anda telah melengkapkan apl React anda dan anda sedang mencari untuk mengehoskannya di suatu tempat. Adakah anda tahu anda boleh menggunakan Amazon AWS S3 untuk mengehoskan apl React anda? Ia agak mudah, kos rendah dan cepat untuk digunakan.

= Mari kita mulakan! =

== Prasyarat ==

Sebelum kita pergi ke pengehosan, mari kita selesaikan persediaan pentadbiran. Pastikan perkara berikut dilengkapkan:

**Anda mempunyai Akaun AWS Daftar untuk akaun AWS di sini: httpsaws.amazon.com/resources/create-account/ **Buat Pengguna AWS Dalam AWS Console, pergi ke tab IAM dan pergi ke à ¢ÃÂÃÂPenggunaâÃÂàbahagian pada bar sisi.

Klik pada âÃÂÃÂTambah PenggunaâÃÂàdan semak âÃÂÃÂAkses terprogramâàÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

Klik âÃÂÃÂSeterusnya: KebenaranâÃÂàdan di sini pilih âÃÂÃÂLampirkan dasar sedia ada secara terusâà ÂÃÂ. Semak âÃÂÃÂAdministratorAccessâÃÂàuntuk tujuan penempatan.

![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

Klik melalui butang Seterusnya dan akhirnya klik pada âÃÂÃÂCreate userâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)

Pada langkah terakhir, kami menerima ID kunci Akses dan kunci akses Rahsia. Muat turun dan

**simpannya ke komputer anda kerana anda akan memerlukannya kemudian

== Pasang AWS CLI ==

AWS CLI ialah alat berkuasa yang boleh membantu kami memudahkan proses penggunaan.

Mari pasang AWS CLI menggunakan Homebrew (untuk macOS). Pasang Homebrew jika anda belum melakukannya.

*Nota: Jika anda menggunakan Windows, anda boleh mendapatkan arahan pada dokumen rasmi * *di sini*

Buka terminal anda, dan masukkan

brew pasang awscli.

Setelah alat CLI dipasang, kami boleh mengkonfigurasi akaun AWS kami dengan

konfigurasi aws. Di sinilah anda perlu memasukkan maklumat kunci akses yang anda muat turun sebelum ini. Ia sepatutnya seperti berikut.

Untuk wilayah, anda boleh menyemak URL anda pada AWS Console dan ia akan menyebut wilayah anda. Contohnya, saya ialah âÃÂÃÂap-tenggara-1âÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= Mencipta Apl React =

Anda mungkin sudah mempunyai apl React anda sedia untuk digunakan. Walau bagaimanapun, jika anda memerlukan aplikasi sampel, anda boleh menggunakan pilihan berikut:

- Hasilkan aplikasi Boilerplate React dengan menjalankan

npx create-react-app my-app

- Muat turun contoh aplikasi React saya (dengan contoh borang) daripada httpsgithub.com/harishv7/react-hook-form-example. Ini dilakukan untuk tutorial menambah borang pada aplikasi React. Semak di sini.

Setelah selesai, pastikan kebergantungan semuanya dipasang menggunakan

pasang benang dan berikan apl itu menggunakan

permulaan benang.

= Sediakan Baldi S3 =

Memandangkan kami telah menyediakan aplikasi sampel kami, mari konfigurasikan baldi S3 untuk mengehoskan apl kami.

Pada AWS Console, cari âÃÂÃÂS3âÃÂàdan pergi ke Papan Pemuka S3. Klik pada âÃÂÃÂCreate baldiâÃÂàdan berikan baldi itu nama seperti âÃÂÃÂmy-react -app-2021âÃÂà(atau apa-apa lagi yang anda mahukan).

*Nota: Nama baldi mestilah unik di seluruh S3. Jadi pilih nama unik yang tidak wujud, jika tidak, anda akan mendapat ralat!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

Hidupkan akses awam kepada baldi kerana kami menganjurkannya secara langsung.

![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

Biarkan selebihnya tetapan sebagai tetapan dan klik âÃÂÃÂCipta baldiâÃÂÃÂ. Anda akan melihat entri seperti berikut pada papan pemuka S3 anda.

![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

Mari kita klik dan masuk ke baldi S3 kami yang baru dibuat.

![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

Mari âÃÂÃÂs klik pada âÃÂÃÂPropertiesâÃÂàdan tatal sehingga ke bawah di mana anda akan lihat âÃÂÃÂPenghosan tapak web statikâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

Klik pada âÃÂÃÂEnableâÃÂàdan masukkan âÃÂÃÂindex.htmlâààdi bawah dokumen Indeks.

![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

Biarkan medan lain sama dan klik pada âÃÂÃÂSimpan perubahanâÃÂÃÂ.

= Menggunakan ke S3 =

Kini, kami bersedia untuk menggunakan apl kami ke S3. Cara untuk melakukannya ialah menggunakan arahan CLI berikut:

aws s3 sync build/ s3your-bucket-name>--acl public-read
Kami boleh menambah arahan ini pada fail package.json kami juga sebagai skrip âÃÂÃÂdeployâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

Mari buat apl kami menggunakan

binaan benang yang membantu menghasilkan binaan pengeluaran yang dioptimumkan.

Seterusnya, mari jalankan arahan CLI yang diberikan di atas atau jika anda telah menyediakan skrip terbitan anda dalam package.json, kami boleh menggunakan

penyebaran benang.

![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

Itu sahaja, apl kami kini digunakan!

Untuk mengetahui tempat apl kami dihoskan (pautan tapak web), pergi ke konsol AWS S3 dan klik pada baldi yang anda buat.

Pergi ke tab âÃÂÃÂPropertiesâÃÂàdan tatal ke bawah sehingga ke laman web âÃÂÃÂStatic bahagian hostingâÃÂàdan URL kami akan berada di sana.

![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

Klik padanya dan apl anda akan dibuka dalam tab baharu. Ini saya punya!

![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

= Kesimpulan =

Kami telah berjaya menggunakan aplikasi React kami ke Amazon S3! Ini ialah pilihan yang bagus untuk menggunakan dan menguji prototaip React anda dengan cepat dan berkongsinya dengan orang lain. Ia juga sangat mudah dan pantas untuk digunakan.

Semoga tutorial ini berguna untuk anda!

Selamat mengekod! ðÃÂÃÂû

*Lagi kandungan di * *plainenglish.io*