Bagaimana saya bisa menggunakan AWS CloudFront dan API Gateway berdampingan untuk domain yang sama?

Saya menempatkan aset statis situs web saya di S3, dan mengatur CloudFront untuk mendistribusikannya. Ini pada dasarnya menampung konten yang dibutuhkan pengguna untuk setiap permintaan GET di situs saya, ke jalur yang ada, dengan semua kesalahan.

Saya juga punya beberapa permintaan POST yang perlu saya tangani. Pengiriman formulir, mengirim email, pemberitahuan, berinteraksi dengan database.

Bagaimana saya bisa mengatur Lambda (atau API Gateway) berdampingan dengan CloudFront untuk domain yang sama sehingga CloudFront menangani permintaan GET, dan API Gateway menangani permintaan dengan tubuh atau permintaan POST. Atau bisakah saya melakukannya dengan URL individual?

Saya menjalankan beberapa aplikasi web persis dengan desain yang Anda usulkan, dan saya mengekstraksi gofaas , aplikasi Go dan Lambda yang mendidik, untuk berbagi tekniknya.

Anda memerlukan dua domain terpisah, misalnya www.gofaas.netuntuk S3 + CloudFront dan api.gofaas.netuntuk API Gateway + Lambda.

Kemudian Anda dapat membiarkan situs statis Anda berinteraksi dengan API dengan konfigurasi API Gateway CORS dan beberapa JavaScript:

fetch(`https://api.gofaas.net/work`, {
    method: "POST",
    mode: "cors",
    headers: {
        "Accept": "application/json",
        ...
    },
    body: JSON.stringify(...)
})
    .then(function(response) {
        return response.json();
    })
    .then(function (json) {
        // use response
    })
    .catch(function (err) {
        console.log("fetch error", err);
    });

Berikut adalah beberapa panduan untuk mengatur semua ini:

Situs Web Statis dengan S3, CloudFront dan ACM

Keamanan API dengan Lambda, API Gateway, CORS dan JWT

Anda dapat membuat fungsi lambda, mengatur gateway API, dan kemudian mengkonfigurasi CloudFront untuk meneruskan jalur tertentu (mis. / Rest / *) ke gateway API, dan melayani yang lainnya dari bucket S3.

Berikut ini adalah langkah lengkap untuk menunjukkan bagaimana melakukan ini: https://www.codeengine.com/articles/process-form-aws-api-gateway-lambda/

Dari sudut pandang koneksi, "sesuatu" perlu menjawab permintaan Anda (GET, POST, PUT, semuanya). Pertama-tama Anda memiliki koneksi TCP dan "sesuatu" perlu memastikan itu memahami lapisan 7 dan masuk akal dari byte yang dikirim klien. Hanya pada titik ini dimungkinkan untuk menangani permintaan GET berbeda dari permintaan POST atau satu URL dari URL lain. Jadi pada akhirnya Anda membutuhkan layanan yang mampu memahami dan mengarahkan HTTP. Layanan berikut mampu melakukan ini: CloudFront ELB / ALB API Gateway (batasan datang nanti)

API Gateway menggunakan CloudFront secara internal (tanpa memberi Anda kesempatan untuk benar-benar mengonfigurasi apa pun di tingkat CloudFront) - itu berarti tidak ada cara untuk menjalankan CloudFront dan API Gateway secara berdampingan karena pada akhirnya ini berarti Anda menjalankan CloudFront dengan CloudFront bersebelahan.

CloudFront memberi Anda kesempatan untuk memilih asal yang berbeda berdasarkan pola - tetapi Anda hanya dapat memilih S3 atau ELB / ALB sebagai asal - bukan fungsi Lambda (selain fungsi Lambda @ Edge).

ALB / ELB hanya dapat menggunakan instance EC2 sebagai backend - tidak ada Lambda atau S3 di sini.

Satu-satunya cara yang dapat saya pikirkan yang mungkin melakukan apa yang ingin Anda lakukan adalah ini:

• Anda menggunakan API Gateway dan merutekan "aset" khusus - jalan ke fungsi Lambda yang melakukan semacam proxy terbalik untuk S3 (jadi menyalurkan aset statis melalui lambda) - perhatikan biaya untuk Lambda di sini!
• Anda dapat melakukan hal yang sama tetapi alih-alih menyalurkan aset melalui Lambda, cukup buat URL yang ditandatangani di dalam Lambda, redirect langsung ke S3 untuk ditayangkan (mungkin lebih hemat biaya)
• Menggunakan subdomain yang berbeda untuk aset Anda daripada aplikasi lainnya - ini adalah pola yang sangat umum karena Anda dapat dengan mudah membagi pada tingkat DNS dan menggunakan layanan yang berbeda untuk berbagai kasus penggunaan (CloudFront untuk aset dan API Gateway untuk non-statis bagian)

Jadi panggilan saya akan menjadi opsi terakhir - tetapi itu berarti Anda harus mengarahkan klien / browser ke subdomain terpisah untuk semua aset statis (atau untuk semua permintaan POST).

Sepertinya Anda ingin melihat teknologi seperti AngularJS atau Bereaksi untuk membangun aplikasi yang benar-benar digerakkan oleh API di browser. Dengan pendekatan ini Anda menjalankan API nyata yang menangani semua permintaan "dinamis" dengan API Gateway dan mengirimkan aplikasi itu sendiri dari S3 sebagai aset statis. Mungkin melihat itu dapat membantu Anda menemukan jalan - bahkan jika Anda tidak menggunakannya, pola arsitektur tentang cara membangun hal-hal seperti ini adalah apa yang Anda minta untuk imho.

Saya memiliki pengaturan yang sama. Aset statis pada S3, fungsi Lambda dilayani melalui gateway API, dan mereka berbagi nama domain yang sama.

Saya menggunakan API gateway yang sudah menggunakan CloudFront dan memperlihatkan beberapa fungsinya seperti caching. Lalu saya mengkonfigurasi URI yang memetakan ke aset statis. Di API Gateway, sumber daya bisa berupa fungsi Lambda, fungsi AWS, tiruan, atau URL lainnya. Saya minta mereka menunjuk ke URL S3 saya.

URI dapat diatur untuk menggumpalkan subpath juga misalnya /assets/*.