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 direktoriproject lokal Anda. Direktori functions ini adalah tempat di mana kode untuk Cloud Function aktif.

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 function HTTP (dinamai bigben) yang merespon 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

    Function 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 function bigben.

  1. Buka firebase.json file Anda.

  2. Tambahkan konfigurasi rewrite berikut di bawah 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 tentang 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 Anda dengan menjalankan perintah berikut dari direktorifunctions 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 satu endpoint lain 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 dalam file firebase.json Anda, arahkan semua permintaan ke function app. Penulisan ulang ini memungkinkan Express.js untuk melayani subpath yang berbeda 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 pada endpoint kami.

  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.

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 bahwa Firebase CLI dan SDK firebase-functions merupaka versi yang terbaru. Untuk memperbarui keduanya, jalankan dua perintah berikut dari direktori functions di proyek 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
Ketika Anda menggunakan Cloud Functions untuk menghasilkan konten dinamis untuk Firebase Hosting, firebase serve, secara default, akan menggunakan function HTTP lokal Anda sebagai proxy untuk hosting. Untuk opsi konfigurasi lainnya untuk Firebase Hosting dan Cloud Functions, lihat Referensi Firebase CLI.

Langkah berikutnya