Jelajahi pengembangan aplikasi web cloud-native full-stack dengan Green Boost

Untuk membuat aplikasi dengan menggunakan Green Boost, jalankan perintahgboost create.

Pilih CRUD App with Aurora PostgreSQL template.

Arahkan ke direktori proyek:cd <your directory>.

Untuk menginstal dependensi, jalankan perintah. pnpm i

Arahkan ke direktori infra:cd infra.

Untuk menerapkan aplikasi secara lokal, jalankan perintah. pnpm deploy:local

Ini adalah alias untuk cdk deploy ... perintah yang didefinisikan dalaminfra/package.json.

Buka terminal tempat Anda menjalankan pnpm deploy:local perintah.

Cari bagian dalam output terminal yang menyerupai teks berikut.

myapp5stickbui9C39A55A.CloudFrontDomainName = d1q16n5pof924c.cloudfront.net

URL akan unik untuk penyebaran Anda.

Masuk ke AWS Management Console dan navigasikan ke CloudFront layanan.

Cari distribusi terbaru yang diterapkan dalam daftar.

Buka CloudWatch konsol dan pilih Dasbor.

Pilih dasbor yang memiliki nama - -dashboard <appId><stageName>.

Tinjau dasbor. Sumber daya apa yang sedang dipantau? Metrik apa yang sedang direkam? Dasbor ini dimungkinkan oleh konstruksi cdk-monitoring-constructssumber terbuka.

Arahkan ke/infra/src/app/stateless/monitor-stack.ts, yang mendefinisikan tumpukan monitor.

Hapus komentar pada baris berikut, dan ganti admin@example.com dengan alamat email Anda.

onAlarmTopic.addSubscription(new EmailSubscription("admin@example.com"));

Tambahkan informasi impor berikut ke bagian atas file.

import { EmailSubscription } from "aws-cdk-lib/aws-sns-subscriptions";

Di dalaminfra/, jalankan perintah berikut.

cdk deploy "*/monitor" --exclusively.

Untuk mengonfirmasi langganan Anda ke topik SNS yang diintitasi saat alarm pemantauan dimulai, pilih tautan dalam pesan email.

Instal Graphviz.

Di dalaminfra/, jalankan perintahpnpm cdk-dia.

Lihat Andainfra/diagram.png.

Jelajahi penegakan praktik terbaik cdk-nag melalui bagian aturannya, termasuk pemeriksaan dari Paket Aturan AWS Solutions Library.

Untuk melihat bagaimana cdk-nag memberlakukan aturan, buat perubahan pada kode. Misalnya, diinfra/src/app/stateful/data-stacks.ts, ubah storageEncrypted: true kestorageEncrypted: false.

Di dalaminfra/, jalankan perintahcdk synth "*/data". Selama sintesis, Anda akan menemukan kesalahan build yang menunjukkan pelanggaran aturan.

AwsSolutions-RDS2: The RDS instance or Aurora DB cluster does not have storage encryption enabled.

Kesalahan ini menunjukkan bagaimana cdk-nag adalah mekanisme keamanan untuk menegakkan praktik terbaik infrastruktur dan mencegah kesalahan konfigurasi keamanan.

Jika perlu, Anda juga dapat menekan aturan pada cakupan yang berbeda. Misalnya, untuk menekan AwsSolutions -RDS2, tambahkan kode berikut di bawah instantiasi. DbIamCluster

NagSuppressions.addResourceSuppressions(
  cluster.node.findChild("Resource"),
  [
    {
      id: "AwsSolutions-RDS2",
      reason: "Customer requirement necessitates having unencrypted DB storage",
    },
  ],
);

Setelah penindasan, lari cdk synth "*/data" lagi. Aplikasi AWS CDK Anda sekarang harus berhasil mensintesis. Anda dapat menemukan semua aturan yang ditekan diinfra/cdk.out/assembly-<appId>-<stageName>/AwsSolutions-<appId>-<stageName>-${stackId}-NagReport.csv.

Untuk menemukanDB_BASTION_ID, masuk ke konsol, dan navigasikan ke EC2 konsol. Pilih Contoh (berjalan), dan temukan baris yang berisi - ssm-db-bastion Nama<stageName>. ID instance dimulai dengan i-.

Untuk menemukanDB_ENDPOINT, di konsol Amazon Relational Database Service (Amazon RDS), pilih Instans DB, dan pilih cluster regional yang memiliki pengenal DB yang dimulai dengan - -data-. <appId><stageName> Temukan titik akhir instance penulis, yang diakhiri dengan rds.amazonaws.com.

Instal plugin AWS Systems Manager Session Manager.

Mulai penerusan port dengan menjalankan pnpm db:connect di dalam core/ untuk membuat koneksi aman melalui host bastion.

Setelah Anda melihat teks Waiting for connections..., di terminal Anda, terowongan SSH telah berhasil dibuat antara mesin lokal Anda dan server Aurora melalui EC2 host bastion.

Di Object Explorer, buka menu konteks (klik kanan) untuk Server, lalu pilih Register, Server.

Pada tab Umum, masukkan - <appId><stageName>untuk bidang Nama.

Untuk mengambil kata sandi DB, buka konsol AWS Secrets Manager, pilih rahasia yang memiliki deskripsi Dihasilkan oleh CDK untuk tumpukan: - -data <appId><stageName>, dan pilih kartu Nilai Rahasia. Pilih Ambil Nilai Rahasia, dan salin nilai Rahasia dengan kunci kata sandi.

Pada tab Connection, masukkan 0.0.0 untuk name/address bidang Host, dan masukkan _admin untuk bidang Username. <appId> Untuk bidang Kata Sandi, gunakan rahasia yang Anda ambil sebelumnya. Pilih ya untuk Simpan kata sandi? lapangan.

Pilih Simpan.

<appId>Untuk melihat tabel, navigasikan ke -, Database, _db, Skema,, Tabel. <appId><stageName><appId>

Buka menu konteks (klik kanan) untuk tabel item, lalu pilih Lihat/Edit Data, Semua Baris.

Jelajahi meja.

Buka core/src/modules/item/create-item.use-case.ts file, dan masukkan kode berikut.

import { fileURLToPath } from "node:url";

// existing create-item.use-case.ts code here

if (process.argv[1] === fileURLToPath(import.meta.url)) {
  createItemUseCase({
    description: "Item 1's Description",
    name: "Item 1",
  });
}

Kode yang ditambahkan pada langkah sebelumnya memastikan createItemUseCase fungsi akan dipanggil ketika modul ini dijalankan secara langsung. Tetapkan breakpoint pada baris dalam blok kode ini di mana Anda ingin memulai debugging. line-by-line

Buka VS Code JavaScript Debug Terminal, lalu jalankan pnpm tsx core/src/modules/item/create-item.use-case.ts untuk menjalankan kode dengan line-by-line debugging. Atau, Anda dapat menggunakan console.log pernyataan, tetapi pernyataan cetak bisa tidak memadai ketika Anda bekerja dengan logika bisnis yang kompleks. Line-by-linedebugging memberi Anda lebih banyak konteks.

Arahkan keui/, dan jalankan pnpm dev untuk memulai server pengembangan Next.js.

Akses aplikasi web Anda secara lokal di http://localhost:3000. Server pengembangan Next.js disiapkan dengan umpan balik instan Fast Refresh pada pengeditan yang dilakukan pada komponen React Anda.

Bereksperimenlah dengan menyesuaikan warna bilah aplikasi. Buka ui/src/components/theme/theme.tsx file dan temukan bagian yang menentukan tema untuk bilah aplikasi. Di colorSchemes.light.palette.primary bagian ini, perbarui nilai utama dari colors.lagoon kecolors.carrot. Setelah melakukan perubahan ini, simpan file dan amati pembaruan di browser Anda.

Eksperimen dengan memodifikasi teks, komponen, dan menambahkan halaman baru.

Tinjau pnpm-workspace.yaml di root repositori GB Anda, dan perhatikan bagaimana ruang kerja didefinisikan. Untuk informasi selengkapnya tentang ruang kerja, lihat dokumentasi pnpm.

Tinjauui/package.json, dan perhatikan bagaimana referensi ruang kerja core/ dengan nama "<appId>/core": "workspace:^", paket.

Amati bagaimana TypeScript dan ESLint konfigurasi terpusat dalam paket utilitas yang didefinisikan di dalamnyapackages/. Konfigurasi ini kemudian digunakan oleh paket aplikasi seperticore/,infra/, danui/. Ini berguna saat aplikasi Anda menskalakan dan Anda menentukan lebih banyak paket aplikasi, yang dapat mereferensikan paket utilitas tanpa menduplikasi kode konfigurasi.

Jalankan pnpm lint. Perintah ini menjalankan analisis kode statis dengan ESLint.

Jalankan pnpm typecheck. Perintah ini menjalankan TypeScript compiler untuk memeriksa jenis kode Anda.

Jalankan pnpm test. Perintah ini menjalankan Vitest untuk menjalankan pengujian unit.

Pertama, pastikan ESLint ekstensi VS Code (ID:dbaeumer.vscode-eslint) diinstal. Kami merekomendasikan juga menginstal VS Code Error Lens (ID:usernamehw.errorlens) untuk melihat kesalahan sebaris.

Dalam kode Anda, sengaja menyertakan baris kode yang menggunakan eval() fungsi, seperti yang ditunjukkan pada contoh berikut.

const userInput = "import("fs").then((fs) => console.log(fs.readFileSync("/etc/passwd", { encoding: "utf8" })))";
eval(userInput);

Setelah Anda memasukkan eval() baris, buka editor kode Anda untuk mengonfirmasi bahwa ESLint menunjukkan bau kode dengan menggunakan coretan merah.

Tinjau ESLint plugin dan konfigurasi dipackages/eslint-config-{node,next}/.eslintrc.cjs.

Untuk mengidentifikasi Kerentanan Umum dan Exposures (CVEs), jalankan pnpm audit di root repositori Anda.

Anda akan melihat Tidak ada kerentanan yang diketahui ditemukan.

Instal paket yang sengaja rentan di dalam core/ dengan menjalankanpnpm add minimist@0.2.3, dan kemudian jalankanpnpm audit. Perhatikan kerentanan yang dilaporkan.

Copot pemasangan paket rentan di dalamnya core/ dengan menjalankanpnpm remove minimist.

Buat beberapa perubahan kecil dalam TypeScript file di seluruh repositori. Perubahan dapat menjadi dasar seperti menambahkan komentar.

Tahap dan lakukan perubahan ini dengan menggunakan git add -A dan kemudiangit commit -m "test husky".

Pemicu kait pra-komit Husky, yang didefinisikan dalam.husky/pre-commit, menjalankan perintah. pnpm lint-staged

Perhatikan bagaimana lint-staged menjalankan perintah yang ditentukan dalam */.lintstagedrc.js file di seluruh repositori pada file yang telah dipentaskan oleh Git.

Untuk meruntuhkan infrastruktur yang Anda sediakan di epik pertama, dengan menjalankanpnpm destroy:local. infra/

Tunggu 15 menit setelah pnpm destroy:local selesai, lalu hapus fungsi Lambda @Edge yang dipertahankan dengan mencari ID aplikasi Anda di konsol Lambda. Fungsi Lambda @Edge direplikasi., yang membuatnya sulit untuk dihapus. Untuk informasi selengkapnya tentang menghapus fungsi Lambda @Edge, lihat CloudFront dokumentasi.