Menerapkan aplikasi satu halaman berbasis React ke Amazon S3 dan CloudFront - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanArsitekturAlatPraktik terbaikEpikSumber daya terkaitInformasi tambahan

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menerapkan aplikasi satu halaman berbasis React ke Amazon S3 dan CloudFront

Jean-Baptiste Guillois, Amazon Web Services

Ringkasan

Aplikasi satu halaman (SPA) adalah situs web atau aplikasi web yang secara dinamis memperbarui konten halaman web yang ditampilkan dengan menggunakan. JavaScript APIs Pendekatan ini meningkatkan pengalaman pengguna dan kinerja situs web karena hanya memperbarui data baru alih-alih memuat ulang seluruh halaman web dari server.

Pola ini memberikan step-by-step pendekatan untuk mengkodekan dan menghosting SPA yang ditulis dalam React di Amazon Simple Storage Service (Amazon S3) dan Amazon. CloudFront SPA dalam pola ini menggunakan REST API yang dikonfigurasi di Amazon API Gateway dan diekspos melalui CloudFront distribusi Amazon untuk menyederhanakan manajemen berbagi sumber daya lintas asal (CORS).

Prasyarat dan batasan

Prasyarat

  • Aktif Akun AWS.

  • Node.js dannpm, diinstal dan dikonfigurasi. Untuk informasi selengkapnya, lihat bagian Unduhan pada dokumentasi Node.js.

  • Benang, dipasang dan dikonfigurasi. Untuk informasi selengkapnya, lihat dokumentasi Yarn.

  • Git, diinstal dan dikonfigurasi. Untuk informasi selengkapnya, lihat dokumentasi Git.

Arsitektur

Arsitektur untuk menerapkan SPA berbasis React ke Amazon S3 dan CloudFront

Arsitektur ini secara otomatis digunakan dengan menggunakan AWS CloudFormation (infrastruktur sebagai kode). Ini menggunakan layanan Regional seperti Amazon S3 untuk menyimpan aset statis dan Amazon CloudFront dengan Amazon API Gateway untuk mengekspos titik akhir API Regional (REST). Log aplikasi dikumpulkan dengan menggunakan Amazon CloudWatch. Semua panggilan AWS API diaudit di AWS CloudTrail. Semua konfigurasi keamanan (misalnya, identitas dan izin) dikelola di AWS Identity and Access Management (IAM). Konten statis dikirimkan melalui jaringan pengiriman CloudFront konten Amazon (CDN), dan kueri DNS ditangani oleh Amazon Route 53.

Alat

Layanan AWS

  • Amazon API Gateway membantu Anda membuat, menerbitkan, memelihara, memantau, dan mengamankan REST, HTTP, dan WebSocket APIs dalam skala apa pun.

  • AWS CloudFormationmembantu Anda menyiapkan AWS sumber daya, menyediakannya dengan cepat dan konsisten, dan mengelolanya sepanjang siklus hidupnya di seluruh Akun AWS dan Wilayah.

  • Amazon CloudFront mempercepat distribusi konten web Anda dengan mengirimkannya melalui jaringan pusat data di seluruh dunia, yang menurunkan latensi dan meningkatkan kinerja.

  • AWS CloudTrailmembantu Anda mengaudit tata kelola, kepatuhan, dan risiko operasional Anda Akun AWS.

  • Amazon CloudWatch membantu Anda memantau metrik sumber AWS daya Anda dan aplikasi yang Anda jalankan AWS secara real time.

  • AWS Identity and Access Management (IAM) membantu Anda mengelola akses ke AWS sumber daya dengan aman dengan mengontrol siapa yang diautentikasi dan diberi wewenang untuk menggunakannya.

  • Amazon Route 53 adalah layanan web DNS yang sangat tersedia dan dapat diskalakan.

  • Amazon Simple Storage Service (Amazon S3) adalah layanan penyimpanan objek berbasis cloud yang membantu Anda menyimpan, melindungi, dan mengambil sejumlah data.

Kode

Contoh kode aplikasi pola ini tersedia di repositori aplikasi satu halaman CORS GitHub berbasis React.

Praktik terbaik

Dengan menggunakan penyimpanan objek Amazon S3, Anda dapat menyimpan aset statis aplikasi Anda dengan cara yang aman, sangat tangguh, berkinerja, dan hemat biaya. Tidak perlu menggunakan wadah khusus atau instans Amazon Elastic Compute Cloud (Amazon EC2) untuk tugas ini.

Dengan menggunakan jaringan pengiriman CloudFront konten Amazon, Anda dapat mengurangi latensi yang mungkin dialami pengguna saat mereka mengakses aplikasi Anda. Anda juga dapat melampirkan firewall aplikasi web (AWS WAF) untuk melindungi aset Anda dari serangan berbahaya.

Epik

TugasDeskripsiKeterampilan yang dibutuhkan

Kloning repositori.

Jalankan perintah berikut untuk mengkloning repositori aplikasi sampel:

git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
Pengembang aplikasi, AWS DevOps

Menyebarkan aplikasi secara lokal.

  1. Dalam direktori proyek, jalankan npm install perintah untuk memulai dependensi aplikasi. 

  2. Jalankan yarn dev perintah untuk memulai aplikasi secara lokal. 

Pengembang aplikasi, AWS DevOps

Akses aplikasi secara lokal.

Buka jendela browser dan masukkan http://localhost:3000 URL untuk mengakses aplikasi.

Pengembang aplikasi, AWS DevOps
TugasDeskripsiKeterampilan yang dibutuhkan

Menyebarkan AWS CloudFormation template.

  1. Masuk ke AWS Management Console, lalu buka AWS CloudFormation konsol.

  2. Pilih Buat Tumpukan, lalu pilih Dengan sumber daya baru (standar).

  3. Pilih Mengunggah file template.

  4. Pilih Pilih file, pilih react-cors-spa-stack.yaml file dari repositori kloning, lalu pilih Berikutnya.

  5. Masukkan nama untuk tumpukan Anda, lalu pilih Berikutnya.

  6. Simpan semua opsi default, lalu pilih Berikutnya.

  7. Tinjau pengaturan akhir untuk tumpukan Anda, lalu pilih Buat tumpukan.

Pengembang aplikasi, AWS DevOps

Sesuaikan file sumber aplikasi Anda.

  1. Setelah tumpukan Anda dikerahkan, buka tab Output dan identifikasi Bucket nama dan APIDomain nilainya.

  2. Salin domain CloudFront distribusi untuk REST API.

  3. Arahkan ke<project_root>/src/pages/index.tsx, lalu masukkan atau tempel domain ini ke nilai APIEndPoint variabel pada baris 13 index.tsx file.

Pengembang aplikasi

Bangun paket aplikasi.

Di direktori proyek Anda, jalankan yarn build perintah untuk membangun paket aplikasi.

Pengembang aplikasi

Menyebarkan paket aplikasi.

  1. Buka konsol Amazon S3.

  2. Identifikasi dan pilih bucket S3 yang dibuat sebelumnya oleh CloudFormation tumpukan.

  3. Pilih Unggah, lalu pilih Tambahkan file.

  4. Pilih konten out folder Anda.

  5. Pilih Tambah folder, lalu pilih _next direktori.

    penting

    Pilih _next direktori, bukan isinya.

  6. Pilih Unggah untuk mengunggah file dan direktori ke bucket S3 Anda.

Pengembang aplikasi, AWS DevOps
TugasDeskripsiKeterampilan yang dibutuhkan

Akses dan uji aplikasi.

Buka jendela browser, lalu tempel domain CloudFront distribusi (SPADomainoutput dari CloudFormation tumpukan yang Anda gunakan sebelumnya) untuk mengakses aplikasi.

Pengembang aplikasi, AWS DevOps
TugasDeskripsiKeterampilan yang dibutuhkan

Hapus isi bucket S3.

  1. Buka konsol Amazon S3 dan pilih bucket yang dibuat sebelumnya oleh tumpukan (bucket pertama yang namanya dimulai denganreact-cors-spa-). 

  2. Pilih Kosong untuk menghapus isi bucket.

  3. Pilih ember kedua yang dibuat sebelumnya oleh tumpukan (ember kedua yang namanya dimulai dengan react-cors-spa- dan diakhiri dengan-logs).

  4. Pilih Kosong untuk menghapus isi bucket.

AWS DevOps, Pengembang aplikasi

Hapus AWS CloudFormation tumpukan.

  1. Buka AWS CloudFormation konsol dan pilih tumpukan yang Anda buat sebelumnya.

  2. Pilih Hapus untuk menghapus tumpukan dan semua sumber daya terkait.

AWS DevOps, Pengembang aplikasi

Sumber daya terkait

Untuk menyebarkan dan meng-host aplikasi web Anda, Anda juga dapat menggunakan AWS Amplify Hosting, yang menyediakan alur kerja berbasis Git untuk hosting aplikasi web full-stack, tanpa server dengan penerapan berkelanjutan. Amplify Hosting adalah bagian dari AWS Amplify, yang menyediakan seperangkat alat dan fitur yang dibuat khusus yang memungkinkan pengembang web dan seluler frontend untuk membangun aplikasi full-stack dengan cepat dan mudah. AWS

Informasi tambahan

Untuk menangani URLs permintaan yang tidak valid oleh pengguna yang mungkin menghasilkan 403 kesalahan, halaman kesalahan kustom yang dikonfigurasi dalam CloudFront distribusi menangkap 403 kesalahan dan mengarahkannya ke titik masuk aplikasi (). index.html

Untuk menyederhanakan pengelolaan CORS, REST API diekspos melalui distribusi. CloudFront