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
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront"></a>

*Jean-Baptiste Guillois, Amazon Web Services*

## Ringkasan
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-summary"></a>

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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html)).

## Prasyarat dan batasan
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-prereqs"></a>

**Prasyarat**
+ Aktif Akun AWS.
+ Node.js dan`npm`, diinstal dan dikonfigurasi. Untuk informasi selengkapnya, lihat bagian [Unduhan](https://nodejs.org/en/download/) pada dokumentasi Node.js.
+ Benang, dipasang dan dikonfigurasi. Untuk informasi selengkapnya, lihat [dokumentasi Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable).
+ Git, diinstal dan dikonfigurasi. Untuk informasi selengkapnya, lihat [dokumentasi Git](https://github.com/git-guides/install-git).

## Arsitektur
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-architecture"></a>

![Arsitektur untuk menerapkan SPA berbasis React ke Amazon S3 dan CloudFront](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/images/pattern-img/970a9d13-e8a2-44ac-aca5-a066e4be60e8/images/96061e05-8ac8-446e-b1da-baa6fc1cc7b6.png)


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
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-tools"></a>

**Layanan AWS**
+ [Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) membantu Anda membuat, menerbitkan, memelihara, memantau, dan mengamankan REST, HTTP, dan WebSocket APIs dalam skala apa pun.
+ [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)membantu Anda menyiapkan AWS sumber daya, menyediakannya dengan cepat dan konsisten, dan mengelolanya sepanjang siklus hidupnya di seluruh Akun AWS dan Wilayah.
+ [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) mempercepat distribusi konten web Anda dengan mengirimkannya melalui jaringan pusat data di seluruh dunia, yang menurunkan latensi dan meningkatkan kinerja.
+ [AWS CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html)membantu Anda mengaudit tata kelola, kepatuhan, dan risiko operasional Anda Akun AWS.
+ [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) membantu Anda memantau metrik sumber AWS daya Anda dan aplikasi yang Anda jalankan AWS secara real time.
+ [AWS Identity and Access Management (IAM)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) membantu Anda mengelola akses ke AWS sumber daya dengan aman dengan mengontrol siapa yang diautentikasi dan diberi wewenang untuk menggunakannya.
+ [Amazon Route 53](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) adalah layanan web DNS yang sangat tersedia dan dapat diskalakan.
+ [Amazon Simple Storage Service (Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/)) 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](https://github.com/aws-samples/react-cors-spa).

## Praktik terbaik
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-best-practices"></a>

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 container 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](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) untuk melindungi aset Anda dari serangan berbahaya.

## Epik
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-epics"></a>

### Membangun dan menerapkan aplikasi Anda secara lokal
<a name="locally-build-and-deploy-your-application"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Kloning repositori. | Jalankan perintah berikut untuk mengkloning repositori aplikasi sampel:<pre>git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa</pre> | Pengembang aplikasi, AWS DevOps | 
| Menyebarkan aplikasi secara lokal. | 1. Dalam direktori proyek, jalankan `npm install` perintah untuk memulai dependensi aplikasi. <br />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 | 

### Deploy aplikasi
<a name="deploy-the-application"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Menyebarkan AWS CloudFormation template. | 1. Masuk ke Konsol Manajemen AWS, lalu buka [AWS CloudFormation konsol](https://console.aws.amazon.com/cloudformation).<br />2. Pilih **Buat Tumpukan**, lalu pilih **Dengan sumber daya baru (standar)**.<br />3. Pilih **Mengunggah file template**.<br />4. **Pilih **Pilih file**, pilih `react-cors-spa-stack.yaml` file dari repositori kloning, lalu pilih Berikutnya.**<br />5. Masukkan nama untuk tumpukan Anda, lalu pilih **Berikutnya**.<br />6. Simpan semua opsi default, lalu pilih **Berikutnya**.<br />7. Tinjau pengaturan akhir untuk tumpukan Anda, lalu pilih **Buat tumpukan**. | Pengembang aplikasi, AWS DevOps | 
| Sesuaikan file sumber aplikasi Anda. | 1. Setelah tumpukan Anda digunakan, buka tab **Output** dan identifikasi `Bucket` nama dan `APIDomain` nilainya.<br />2. Salin domain CloudFront distribusi untuk REST API.<br />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](https://console.aws.amazon.com/s3/).<br />2. Identifikasi dan pilih bucket S3 yang dibuat sebelumnya oleh CloudFormation tumpukan.<br />3. Pilih **Unggah**, lalu pilih **Tambahkan file**.<br />4. Pilih konten `out` folder Anda.<br />5. Pilih **Tambah folder**, lalu pilih `_next` direktori.Pilih `_next` direktori, bukan isinya.<br />6. Pilih **Unggah** untuk mengunggah file dan direktori ke bucket S3 Anda. | Pengembang aplikasi, AWS DevOps | 

### Uji aplikasi
<a name="test-the-application"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Akses dan uji aplikasi. | Buka jendela browser, lalu tempel domain CloudFront distribusi (`SPADomain`output dari CloudFormation tumpukan yang Anda gunakan sebelumnya) untuk mengakses aplikasi. | Pengembang aplikasi, AWS DevOps | 

### Bersihkan sumber daya
<a name="clean-up-the-resources"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Hapus isi bucket S3. | 1. Buka [konsol Amazon S3](https://console.aws.amazon.com/s3/) dan pilih bucket yang dibuat sebelumnya oleh tumpukan (bucket pertama yang namanya dimulai dengan`react-cors-spa-`). <br />2. Pilih **Kosong** untuk menghapus isi bucket.<br />3. Pilih ember kedua yang dibuat sebelumnya oleh tumpukan (ember kedua yang namanya dimulai dengan `react-cors-spa-` dan diakhiri dengan`-logs`). <br />4. Pilih **Kosong** untuk menghapus isi bucket. | AWS DevOps, Pengembang aplikasi | 
| Hapus CloudFormation tumpukan. | 1. Buka [CloudFormation konsol](https://console.aws.amazon.com/cloudformation) dan pilih tumpukan yang Anda buat sebelumnya.<br />2. Pilih **Hapus** untuk menghapus tumpukan dan semua sumber daya terkait. | AWS DevOps, Pengembang aplikasi | 

## Sumber daya terkait
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-resources"></a>

Untuk menyebarkan dan meng-host aplikasi web Anda, Anda juga dapat menggunakan [AWS Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html), yang menyediakan alur kerja berbasis Git untuk hosting aplikasi web full-stack, tanpa server dengan penerapan berkelanjutan. Amplify Hosting adalah bagian dari [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html), 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
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-additional"></a>

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