Terus menerapkan aplikasi web AWS Amplify modern dari repositori AWS CodeCommit - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanArsitekturAlatEpikSumber daya terkait

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

Terus menerapkan aplikasi web AWS Amplify modern dari repositori AWS CodeCommit

Deekshitulu Pentakota dan Sai Katakam, Amazon Web Services

Ringkasan

Pemberitahuan: AWS CodeCommit tidak lagi tersedia untuk pelanggan baru. Pelanggan AWS yang sudah ada CodeCommit dapat terus menggunakan layanan seperti biasa. Pelajari selengkapnya.

Aplikasi web modern dibangun sebagai aplikasi satu halaman (SPAs) yang mengemas semua komponen aplikasi ke dalam file statis. Dengan menggunakan AWS Amplify Hosting, Anda dapat membangun pipeline integrasi berkelanjutan dan penerapan berkelanjutan (CI/CD) yang membangun, menyebarkan, dan menghosting aplikasi web modern yang dikelola dalam repositori berbasis Git. Saat Anda menghubungkan Amplify Hosting ke repositori kode, setiap komit memulai satu alur kerja untuk menerapkan frontend dan backend aplikasi. Manfaat dari pendekatan ini adalah bahwa aplikasi web diperbarui hanya setelah penerapan berhasil diselesaikan, yang mencegah ketidakkonsistenan antara frontend dan backend.

Dalam pola ini, Anda menggunakan CodeCommit repositori AWS untuk mengelola aplikasi web modern Anda. Contoh aplikasi web dalam instruksi ini menggunakan framework React SPA. Namun, Amplify Hosting mendukung banyak kerangka kerja SPA lainnya, seperti Angular, Vue, Next.js, dan juga mendukung generator situs tunggal, seperti Gatsby, Hugo, dan Jekyll.

Pola ini ditujukan untuk pembangun AWS yang memiliki pengalaman dengan layanan dan konsep berikut:

  • AWS CodeCommit

  • AWS Amplify Hosting

  • Bereaksi

  • JavaScript

  • Node.js

  • npm

  • Git

Prasyarat dan batasan

Prasyarat

Batasan

  • Pola ini tidak membahas pengembangan dan integrasi backend untuk aplikasi Amplify, seperti API, otentikasi, atau database. Untuk informasi selengkapnya tentang backend, lihat Membuat backend di dokumentasi Amplify.

Versi produk

  • AWS CLI versi 2.0

  • Node.js versi 16.x atau yang lebih baru

Arsitektur

Tumpukan teknologi target

  • CodeCommitRepositori AWS yang berisi React SPA

  • Alur kerja AWS Amplify Hosting

Arsitektur target

Diagram arsitektur penerapan aplikasi web dari CodeCommit repo dan hosting dengan AWS Amplify

Alat

Layanan AWS

  • AWS Amplify Hosting menyediakan alur kerja berbasis Git untuk menghosting aplikasi web tanpa server full-stack dengan penerapan berkelanjutan.

  • AWS CodeCommit adalah layanan kontrol versi yang membantu Anda menyimpan dan mengelola repositori Git secara pribadi, tanpa perlu mengelola sistem kontrol sumber Anda sendiri.

  • AWS Identity and Access Management (IAM) membantu Anda mengelola akses ke sumber daya AWS dengan aman dengan mengontrol siapa yang diautentikasi dan diberi wewenang untuk menggunakannya.

Alat-alat lainnya

  • Node.js adalah lingkungan JavaScript runtime berbasis peristiwa yang dirancang untuk membangun aplikasi jaringan yang dapat diskalakan.

  • npm adalah registri perangkat lunak yang berjalan di lingkungan Node.js dan digunakan untuk berbagi atau meminjam paket dan mengelola penyebaran paket pribadi.

Epik

TugasDeskripsiKeterampilan yang dibutuhkan

Buat repositori.

Untuk petunjuknya, lihat Membuat CodeCommit repositori AWS di dokumentasi. CodeCommit

AWS DevOps

Kloning repositori.

Untuk petunjuk, lihat Connect to the CodeCommit repository dengan mengkloning repositori dalam dokumentasi. CodeCommit Jika Anda diminta, berikan kredensi Git.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat aplikasi React baru.

  1. Masukkan perintah berikut untuk menavigasi ke repo kloning. Ganti <repo name> dengan nama CodeCommit repo Anda.

    $ cd <repo name>

  2. Masukkan perintah berikut untuk membuat aplikasi React baru di repositori kloning.

    $ npx create-react-app .

  3. Kode aplikasi, dan kemudian masukkan perintah berikut untuk memulainya.

    $ npm start

Untuk informasi selengkapnya tentang membuat aplikasi React kustom, lihat instruksi Create React App di dokumentasi Create React App. Anda juga dapat menerapkan contoh aplikasi React ke akun Amplify Anda dengan mengikuti petunjuk di Deploy a frontend dalam dokumentasi Amplify.

Pengembang aplikasi

Buat cabang dan tekan kode.

  1. Masukkan perintah berikut untuk membuat cabang baru secara lokal, di <branch> mana nama yang ingin Anda tetapkan ke cabang baru.

    $ git checkout -b <branch>

  2. Masukkan perintah berikut untuk mendorong cabang ke CodeCommit repositori, di mana nama <branch> yang Anda tetapkan pada langkah sebelumnya. Untuk informasi selengkapnya, lihat Bekerja dengan komit.

    $ git push --set-upstream origin <branch>
Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Connect Amplify ke repositori.

Untuk petunjuknya, lihat Connect repositori di dokumentasi Amplify Hosting. Pilih AWS CodeCommit dan repositori dan cabang yang Anda buat sebelumnya.

Pengembang aplikasi

Tentukan pengaturan build frontend.

Untuk petunjuknya, lihat Konfirmasi pengaturan build untuk frontend dalam dokumentasi Amplify Hosting. Terima default atau masukkan yang berikut ini.

Build settings:
version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
Pengembang aplikasi

Tinjau dan terapkan.

Untuk petunjuknya, lihat Menyimpan dan menerapkan di dokumentasi Amplify Hosting. Tunggu hingga proses penyebaran selesai.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Verifikasi penerapan awal.

Ketika proses penyebaran selesai, di bawah Domain, pilih tautan. Verifikasi bahwa aplikasi beroperasi seperti yang diharapkan.

Pengembang aplikasi

Dorong perubahan ke repositori kode.

Edit kode di workstation lokal Anda dan dorong perubahan ke CodeCommit repositori. Amplify Hosting mendeteksi perubahan dalam repositori dan secara otomatis memulai proses build dan deployment. Konfirmasikan bahwa pembaruan aplikasi terlihat di domain.

Pengembang aplikasi

Sumber daya terkait

CodeCommit Dokumentasi AWS

Dokumentasi AWS Amplify Hosting

Bereaksi sumber daya