Membangun Aplikasi React Full-Stack

Implementasi

• Instal pustaka Amplify

  Kita akan membutuhkan dua pustaka Amplify untuk proyek ini. Pustaka aws-amplify utama berisi semua API sisi klien untuk berinteraksi dengan berbagai layanan AWS yang akan kita gunakan untuk bekerja dan pustaka @aws-amplify/ui-react berisi komponen UI khusus kerangka kerja. Instal pustaka ini di root proyek.
  

  npm install aws-amplify @aws-amplify/ui-react

  Code snippet copied

  Copy
• Buat layanan autentikasi

  Gunakan CLI Amplify untuk membuat layanan autentikasi:
  

  amplify add auth
  
  ? Do you want to use the default authentication and security configuration? Default configuration
  ? How do you want users to be able to sign in? Username
  ? Do you want to configure advanced settings? No, I am done.

  Code snippet copied

  Copy
• Deploy layanan autentikasi

  Setelah layanan autentikasi dikonfigurasi secara lokal, kita dapat men-deploy layanan ini dengan menjalankan perintah push Amplify:
  

  amplify push --y

  Code snippet copied

  Copy
• Konfigurasikan proyek React dengan sumber daya Amplify

  CLI telah membuat dan akan terus memperbarui file bernama aws-exports.js yang terletak di direktori src proyek kita. Kita akan menggunakan file ini untuk memberi tahu proyek React tentang berbagai sumber daya AWS yang tersedia di proyek Amplify kita.

  Untuk mengonfigurasi aplikasi kita menggunakan sumber daya ini, buka src/index.js dan tambahkan kode berikut di bawah impor terakhir:

  import { Amplify } from 'aws-amplify';
  import config from './aws-exports';
  Amplify.configure(config);
  

  Code snippet copied

  Copy
• Tambahkan alur autentikasi di App.js

  Selanjutnya, buka src/App.js dan perbarui dengan kode berikut:

  import logo from "./logo.svg";
  import "@aws-amplify/ui-react/styles.css";
  import {
    withAuthenticator,
    Button,
    Heading,
    Image,
    View,
    Card,
  } from "@aws-amplify/ui-react";
  
  function App({ signOut }) {
    return (
      <View className="App">
        <Card>
          <Image src={logo} className="App-logo" alt="logo" />
          <Heading level={1}>We now have Auth!</Heading>
        </Card>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  }
  
  export default withAuthenticator(App);

  Code snippet copied

  Copy

  Dalam kode ini, kami telah menggunakan komponen withAuthenticator. Komponen ini akan membentuk seluruh alur autentikasi pengguna yang mengizinkan pengguna untuk mendaftar, masuk, mengatur ulang kata sandi mereka, dan mengonfirmasi akses masuk untuk autentikasi multifaktor (MFA). Kami juga telah menambahkan tombol Keluar untuk mengeluarkan pengguna.
  

• Jalankan aplikasi secara lokal

  Tunggu hingga sumber daya selesai men-deploy, lalu jalankan aplikasi untuk melihat alur Autentikasi baru yang melindungi aplikasi:
  

  npm start

  Code snippet copied

  Copy

  

  Di sini, Anda dapat mencoba mendaftar, yang akan mengirimkan kode verifikasinya ke email Anda. Gunakan kode verifikasi untuk masuk ke aplikasi. Saat masuk, Anda akan melihat tombol Keluar, yang akan mengeluarkan Anda dan memulai ulang alur autentikasi.

  

• Siapkan CI/CD dari frontend dan backend

  Selanjutnya, kita perlu mengonfigurasi proses pembangunan Amplify untuk menambahkan backend sebagai bagian dari alur kerja deployment berkelanjutan. Dari jendela terminal Anda, jalankan:
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  Copy

  Konsol Amplify akan terbuka. Dari panel navigasi, pilih Pengaturan aplikasi > Pengaturan build dan ubah untuk menambahkan bagian backend (baris 2-7 dalam kode di bawah ini) ke amplify.yml Anda. Setelah melakukan pengeditan, pilih Simpan.
  

  version: 1
  backend:
    phases:
      build:
        commands:
          - '# Execute Amplify CLI with the helper script'
          - amplifyPush --simple
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

  Code snippet copied

  Copy

  Gulir ke bawah, ke Pengaturan gambar build dan pilih Edit. Pilih menu tarik-turun Tambahkan penimpaan versi paket dan pilih CLI Amplify. Tindakan ini harus default ke versi terbaru, seperti yang ditunjukkan pada gambar.

  

  Selanjutnya, perbarui cabang frontend Anda untuk mengarahkan ke lingkungan backend yang baru saja Anda buat. Pada nama cabang, pilih Edit, lalu arahkan cabang utama Anda ke backend penahapan yang baru saja Anda buat. Pilih Simpan.
  

  

  

  Jika Anda melihat pesan Siapkan peran layanan..., ikuti petunjuk yang diberikan sebelum melanjutkan untuk menyiapkan dan melampirkan peran layanan ke aplikasi Anda.

• Men-deploy perubahan ke lingkungan hidup

  Sekarang, kembali ke jendela terminal lokal Anda dan deploy perubahan ke GitHub untuk memulai build baru di konsol Amplify:

  git add .
  git commit -m "added auth"
  git push origin main
  

  Code snippet copied

  Copy