Cara Saya Menggunakan Aplikasi React Saya pada AWS Cloud Snd CloudFront – Panduan Lengkap

Menggunakan aplikasi React ke AWS S3 dan CloudFront: Panduan Langkah demi Langkah

Panduan ini membimbing anda melalui penggunaan aplikasi React anda ke Amazon S3 untuk hosting statik dan menggunakan CloudFront untuk penghantaran kandungan.

Langkah 1: Bermula

sebelum anda memulakan, pastikan anda mempunyai:

1. node.js dan npm dipasang secara tempatan.
2. akaun AWS dengan keistimewaan pentadbir.

Langkah 2: Membina Aplikasi React anda

Buka terminal anda.
1. Buat aplikasi React baru menggunakan Vite:
(ganti
2. dengan nama yang anda inginkan). npm create vite@latest <your_project_name> <your_project_name> navigasi ke direktori projek:
3. cd <your_project_name>

Langkah 3: Pengesahan dan Bina

Mulakan pelayan pembangunan untuk menguji: . Akses aplikasi anda di

.

1. Hentikan pelayan pembangunan (Ctrl C). npm start http://localhost:3000 Bangun aplikasi anda untuk pengeluaran:
. Ini mencipta folder
2. yang mengandungi fail yang dioptimumkan.
3. npm run build build/

Langkah 4: Menyediakan baldi S3

Dalam konsol pengurusan AWS, menavigasi ke perkhidmatan S3. Buat baldi baru, memberikan nama yang unik (mis.,

).

1. Pilih rantau dan buat baldi.
2. <your_unique_bucket_name>
Langkah 5: Membolehkan Hosting Laman Web Statik di S3

Pilih baldi yang baru dibuat.

pergi ke tab "Properties".

di bawah "hosting laman web statik," membolehkannya.

1. Tetapkan "Dokumen Indeks" dan "Dokumen Ralat" ke
.
Simpan perubahan.
4. index.html
5. Langkah 6: Mengkonfigurasi Kebenaran Bucket

1. Navigasi ke tab "Kebenaran".
2. edit dasar baldi. Pastikan polisi membolehkan akses awam ke laman web anda (pertimbangkan implikasi keselamatan dan menyesuaikan dengan sewajarnya untuk persekitaran pengeluaran).
3. Simpan dasar. Uji penggunaan anda dengan mengakses URL Bucket S3 di penyemak imbas anda.

Langkah 7: Menguji Penyebaran S3

mengakses aplikasi anda yang digunakan melalui URL S3 (mis.,

). http://<your_unique_bucket_name>.s3-website-.amazonaws.com/

Langkah 8: Mengkonfigurasi Cloudfront untuk CDN

Dalam Konsol Pengurusan AWS, navigasi ke perkhidmatan Cloudfront.

1. Buat taburan baru. Pilih "Web" sebagai kaedah penghantaran.
2. Konfigurasikan tetapan asal, menunjuk ke titik akhir baldi S3 anda.
3. Tetapkan dasar protokol penonton untuk "mengalihkan http ke https."
4. Buat pengedaran.

Langkah 9: Menguji Deployment CloudFront

Setelah pengedaran CloudFront digunakan, akses aplikasi anda melalui URL Cloudfront.

Kesimpulan

Anda telah berjaya menggunakan aplikasi React anda ke AWS S3 dan CloudFront! Aplikasi anda kini disampaikan melalui CDN, memastikan ketersediaan yang tinggi dan prestasi yang dioptimumkan untuk pengguna di seluruh dunia. Ingatlah untuk menggantikan nama dan kawasan baldi tempat dengan nilai sebenar anda. Sentiasa mengutamakan amalan terbaik keselamatan semasa menggunakan pengeluaran.

Atas ialah kandungan terperinci Cara Saya Menggunakan Aplikasi React Saya pada AWS Cloud Snd CloudFront – Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!