Buka konsol

Menayangkan konten dinamis dan menghosting layanan mikro dengan Cloud Run

Pasangkan Cloud Functions dengan Firebase Hosting untuk membuat dan menampilkan konten dinamis atau membuat REST API sebagai layanan mikro.

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

Untuk contoh kasus penggunaan dan sampel Cloud Functions yang diintegrasikan dengan Firebase Hosting, lihat ringkasan tanpa server kami.

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 bahwa:

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

  2. Setelah menyiapkan Cloud Functions, Anda dapat melanjutkan ke Langkah 2: Buat fungsi HTTP .

  3. Jika Anda belum menyiapkan Cloud Functions:

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

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

    3. Pastikan Anda memiliki direktori functions di direktori project lokal Anda. Direktori functions ini adalah tempat kode aktifnya Cloud Functions.

Langkah 2: Buat fungsi HTTP ke situs Hosting Anda

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

  2. Ganti konten file dengan kode berikut.

    Kode ini menciptakan fungsi HTTP (bernama bigben) yang menjawab permintaan HTTP 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. Menerapkan fungsi ini ke situs Anda dengan menjalankan perintah berikut dari root direktori project:

    firebase deploy

    Fungsi sekarang dapat dijangkau di URL
    https://us-central1-projectID.cloudfunctions.net/bigben.

Buka dokumentasi Cloud Functions untuk mempelajari permintaan HTTP lebih lanjut.

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

Langkah 3: Permintaan hosting langsung ke fungsi

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 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": "bigben"
     } ]
    }
    
  3. Jalankan perintah firebase deploy lagi.

    Fungsi Anda sekarang dapat dijangkau melalui URL berikut:

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

    • Semua domain kustom yang terhubung: custom-domain/bigben

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

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 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 melayani indeks situs kami 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 endpoint lainnya untuk mengembalikan 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 HTTP:

    exports.app = functions.https.onRequest(app);
    
  5. Di file firebase.json, arahkan semua permintaan ke fungsi app. Dengan penulisan ulang, Express.js dapat melayani sublokasi lain yang kami konfigurasikan (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 kami.

  1. Instal middleware cors dengan menjalankan perintah berikut:

    npm install --save cors
  2. Buka file /functions/index.js, lalu tambahkan cors ke aplikasi Express.js, seperti:

    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.

Menguji secara lokal

Anda dapat menyajikan dan menjalankan fungsi HTTP secara lokal menggunakan Firebase CLI. Dengan begitu, Anda dapat menampilkan dan menguji project Firebase sebelum menerapkannya ke produksi.

  1. Pastikan versi Firebase CLI dan SDK firebase-functions sudah yang terbaru. Untuk mengupdate keduanya, jalankan dua perintah berikut dari direktori functions project lokal Anda:

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. Sajikan project Firebase Anda secara lokal dengan menjalankan perintah berikut dari root direktori project Anda.

    Perintah ini mengemulasi hosting dan fungsi pada URL yang dihosting secara lokal.

    firebase serve
Jika Anda menggunakan Cloud Functions untuk menghasilkan konten dinamis bagi Firebase Hosting, secara default firebase serve menggunakan fungsi HTTP lokal Anda sebagai proxy untuk hosting. Untuk opsi konfigurasi lainnya untuk Firebase Hosting dan Cloud Functions, lihat Referensi Firebase CLI.

Langkah berikutnya