Menayangkan konten dinamis dan menghosting microservice dengan Cloud Functions

Pasangkan Cloud Functions dengan Firebase Hosting untuk membuat dan menayangkan konten dinamis, atau membuat REST API sebagai microservice.

Dengan Cloud Functions for Firebase, Anda dapat otomatis menjalankan kode backend sebagai respons terhadap permintaan HTTPS. Kode Anda disimpan di cloud Google dan dijalankan di lingkungan terkelola. Anda tidak perlu mengelola dan menyesuaikan skala server sendiri.

Untuk melihat kasus penggunaan dan contoh integrasi Cloud Functions dengan Firebase Hosting, lihat ringkasan serverless.

Menghubungkan Cloud Functions ke Firebase Hosting

Bagian ini memberikan contoh panduan untuk menghubungkan fungsi ke Firebase Hosting.

Perlu diingat bahwa untuk meningkatkan performa penayangan konten dinamis, Anda juga dapat menyesuaikan setelan cache (opsional).

Langkah 1: Siapkan Cloud Functions

  1. Pastikan Anda memiliki Firebase CLI versi terbaru dan Firebase Hosting telah diinisialisasi.

    Untuk mendapatkan petunjuk terperinci tentang cara menginstal CLI dan menginisialisasi Hosting, lihat panduan Memulai Hosting.

  2. Pastikan Anda telah menyiapkan Cloud Functions:

    • Jika sudah menyiapkan Cloud Functions, Anda dapat melanjutkan ke Langkah 2: Buat dan uji fungsi HTTPS.

    • Jika Anda belum menyiapkan Cloud Functions:

      1. Inisialisasi Cloud Functions dengan menjalankan perintah berikut dari root direktori project Anda:

        firebase init functions

      2. Saat diminta, pilih JavaScript (contoh panduan ini menggunakan JS).

      3. Pastikan Anda memiliki direktori functions di direktori project lokal (dibuat dengan perintah Firebase yang baru saja Anda jalankan). Di direktori functions inilah kode untuk Cloud Function berada.

Langkah 2: Buat dan uji fungsi HTTPS untuk situs Hosting

  1. Buka /functions/index.js di editor favorit Anda.

  2. Ganti konten file dengan kode berikut.

    Kode ini membuat fungsi HTTPS (dinamai bigben) yang merespons permintaan HTTPS dengan BONG untuk setiap jam dalam sehari, seperti halnya jam.

    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>`);
});

  3. Uji fungsi Anda secara lokal menggunakan Firebase Local Emulator Suite.

    1. Dari root direktori project lokal Anda, jalankan perintah berikut:

      firebase emulators:start

    2. Akses fungsi melalui URL lokal yang ditampilkan oleh CLI, misalnya: http://localhost:5001/PROJECT_ID/us-central1/bigben.

Buka dokumentasi Cloud Functions untuk mempelajari permintaan HTTPS lebih lanjut.

Langkah selanjutnya memandu Anda dalam mengakses fungsi HTTPS ini dari URL Firebase Hosting sehingga dapat menghasilkan konten dinamis untuk situs yang di-hosting oleh Firebase.

Langkah 3: Arahkan permintaan HTTPS ke fungsi Anda

Dengan aturan penulisan ulang, Anda dapat mengarahkan permintaan yang cocok dengan pola tertentu ke satu tujuan. Langkah berikut menunjukkan cara mengarahkan semua permintaan dari jalur ../bigben di situs Hosting Anda untuk menjalankan fungsi bigben.

  1. Buka file firebase.json Anda.

  2. Tambahkan konfigurasi rewrite berikut di bagian hosting:

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. Pastikan pengalihan Anda berfungsi sesuai harapan dengan mengulangi pengujian menggunakan emulator Firebase.

    1. Dari root direktori project lokal Anda, jalankan perintah berikut:

      firebase emulators:start

    2. Buka URL yang dihosting secara lokal untuk situs Anda seperti yang ditampilkan oleh CLI (biasanya localhost:5000), tetapi tambahkan bigben ke akhir URL, seperti berikut: http://localhost:5000/bigben

  4. Lakukan iterasi pada fungsi tersebut dan fungsionalitasnya untuk situs Anda. Gunakan emulator Firebase untuk menguji iterasi ini.

Untuk mendapatkan performa terbaik, lakukan kolokasi fungsi Anda menggunakan Hosting dengan memilih salah satu region berikut:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

Buka halaman konfigurasi Hosting untuk mengetahui penjelasan selengkapnya tentang aturan penulisan ulang. Anda juga dapat mempelajari urutan prioritas respons untuk berbagai konfigurasi Hosting.

Perlu diingat bahwa untuk meningkatkan performa penayangan konten dinamis, Anda juga dapat menyesuaikan setelan cache (opsional).

Langkah 4: Deploy fungsi

Setelah fungsi berjalan sesuai harapan di emulator, Anda dapat melanjutkan men-deploy, menguji, dan menjalankannya dengan resource project yang sebenarnya. Ini adalah saat yang tepat untuk mempertimbangkan menyetel opsi runtime guna mengontrol perilaku penskalaan untuk fungsi yang berjalan dalam lingkungan produksi.

  1. Deploy fungsi, juga konten dan konfigurasi Hosting, ke situs Anda dengan menjalankan perintah berikut dari root direktori project lokal:

    firebase deploy --only functions,hosting

  2. Akses situs live dan fungsi Anda pada URL berikut:

    • Subdomain Firebase Anda:
      PROJECT_ID.web.app/bigben dan PROJECT_ID.firebaseapp.com/bigben

    • Setiap domain kustom yang terhubung:
      CUSTOM_DOMAIN/bigben

Menggunakan framework web

Anda dapat menggunakan framework web, seperti Express.js, di Cloud Functions untuk menayangkan konten dinamis aplikasi dan menulis aplikasi web yang kompleks dengan lebih mudah.

Bagian berikut memberikan contoh panduan untuk menggunakan Express.js dengan Firebase Hosting dan Cloud Functions.

  1. Instal Express.js di project lokal Anda dengan menjalankan perintah berikut dari direktori functions Anda:

    npm install express --save

  2. Buka file /functions/index.js, lalu impor dan inisialisasi Express.js:

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

  3. Tambahkan dua endpoint berikut:

    1. Tambahkan endpoint pertama untuk menayangkan indeks situs di /.

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. Dan satu endpoint lain untuk menampilkan jumlah BONG sebagai API, dalam format JSON, di bagian /api:

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. Ekspor aplikasi Express.js sebagai fungsi HTTPS:

    exports.app = functions.https.onRequest(app);

  5. Di dalam file firebase.json Anda, arahkan semua permintaan ke fungsi app. Penulisan ulang ini memungkinkan Express.js untuk menayangkan subjalur berbeda yang telah dikonfigurasi (dalam contoh ini, / dan /api).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Menambahkan middleware

Melanjutkan contoh kami, setelah menggunakan Express.js, Anda dapat menambahkan middleware Express.js dengan cara yang umum. Misalnya, Anda dapat mengaktifkan permintaan CORS di endpoint.

  1. Instal middleware cors dengan menjalankan perintah berikut:

    npm install --save cors

  2. Buka file /functions/index.js Anda, lalu tambahkan cors ke aplikasi Express.js, seperti ini:

    const cors = require('cors')({origin: true});
app.use(cors);

Buka dokumentasi Cloud Functions untuk mempelajari penggunaan Firebase dengan aplikasi Express dan modul middleware lebih lanjut.

Langkah berikutnya