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

# Buat aplikasi React satu halaman dengan CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs"></a>

[Create React App](https://create-react-app.dev/) 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 Anda
<a name="sample-lambda-react-nodejs.set-up-repo"></a>

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.

1. Unggah folder proyek aplikasi React ke repositori sumber yang didukung. Untuk daftar jenis sumber yang didukung, lihat [ProjectSource](https://docs.aws.amazon.com/codebuild/latest/APIReference/API_ProjectSource.html).

## Buat proyek CodeBuild Lambda Node.js
<a name="sample-lambda-react-nodejs.create-project"></a>

Buat proyek AWS CodeBuild Lambda Node.js.

**Untuk membuat proyek CodeBuild Lambda Node.js Anda**

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

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

1. 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.

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

1. Di **Lingkungan**:
   + Untuk **Compute**, pilih **Lambda**.
   + Untuk **Runtime**, pilih **Node.js**.
   + Untuk **Gambar**, pilih **aws/codebuild/amazonlinux-x86\$164-lambda-standard:nodejs20**.

1. Dalam **Artefak**:
   + Untuk **Jenis**, pilih **Amazon S3**.
   + Untuk **nama Bucket**, pilih bucket artefak proyek yang Anda buat sebelumnya.
   + Untuk **kemasan Artefak**, pilih **Zip**.

1. Pilih **Buat proyek build**.

## Siapkan proyek buildspec
<a name="sample-lambda-react-nodejs.set-up-buildspec"></a>

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**.

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

1. 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'
   ```

1. Pilih **Perbarui buildspec**.

## Membangun dan menjalankan aplikasi React Anda
<a name="sample-lambda-react-nodejs.build"></a>

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**.

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

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

1. `serve`Perintah 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](https://create-react-app.dev/docs/deployment/).

## Bersihkan infrastruktur Anda
<a name="sample-lambda-react-nodejs.clean-up"></a>

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

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

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