serverless static site

Host Situs Statis dengan AWS dan Kerangka Tanpa Server

Aplikasi ini menciptakan berbagai sumber daya AWS untuk menghosting Aplikasi Halaman Tunggal. Aplikasi ini juga memiliki Formulir Kontak untuk menyimpan data kontak ke dalam database dan juga mengirimkan email ke penulis aplikasi.

Layanan AWS yang digunakan dalam aplikasi ini.

• S3 - Untuk Hosting
• CloudFront - Untuk CDN
• Route53 - Untuk DNS
• Manajer Sertifikat - Untuk sertifikat HTTPS
• Gerbang API - Untuk API
• Lambda - Untuk Menyimpan Data Formulir Kontak
• DynamoDB - Untuk Basis Data
• SNS - Untuk Mengirim Email ke Penulis ketika seseorang mengirimkan pesan kontak

Konfigurasi Nama Domain Route53

Untuk demo ini saya menggunakan nama domain Namecheap yang dirutekan ke Amazon Route53 sehingga saya dapat menggunakan sertifikasi HTTPS tanpa repot. Anda dapat mengikuti tautan ini untuk mengonfigurasi pengalihan Namecheap ke Route53 dan ACM untuk sertifikat SSL.

Untuk menggunakan sertifikat ACM dengan Amazon CloudFront, Anda harus meminta atau mengimpor sertifikat di wilayah US East (N. Virginia).

Catatan: Harap pastikan nama bucket S3 Anda cocok dengan Nama Domain Anda. Misalnya, nama domain saya adalah newarc.io , jadi saya mengonfigurasi nama bucket saya menjadi newarc.io .

https://benjamincongdon.me/blog/2017/06/13/How-to-Deploy-a-Secure-Static-Site-to-AWS-with-S3-and-CloudFront/

Penyebaran

Sebelum Anda menerapkan, buat config.dev.json dari file sample.config.json dan tetapkan nilainya.

 {
    "BUCKET_NAME": "S3 bucket name. For example, mysite.com",
    "TABLE_NAME": "DynamoDB table name",
    "CONTACT_RECEIVED_TOPIC": "contact-received-email",
    "FORWARD_EMAIL": "Email where you want to receive contact message",
    "ACM_CERT_ARN": "arn:aws:acm:us-east-1:<AWS ACCOUNT>:certificate/<CERTIFICATION ID>",
    "HOSTED_ZONE_ID": "Route53 Hosted Zone ID" 
}

Jalankan perintah sls deploy untuk menerapkan perubahan ke AWS.

Publikasikan Konten Situs

Untuk mendorong perubahan spesifik Situs (Html, CSS, JS, dll)

 aws s3 sync app/ s3://<bucket name>

Pembatalan Cache CloudFront

Setelah menerapkan layanan, jika Anda baru saja mendorong perubahan ke situs Anda. Distribusi CloudFront akan memerlukan waktu untuk memperbarui konten cache. Untuk segera memperbarui CloudFront, Anda perlu invalidate cache.

Buka konsol CloudFront Anda dan salin ID Distribusi yang dibuat melalui layanan ini dan jalankan perintah berikut. Harap dicatat bahwa perintah berikut akan menghapus seluruh cache. Anda dapat menghapus file selektif menggunakan --paths juga.

 aws cloudfront create-invalidation --distribution-id <ID> --paths /*

Untuk detail lebih lanjut, periksa dokumentasi di sini - https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

Berlangganan Email SNS

Ketika seseorang mengisi formulir kontak di UI. API akan menyimpan data ke DynamoDB dan juga menerbitkan pesan di Topik SNS yang dikonfigurasi. Topik SNS juga memiliki langganan Email, di mana Anda dapat meletakkan email di tempat yang Anda inginkan untuk menerima detail pesan.

Setelah Anda menerapkan layanan, Anda akan menerima email konfirmasi dari AWS untuk mengaktifkan langganan Anda. Silakan ikuti petunjuk di email.

Untuk detail lebih lanjut, periksa dokumentasi di sini - https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html

Membersihkan

Hapus konten keranjang Situs terlebih dahulu.

 aws s3 rm s3://<bucket name> --recursive

Hapus tumpukan aplikasi

 sls remove --profile <your profile> --aws-region <region>

Lisensi

Lisensi MIT

Hak Cipta (c) 2021 Dhaval Nagar