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
Create React App
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
-
Di mesin lokal Anda, jalankan
yarn create react-app
untuk membuat aplikasi React sederhana.<app-name>
-
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
-
Buka AWS CodeBuild konsol di https://console.aws.amazon.com/codesuite/codebuild/home
. -
Jika halaman CodeBuild informasi ditampilkan, pilih Buat proyek build. Jika tidak, pada panel navigasi, perluas Build, pilih Build projects, lalu pilih Create build project.
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.
-
Di Sumber, pilih repositori sumber tempat AWS SAM proyek Anda berada.
-
Di Lingkungan:
-
Untuk Compute, pilih Lambda.
-
Untuk Runtime, pilih Node.js.
-
Untuk Gambar, pilih aws/codebuild/amazonlinux-x86_64-lambda-standard:nodejs20.
-
-
Dalam Artefak:
-
Untuk Jenis, pilih Amazon S3.
-
Untuk nama Bucket, pilih bucket artefak proyek yang Anda buat sebelumnya.
-
Untuk kemasan Artefak, pilih Zip.
-
-
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
-
Di CodeBuild konsol, pilih proyek build Anda, lalu pilih Edit dan Buildspec.
-
Di Buildspec, pilih Sisipkan perintah build dan kemudian Beralih ke editor.
-
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'
-
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
-
Pilih Mulai membangun.
-
Setelah build selesai, navigasikan ke bucket artefak proyek Amazon S3 Anda dan unduh artefak aplikasi React.
-
Buka zip artefak build React dan
run npm install -g serve && serve -s build
di folder proyek. -
serve
Perintah akan melayani situs statis pada port lokal dan mencetak output ke terminal Anda. Anda dapat mengunjungi URL localhostLocal:
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
-
Hapus artefak proyek Anda Amazon S3 bucket
-
Arahkan ke CloudWatch konsol dan hapus grup CloudWatch log yang terkait dengan CodeBuild proyek Anda.
-
Arahkan ke CodeBuild konsol dan hapus CodeBuild project Anda dengan memilih Delete build project.