Buat aplikasi React satu halaman dengan CodeBuild Lambda Node.js

Create React App adalah cara untuk membuat aplikasi React satu halaman. Contoh Node.js berikut menggunakan Node.js untuk membangun artefak sumber dari Create React App dan mengembalikan artefak build.

Siapkan ember repositori dan artefak sumber

Buat repositori sumber untuk proyek Anda menggunakan yarn dan Create React App.

Untuk mengatur repositori sumber dan ember artefak

1. Di mesin lokal Anda, jalankan yarn create react-app <app-name> untuk membuat aplikasi React sederhana.

2. Unggah folder proyek aplikasi React ke repositori sumber yang didukung. Untuk daftar jenis sumber yang didukung, lihat ProjectSource.

Buat proyek CodeBuild Lambda Node.js

Buat proyek AWS CodeBuild Lambda Node.js.

Untuk membuat proyek CodeBuild Lambda Node.js

1. Buka AWS CodeBuild konsol di https://console.aws.amazon.com/codesuite/codebuild/home.

2. Jika halaman CodeBuild informasi ditampilkan, pilih Buat proyek build. Jika tidak, pada panel navigasi, perluas Build, pilih Build projects, lalu pilih Create build project.

3. Di Nama proyek, masukkan nama untuk proyek pembangunan ini. Membangun nama proyek harus unik di setiap AWS akun. Anda juga dapat menyertakan deskripsi opsional proyek build untuk membantu pengguna lain memahami tujuan proyek ini.

4. Di Sumber, pilih repositori sumber tempat AWS SAM proyek Anda berada.

5. Di Lingkungan:

   • Untuk Compute, pilih Lambda.

   • Untuk Runtime, pilih Node.js.

   • Untuk Gambar, pilih aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.

6. Dalam Artefak:

   • Untuk Jenis, pilih Amazon S3.

   • Untuk nama Bucket, pilih bucket artefak proyek yang Anda buat sebelumnya.

   • Untuk kemasan Artefak, pilih Zip.

7. Pilih Buat proyek build.

Siapkan proyek buildspec

Untuk membangun aplikasi React Anda, CodeBuild membaca dan mengeksekusi perintah build dari file buildspec.

Untuk menyiapkan buildspec proyek Anda

1. Di CodeBuild konsol, pilih proyek build Anda, lalu pilih Edit dan Buildspec.

2. Di Buildspec, pilih Sisipkan perintah build dan kemudian Beralih ke editor.

3. Hapus perintah build yang telah diisi sebelumnya dan tempel di buildspec berikut.

   version: 0.2
   phases:
     build:
       commands:
         - yarn
         - yarn add --dev jest-junit @babel/plugin-proposal-private-property-in-object
         - yarn run build
         - yarn run test -- --coverage --watchAll=false --testResultsProcessor="jest-junit" --detectOpenHandles
   artifacts:
     name: "build-output"
     files:
       - "**/*"
   reports:
     test-report:
       files:
         - 'junit.xml'
       file-format: 'JUNITXML'
     coverage-report:
       files:
         - 'coverage/clover.xml'
       file-format: 'CLOVERXML'

4. Pilih Perbarui buildspec.

Membangun dan menjalankan aplikasi React Anda

Bangun aplikasi React di CodeBuild Lambda, unduh artefak build, dan jalankan aplikasi React secara lokal.

Untuk membangun dan menjalankan aplikasi React Anda

1. Pilih Mulai membangun.

2. Setelah build selesai, navigasikan ke bucket artefak proyek Amazon S3 Anda dan unduh artefak aplikasi React.

3. Buka zip artefak build React dan run npm install -g serve && serve -s build di folder proyek.

4. servePerintah akan melayani situs statis pada port lokal dan mencetak output ke terminal Anda. Anda dapat mengunjungi URL localhost Local: di bawah output terminal untuk melihat aplikasi React Anda.

Untuk mempelajari lebih lanjut tentang cara menangani deployment untuk server berbasis React, lihat Membuat Penerapan Aplikasi React.

Bersihkan infrastruktur Anda

Untuk menghindari biaya lebih lanjut untuk sumber daya yang Anda gunakan selama tutorial ini, hapus sumber daya yang dibuat untuk CodeBuild proyek Anda.

Untuk membersihkan infrastruktur Anda

1. Hapus artefak proyek Anda Amazon S3 bucket

2. Arahkan ke CloudWatch konsol dan hapus grup CloudWatch log yang terkait dengan CodeBuild proyek Anda.

3. Arahkan ke CodeBuild konsol dan hapus CodeBuild project Anda dengan memilih Delete build project.