Deploy Aplikasi React ke CloudFront

Di artikel ini saya akan membahas bagaimana caranya untuk deploy aplikasi React kita ke CloudFront. Deploy ini hanya bisa dilakukan untuk aplikasi React yang berbasis SPA (Single Page Application) atau Client Side Rendering karena proses buildnya akan menghasilkan static files yang nantinya dapat kita upload ke S3 (Amazon Simple Storage Service).

Buat Project React

Kali ini saya akan membuat project React dengan menggunakan yarn dan vite.

yarn create vite

Kemudian bisa diisi saja opsi-opsinya sesuai dengan yang diinginkan, misalnya:

• Name: react-cloudfront
• Framework: React
• Variant: TypeScript

Install Dependencies & Build

cd react-cloudfront
yarn
yarn build

hasil buildnya akan ada di folder dist.

Upload ke S3

Login ke console AWS dan cari menu S3.

Buat Bucket S3

Klik button Create Bucket.

Kemudian Bucket name nya bisa diisi sesuai dengan yang diinginkan misalnya frontend-cloudfront-tutorial dan AWS Region nya Asia Pacific (Singapore) ap-southeast-1. Setelah itu scroll ke paling bawah dan klik Create bucket.

Upload Hasil Build

Setelah itu kita akan upload hasil build yang ada di folder dist ke bucket frontend-cloudfront-tutorial caranya:

• Buka bucket frontend-cloudfront-tutorial.
• Klik button Upload.
• Klik button Add folder.
• Pilih folder dist yang ada di project yang telah kita buat (react-cloudfront/dist).
• Submit dengan klik button Upload.

Deploy ke CloudFront

Cari menu CloudFront.

Create Distribution

Klik button Create distribution dan selanjutnya:

• Origin domain kita pilih bucket S3 yang sudah kita buat.
• Origin path diisi /dist (Lokasi folder aplikasi).

Untuk Origin access pilih yang Origin access control settings (recommended) kemudian klik Create control setting dan klik Create.

Setelah itu

• Viewer protocol policy diganti ke Redirect HTTP to HTTPS supaya selalu https agar lebih aman 😁.
• Default root object diisi dengan /index.html.
• Scroll ke paling bawah dan klik Create distribution.

Ubah S3 Bucket Policy

Setelah itu akan muncul notifikasi sukses membuat distribution baru. Kemudian:

• Klik Copy Policy.
• Klik Go to S3 bucket permissions to update policy.
• Klik button Edit pada Bucket Policy seperti gambar dibawah ini.

Kemudian Policy yang sudah dicopy tadi dipaste ke kolom Policy kemudian klik Save changes.

Ini berguna untuk security, jadi hanya CloudFront distribution yang telah kita buat yang dapat mengakses bucket S3 frontend-cloudfront-tutorial.

Selanjutnya kita coba buka link cloudfront yang bisa dilihat pada menu detail CloudFront distribution yang telah kita buat (https://***.cloudfront.net).

Selamat, kita telah berhasil deploy aplikasi React kita ke CloudFront. Tapi ada satu hal lagi yang belum terselesaikan yaitu jika aplikasi React kita ada menggunakan React Router maka akan ada issue seperti ini.

Custom Error Response

Untuk fix issue tersebut, kita harus membuat custom error response. Caranya seperti berikut:

• Buka CloudFront Distribution yang telah kita buat.
• Klik tab Error Pages.
• Klik Create custom error response.

Selanjutnya lakukan hal berikut ini:

• HTTP error code pilih 403: Forbidden.
• Customize error response pilih yes.
• Response page path isi /index.html.
• HTTP Response code pilih 200: OK.
• Klik Create custom error response.

Setelah custom error response untuk 403 dibuat, maka ketika kita routing ke path tertentu akan diredirect ke file index.html dan issue sebelumnya solved.

Penutup

Begitulah cara untuk deploy aplikasi React ke CloudFront. Di CloudFront juga sudah mengoptimize asset-asset yang ada. Asset-asset seperti js, css, svg, dll akan di compress ke Brotli dan kalau browsernya tidak support Brotli akan difallback ke Gzip.

Semoga artikel ini dapat membantu teman-teman untuk deploy aplikasi React ke CloudFront.