Menyajikan Konten Dinamis dengan Cloud Functions

Dengan Firebase Hosting, Anda dapat menggunakan Cloud Functions untuk melakukan pemrosesan di sisi server. Artinya, Anda dapat mendukung pembuatan konten dinamis untuk situs Firebase Hosting. Berikut adalah beberapa contoh dari apa yang dapat Anda lakukan:

  • Menyajikan konten dinamis. Daripada hanya menyajikan konten statis, Anda dapat melakukan logika sisi server melalui sebuah fungsi untuk menampilkan respons yang dihasilkan secara dinamis. Misalnya, Anda dapat memiliki URL seperti /blog/<id-for-blog-post>. Pola URL ini dapat diarahkan ke suatu fungsi yang secara dinamis menggunakan parameter ID entri blog URL untuk mengambil konten secara dinamis dari Firebase Realtime Database.
  • Melakukan render awal untuk aplikasi satu halaman guna meningkatkan performa SEO. Dengan demikian, Anda dapat membuat tag meta dinamis untuk berbagi di berbagai jaringan sosial.
  • Menjaga aplikasi web Anda tetap ringan. Anda dapat membuat API melalui Cloud Functions untuk situs Firebase Hosting guna mengambil konten secara asinkron. Dengan cara ini, Anda dapat mengurangi waktu muat awal untuk aplikasi web dengan menjaga kode klien tetap ringan dan memuat konten secara asinkron melalui sebuah fungsi.

Perhatikan bahwa Firebase Hosting tunduk pada waktu tunggu permintaan 60 detik. Untuk konten dinamis yang mungkin memerlukan waktu pembuatan lebih dari 60 detik, pertimbangkan untuk menggunakan lingkungan fleksibel App Engine.

Menghubungkan Cloud Functions ke Firebase Hosting

Untuk menghubungkan fungsi ke Firebase Hosting, Anda harus menyiapkan Cloud Functions, menuliskan fungsi, membuat aturan penulisan ulang, dan menerapkan perubahan. Untuk meningkatkan performa konten dinamis, Anda juga dapat melakukan penyempurnaan pada setelan cache (opsional).

Menyiapkan Cloud Functions untuk Firebase Hosting

Jika Anda telah menyiapkan Cloud Functions untuk Firebase, silakan lewati langkah ini dan lanjutkan ke membuat fungsi HTTP.

Untuk menyiapkan Cloud Functions untuk project, Anda memerlukan Firebase CLI versi terbaru yang memerlukan Node.js v6.3.1 atau lebih tinggi. Anda dapat menginstal Node dengan mengikuti petunjuk di https://nodejs.org/. Dengan menginstal Node.js, npm juga akan terinstal.

Untuk memeriksa versi Node.js yang terinstal, jalankan perintah ini di terminal Anda:

node --version

Untuk menginstal versi Firebase CLI, jalankan perintah berikut di terminal:

npm install -g firebase-tools

Untuk menghubungkan mesin lokal Anda ke akun Firebase dan mendapatkan akses ke project Firebase, jalankan perintah berikut:

$ firebase login

Selanjutnya, Anda harus menginisialisasi Cloud Functions.

Jika project Firebase belum diinisialisasi dengan Hosting, jalankan perintah berikut dalam direktori project Anda. Saat diminta, pilih untuk menginisialisasi Hosting dan Cloud Functions.

firebase init

Namun jika Anda memiliki project Firebase pada Hosting, jalankan perintah berikut dalam direktori project untuk hanya menginisialisasi Cloud Functions.

firebase init functions

Membuat fungsi HTTP ke situs Hosting Anda

Buka /functions/index.js di editor favorit Anda dan ganti isinya dengan kode berikut. Kode ini akan membuat fungsi HTTP dengan nama bigben.

const functions = require('firebase-functions');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1 // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

Mengarahkan permintaan hosting ke fungsi Anda

Dengan aturan penulisan ulang, Anda dapat mengarahkan permintaan yang cocok dengan pola tertentu ke satu tujuan. Misalnya, untuk mengarahkan semua permintaan dari halaman /bigben di situs Hosting guna menjalankan fungsi bigben, Anda harus membuka firebase.json dan menambahkan konfigurasi rewrite berikut di bagian hosting.

{
  "hosting": {
    "public": "public",

    // Add the following rewrites section *within* "hosting"
    "rewrites": [ {
      "source": "/bigben", "function": "bigben"
    } ]
  }
}

Perhatikan bahwa Firebase Hosting tunduk pada waktu tunggu permintaan 60 detik. Jadi, meskipun Anda mengonfigurasi fungsi HTTP dengan waktu tunggu permintaan yang lebih lama, Anda tetap akan menerima kode status HTTP 504 (waktu permintaan habis) jika fungsi Anda memerlukan waktu lebih dari 60 detik untuk dijalankan. Untuk mendukung jenis konten dinamis ini, pertimbangkan untuk menggunakan lingkungan fleksibel App Engine.

Anda dapat mempelajari lebih lanjut aturan penulisan ulang di sini.

Menjalankan konten dinamis secara lokal

Anda dapat menerapkan dan menjalankan konten dinamis secara lokal menggunakan Firebase CLI. Hal ini memungkinkan Anda untuk menguji situs sebelum menerapkannya ke tahap produksi.

Untuk menggunakan fitur ini, firebase-tools harus memiliki versi v3.8.0 atau yang lebih tinggi dan SDK firebase-functions harus memiliki versi v0.5.7 atau yang lebih tinggi. Untuk mengupdate keduanya, jalankan perintah berikut di direktori functions/ project Anda:

npm install --save firebase-functions@latest
npm install -g firebase-tools

Untuk menjalankan konten dinamis secara lokal, gunakan firebase serve:

firebase serve --only hosting,functions # emulates local hosting code and local functions code
firebase serve --only hosting # emulates local hosting code, but uses production functions as proxies

Perintah ini menghasilkan URL tempat Anda dapat melihat atau menguji konten Firebase Hosting dan fungsi HTTP.

Menerapkan

Setelah membuat fungsi dan menetapkan aturan penulisan ulang, terapkan project Firebase Anda dengan menjalankan perintah berikut di terminal Anda:

firebase deploy

Setelah penerapan dilakukan, Anda akan mendapati bahwa fungsi tersebut umumnya dapat diakses melalui URL seperti berikut:

https://us-central1-<your-project-id>.cloudfunctions.net/bigben

Semua traffic di situs Firebase Hosting Anda yang sesuai dengan lokasi yang ditentukan dalam aturan penulisan ulang akan di-proxy-kan ke fungsi yang sesuai.

Mencoba sampel

Setelah semuanya diterapkan, Anda dapat membuka /bigben di situs Firebase Hosting untuk melihat hasilnya.

https://<your-project-id>.firebaseapp.com/bigben

Menggunakan cookie

Saat menggunakan Firebase Hosting bersama dengan Cloud Functions, cookie umumnya dihapus dari permintaan masuk. Hal ini diperlukan agar perilaku cache CDN lebih efisien. Hanya cookie __session khusus yang diizinkan lolos ke eksekusi fungsi.

Jika ada, cookie __session secara otomatis dijadikan bagian dari kunci cache, sehingga tidak mungkin ada 2 pengguna dengan cookie berbeda menerima respons dari cache yang lain. Anda sebaiknya hanya menggunakan cookie __session jika fungsi Anda menyajikan konten yang berbeda, tergantung dari otorisasi pengguna.

Mengelola perilaku cache

Firebase Hosting menggunakan CDN global yang andal untuk membuat situs Anda dimuat secepat mungkin. Konten statis di Firebase Hosting disimpan dalam cache sampai Anda menerapkan versi konten yang baru. Karena fungsi menghasilkan konten secara dinamis, permintaan yang ditangani oleh suatu fungsi tidak akan disimpan dalam cache di CDN secara default. Anda dapat mengonfigurasi perilaku penyimpanan di cache untuk mempercepat aplikasi dan mengurangi biaya eksekusi fungsi.

Menyetel Cache-Control

Fitur utama yang akan Anda gunakan untuk mengelola cache adalah header Cache-Control. Dengan menetapkannya, Anda dapat memberi tahu browser dan CDN berapa lama konten Anda harus disimpan dalam cache. Dalam fungsi Anda, tetapkan Cache-Control seperti berikut:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

Header di atas melakukan 3 hal, di antaranya:

  • Menandai cache sebagai public. Artinya, konten ini dapat disimpan dalam cache oleh server perantara (dalam contoh ini, CDN). Secara default, Cache-Control ditetapkan ke private. Artinya, hanya browser pengguna yang diizinkan untuk menyimpannya dalam cache.
  • Memberi tahu browser berapa detik browser dapat menyimpan konten dalam cache dengan max-age. Pada contoh di atas, kita memberi tahu browser untuk menyimpan konten dalam cache selama lima menit.
  • Memberi tahu CDN berapa detik CDN dapat menyimpan konten dalam cache dengan s-maxage. Dalam contoh di atas, kita memberi tahu CDN untuk menyimpan konten dalam cache selama sepuluh menit.

Untuk max-age, tetapkan nilainya ke durasi terlama pengguna menerima konten usang, yang masih dapat Anda toleransi. Jika sebuah halaman berubah setiap beberapa detik, max-age harus merupakan angka yang kecil. Namun, jenis konten lain dapat disimpan dengan aman selama berjam-jam, berhari-hari, atau bahkan berbulan-bulan.

Anda dapat mempelajari lebih lanjut header Cache-Control di Mozilla Developer Network.

Kapan konten yang disimpan dalam cache ditampilkan?

Jika Anda telah menetapkan header Cache-Control publik, konten Anda disimpan dalam cache di CDN berdasarkan:

  • Hostname
  • Lokasi
  • String kueri
  • Isi header yang ditentukan di Vary

Header Vary adalah cara untuk menunjukkan bagian mana dalam permintaan Anda yang penting dalam menentukan respons. Sering kali, Anda tidak perlu mengkhawatirkan hal ini. Firebase Hosting otomatis memastikan bahwa header Vary yang sesuai akan ditetapkan dalam respons Anda untuk situasi yang umum. Hal ini termasuk memastikan bahwa cookie sesi atau header otorisasi yang Anda gunakan dijadikan sebagai bagian dari kunci cache, yang mencegah kebocoran konten yang tidak disengaja.

Dalam beberapa kasus penggunaan lanjutan, Anda mungkin memiliki header lain yang diperlukan untuk memengaruhi cache. Jika demikian, cukup setel header Vary pada respons Anda:

res.set('Vary', 'Accept-Encoding, X-My-Custom-Header');

Dengan setelan ini, dua permintaan identik dengan header X-My-Custom-Header berbeda akan disimpan dalam cache secara terpisah.

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.