Menyediakan CloudFront untuk menganjurkan aplikasi web anda

Dalam artikel terakhir saya, kami meneruskan cara untuk menyediakan aplikasi web yang berfungsi dengan ketulan dan berkas CSS dan JavaScript dari Cloudfront. Kami menggabungkannya ke dalam Vite supaya apabila aplikasi berjalan dalam penyemak imbas, aset yang diminta dari fail HTML root aplikasi akan menarik dari Cloudfront sebagai CDN.

Walaupun Caching Edge Cloudfront menawarkan faedah, melayani sumber aplikasi anda dari pelbagai lokasi ini bukan tanpa kos sendiri. Mari kita lihat jejak WebpageTest aplikasi web saya sendiri, berjalan dengan konfigurasi dari catatan blog terakhir.

Siaran ini akan menunjukkan kepada anda bagaimana untuk mendapatkannya. Kami akan berjalan melalui cara menjadi tuan rumah seluruh aplikasi web di CloudFront dan mempunyai Cloudfront ke hadapan-atau "proksi"-permintaan yang tidak boleh dicapai untuk data, auth, dan lain-lain, ke pelayan web kami yang mendasari.

Perhatikan bahawa ini adalah lebih banyak kerja daripada apa yang kita lihat dalam artikel terakhir, dan arahannya mungkin berbeza untuk anda berdasarkan keperluan tepat aplikasi web anda, jadi perbatuan anda mungkin berbeza -beza. Kami akan menukar rekod DNS dan, bergantung pada aplikasi web anda, anda mungkin perlu menambah beberapa tajuk cache untuk mengelakkan aset tertentu daripada yang telah di -cache. Kami akan masuk ke dalam semua ini!

Anda mungkin tertanya -tanya sama ada persediaan yang kami tutupi dalam artikel terakhir bahkan menawarkan apa -apa faedah kerana apa yang kami lakukan di sini dalam artikel ini. Memandangkan masa sambungan yang panjang, adakah kita lebih baik melepaskan CDN, dan sebaliknya melayani semua aset kami dari pelayan web untuk mengelakkan menunggu lebih lama? Saya mengukur ini dengan aplikasi web saya sendiri, dan versi CDN, di atas, memang lebih cepat, tetapi tidak banyak. Beban halaman LCP awal adalah kira-kira 200-300ms lebih cepat. Dan ingat, itu hanya untuk beban awal. Sebaik sahaja sambungan ini telah ditubuhkan, kelebihan caching harus menambah lebih banyak nilai untuk semua potongan -potongan yang dimuatkan secara tidak sengaja dan tidak segerak.

Menyediakan DNS kami

Matlamat akhir kami adalah untuk melayani seluruh aplikasi web kami dari Cloudfront. Ini bermakna apabila kita memukul domain kita, kita mahu hasilnya datang dari Cloudfront dan bukannya pelayan web yang kini dihubungkan. Ini bermakna kita perlu mengubah suai tetapan DNS kami. Kami akan menggunakan AWS Route 53 untuk ini.

Saya menggunakan mydemo.Technology sebagai contoh, yang merupakan domain yang saya miliki. Saya akan menunjukkan kepada anda semua langkah di sini. Tetapi pada masa anda membaca ini, saya akan mengeluarkan domain ini dari aplikasi web saya. Oleh itu, kemudian apabila saya mula menunjukkan rekod CNAME sebenar, dan serupa, mereka tidak lagi wujud.

Pergi ke laman utama Route 53, dan klik pada zon yang dihoskan:

Klik Buat Zon yang Dihoskan dan masukkan domain aplikasi:

Kami belum mencapai apa -apa lagi. Kami memberitahu AWS bahawa kami mahu ia menguruskan domain ini untuk kami, dan AWS memberi kami pelayan nama yang akan mengarahkan trafik kami melalui. Untuk memberi kesan ini, kita perlu pergi ke mana sahaja domain kita didaftarkan. Harus ada tempat untuk anda masuk ke dalam pelayan nama tersuai anda sendiri.

Perhatikan bahawa domain saya didaftarkan dengan GoDaddy dan yang tercermin dalam tangkapan skrin sepanjang artikel ini. UI, tetapan, dan pilihan mungkin berbeza dari apa yang anda lihat di pendaftar anda.

Amaran: Saya cadangkan menuliskan pelayan nama asal serta mana -mana dan semua rekod DNS sebelum membuat perubahan. Dengan cara itu, sekiranya sesuatu yang gagal, anda mempunyai semua yang anda perlukan untuk kembali kepada bagaimana keadaan sebelum anda bermula. Dan walaupun semuanya berfungsi dengan baik, anda masih mahu menambah semula rekod lain ke dalam Laluan 53, iaitu rekod MX, dll.

Menyediakan taburan Cloudfront

Mari buat taburan Cloudfront untuk menjadi tuan rumah aplikasi web kami. Kami meliputi asas -asas dalam jawatan terakhir, jadi kami akan mendapat hak untuk itu. Satu perubahan besar dari masa lalu adalah apa yang kita masukkan untuk domain asal. Jangan letakkan domain peringkat atas , misalnya anda-app.net. Apa yang anda perlukan adalah domain asas di mana aplikasi anda dihoskan. Jika itu Heroku, kemudian masukkan URL Heroku memberikan anda.

Seterusnya, pastikan anda menukar protokol lalai jika anda merancang untuk menggunakan laman web ini melalui sambungan HTTPS yang selamat:

Bahagian ini sangat penting. Jika aplikasi web anda menjalankan pengesahan, menganjurkan data, atau apa -apa lagi, pastikan untuk membolehkan kata kerja lain selain mendapatkan. Jika anda melangkau bahagian ini, maka sebarang permintaan pos untuk pengesahan, bermutasi data, dan lain -lain, akan ditolak dan gagal. Jika aplikasi web anda tidak melakukan apa -apa tetapi melayani aset dan semua perkara itu dikendalikan oleh perkhidmatan luaran, maka cemerlang! Anda mempunyai persediaan yang hebat, dan anda boleh melangkau langkah ini.

Kita perlu membuat beberapa perubahan pada kunci cache dan tetapan permintaan asal berbanding kali terakhir:

Kita perlu membuat dasar cache dengan TTL minimum 0, jadi tajuk yang tidak cache yang kita hantar kembali akan dihormati dengan betul. Anda juga mungkin mahu membolehkan semua rentetan pertanyaan. Saya melihat tingkah laku pelik apabila banyak permintaan GraphQL keluar bersama -sama dengan rentetan pertanyaan yang berbeza, yang diabaikan, menyebabkan semua permintaan ini kelihatan sama dari perspektif Cloudfront.

Dasar saya kelihatan seperti ini:

Untuk dasar permintaan asal, jika diperlukan, kami harus pastikan untuk menghantar rentetan pertanyaan dan kuki untuk perkara -perkara seperti pengesahan dan pertanyaan data untuk berfungsi. Untuk menjadi jelas, ini menentukan sama ada cookies dan rentetan pertanyaan akan dihantar dari Cloudfront ke pelayan web anda (misalnya Heroku, atau serupa).

Tambang kelihatan seperti ini:

Akhir sekali, untuk dasar tajuk tindak balas, kita boleh memilih "CORS WITH PREFLIGHT" dari senarai. Pada akhirnya, dua pertama anda akan mempunyai nama yang berbeza bergantung kepada bagaimana anda menetapkannya. Tetapi saya kelihatan seperti ini:

Mari kita sambungkan domain kami, apa sahaja, ke pengedaran Cloudfront ini. Malangnya, ini lebih banyak kerja daripada yang anda harapkan. Kita perlu membuktikan kepada AWS bahawa kita sebenarnya memiliki domain kerana, untuk semua Amazon tahu, kita tidak. Kami mencipta zon yang dihoskan di Laluan 53 dan kami mengambil nama -nama yang diberikan kepada kami dan mendaftarkannya dengan Godaddy (atau siapa pun domain anda didaftarkan). Tetapi Amazon belum tahu ini. Kita perlu menunjukkan kepada Amazon yang kita lakukan, sebenarnya, mengawal DNS untuk domain ini.

Pertama, kami akan meminta sijil SSL.

Seterusnya, mari kita minta pautan sijil:

Sekarang, kami akan memilih pilihan untuk meminta pilihan sijil awam:

Kita perlu menyediakan domain:

Dan, dalam kes saya, sijil sedang menunggu:

Jadi, saya akan mengkliknya:

Ini membuktikan bahawa kita memiliki dan mengawal domain ini. Dalam tab yang berasingan, kembali ke Laluan 53, dan buka zon hos kami:

Sekarang kita perlu membuat rekod CNAME. Salin bahagian pertama untuk nama rekod . Sebagai contoh, jika cname adalah _xhyqtrajdkrr.mydemo.technology, kemudian letakkan bahagian _xhyqtrajdkrr. Untuk nilai rekod , salin keseluruhan nilai.

Dengan mengandaikan anda mendaftarkan pelayan nama AWS dengan tuan rumah domain anda, Godaddy atau sesiapa sahaja, AWS tidak lama lagi akan dapat memasuki entri DNS yang hanya meminta anda untuk membuat, melihat respons yang diharapkan, dan mengesahkan sijil anda.

Ia boleh mengambil masa untuk pelayan nama yang anda tetapkan pada mulanya untuk menyebarkan. Secara teori, ia boleh mengambil masa sehingga 72 jam, tetapi biasanya dikemas kini dalam masa satu jam untuk saya.

Anda akan melihat kejayaan di domain:

... serta sijil:

Wah ! Hampir selesai. Sekarang mari kita sambungkan semua ini ke taburan Cloudfront kami. Kami boleh kembali ke skrin Tetapan CloudFront. Sekarang, di bawah sijil SSL tersuai, kita harus melihat apa yang kita buat (dan mana -mana orang lain yang telah anda buat pada masa lalu):

Kemudian, mari tambahkan domain peringkat atas aplikasi:

Semua yang tersisa adalah untuk memberitahu Route 53 untuk mengarahkan domain kami ke pengedaran Cloudfront ini. Jadi, mari kita kembali ke Laluan 53 dan buat rekod DNS yang lain.

Kita perlu memasukkan rekod untuk IPv4, dan rekod AAAA untuk IPv6. Untuk kedua-duanya, tinggalkan nama rekod kosong kerana kami hanya mendaftarkan domain peringkat atas kami dan tidak ada yang lain.

Pilih jenis rekod. Seterusnya, tentukan rekod sebagai alias, kemudian peta alias ke taburan Cloudfront. Itu harus membuka pilihan untuk memilih pengedaran CloudFront anda, dan sejak kami sebelum ini mendaftarkan domain dengan CloudFront, anda harus melihat pengedaran itu, dan hanya pengedaran itu ketika membuat pilihan.

Kami mengulangi langkah yang sama untuk jenis rekod AAAA yang kami perlukan untuk sokongan IPv6.

Jalankan aplikasi web anda, dan pastikan ia sebenarnya, anda tahu, berfungsi. Ia sepatutnya!

Perkara untuk diuji dan mengesahkan

OK, sementara kami dilakukan secara teknikal di sini, kemungkinan masih terdapat beberapa perkara yang perlu dilakukan untuk memenuhi keperluan tepat aplikasi web anda. Aplikasi yang berbeza mempunyai keperluan yang berbeza dan apa yang saya tunjukkan setakat ini telah berjalan melalui langkah -langkah biasa untuk laluan melalui Cloudfront untuk prestasi yang lebih baik. Kemungkinan ada perkara yang unik untuk aplikasi anda yang memerlukan lebih banyak cinta. Jadi, untuk itu, biarkan saya menutup beberapa perkara tambahan yang mungkin anda hadapi semasa persediaan.

Mula -mula, pastikan mana -mana jawatan yang anda miliki dengan betul dihantar ke asal anda. Dengan mengandaikan Cloudfront dikonfigurasi dengan betul untuk meneruskan kuki ke asal anda, ini sepatutnya berfungsi tetapi tidak ada bahaya dalam pemeriksaan.

Kebimbangan yang lebih besar adalah semua permintaan lain yang dihantar ke aplikasi web anda. Secara lalai, apa -apa permintaan GET yang diterima CloudFront, jika di -cache, disampaikan kepada aplikasi web anda dengan respons cache. Ini boleh menjadi bencana. Sebarang permintaan data ke mana -mana titik akhir REST atau GRAPHQL yang dihantar dengan GET adalah cache oleh CDN. Dan jika anda menghantar pekerja perkhidmatan, itu juga akan di -cache, bukannya tingkah laku biasa, di mana versi semasa diturunkan di latar belakang dan dikemas kini jika terdapat perubahan.

Untuk memberitahu CloudFront supaya tidak menyahut perkara-perkara tertentu, pastikan anda menetapkan tajuk "Cache-Control" kepada "No-Cache". Jika anda menggunakan rangka kerja, seperti Express, anda boleh menetapkan middleware untuk akses data anda dengan sesuatu seperti ini:

 app.use ("/graphql", (req, res, next) => {
  res.set ("Cache-Control", "No-Cache");
  seterusnya ();
});
app.use (
  "/Graphql",
  Expressgraphql ({
    Skema: ExecutableSchema,
    Graphiql: Benar,
    RootValue: Root
  })
);

Untuk perkara seperti pekerja perkhidmatan, anda boleh meletakkan peraturan khusus untuk fail tersebut sebelum middleware statik anda:

 app.get ("/service-worker.js", express.static (__ dirname "/react/dist", {setetheaders: resp => resp.set ("Cache-Control", "No-Cache")}));
app.get ("/sw-index-bundle.js", express.static (__ dirname "/react/dist", {setetheaders: resp => resp.set ("Cache-Control", "no-cache")}));
app.use (Express.static (__ dirname "/react/dist", {maxage: 432000 * 1000 * 10}));

Dan sebagainya. Uji semuanya dengan teliti kerana ada begitu banyak yang boleh salah. Dan selepas setiap perubahan yang anda buat, pastikan anda menjalankan pembatalan penuh di Cloudfront dan membersihkan cache sebelum menjalankan semula aplikasi web anda untuk menguji bahawa perkara-perkara yang dikecualikan dengan betul dari cache. Anda boleh melakukan ini dari tab Invalidations di Cloudfront. Buka itu dan letakkan /* untuk nilai, untuk membersihkan segala -galanya.

Pelaksanaan Cloudfront yang berfungsi

Sekarang kita mempunyai segala-galanya berjalan, mari kita menjalankan semula jejak kita di WebpageTest:

Dan seperti itu, kita tidak lagi mempunyai sambungan persediaan seperti yang kita lihat sebelum ini untuk aset kita. Untuk aplikasi web saya sendiri, saya melihat peningkatan 500ms dalam LCP. Itu kemenangan yang kukuh!

Mengadakan keseluruhan aplikasi web pada CDN boleh menawarkan yang terbaik dari semua dunia. Kami mendapat caching kelebihan untuk sumber statik, tetapi tanpa kos sambungan. Malangnya, peningkatan ini tidak datang secara percuma. Mendapatkan semua proxying yang diperlukan dengan betul tidak sepenuhnya intuitif, dan kemudian masih ada keperluan untuk menubuhkan tajuk cache untuk mengelakkan permintaan yang tidak dapat dicapai daripada penggulungan di cache CDN.

Atas ialah kandungan terperinci Menyediakan CloudFront untuk menganjurkan aplikasi web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!