Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Sajikan konten dinamis dan host layanan mikro dengan Cloud Functions

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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

Cloud Functions for Firebase memungkinkan Anda menjalankan kode backend secara otomatis sebagai respons terhadap permintaan HTTPS. Kode Anda disimpan di cloud Google dan berjalan di lingkungan terkelola. Tidak perlu mengelola dan menskalakan server Anda sendiri.

Misalnya kasus penggunaan dan contoh untuk Cloud Functions yang terintegrasi dengan Firebase Hosting, kunjungi ikhtisar tanpa server kami.

Hubungkan Cloud Functions ke Firebase Hosting

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

Perhatikan bahwa untuk meningkatkan kinerja penyajian konten dinamis, Anda dapat menyetel setelan tembolok secara opsional .

Langkah 1: Siapkan Cloud Functions

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

    Untuk petunjuk rinci tentang menginstal CLI dan menginisialisasi Hosting, lihat panduan Memulai untuk Hosting .

  2. Pastikan Anda telah menyiapkan Cloud Functions:

    • Jika Anda telah menyiapkan Cloud Functions, Anda dapat melanjutkan ke Langkah 2: Membuat dan menguji 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. Periksa apakah Anda memiliki direktori functions di direktori proyek lokal Anda (dibuat oleh perintah Firebase yang baru saja Anda jalankan). Direktori functions ini adalah tempat kode untuk Cloud Functions berada.

Langkah 2: Buat dan uji fungsi HTTPS untuk situs Hosting Anda

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

  2. Ganti isi file dengan kode berikut.

    Kode ini membuat fungsi HTTPS (bernama bigben ) yang membalas permintaan HTTPS dengan BONG untuk setiap jam dalam sehari, sama seperti 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 akar direktori proyek lokal Anda, jalankan perintah berikut:

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

Kunjungi dokumentasi Cloud Functions untuk mempelajari lebih lanjut tentang permintaan HTTPS.

Langkah selanjutnya memandu Anda melalui cara mengakses fungsi HTTPS ini dari URL Firebase Hosting sehingga dapat menghasilkan konten dinamis untuk situs yang dihosting 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-langkah berikut menunjukkan kepada Anda bagaimana 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 bawah bagian hosting :

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. Konfirmasikan bahwa pengalihan Anda berfungsi seperti yang diharapkan dengan menguji lagi dengan emulator Firebase.

    1. Dari akar direktori proyek lokal Anda, jalankan perintah berikut:

      firebase emulators:start
    2. Kunjungi URL yang dihosting secara lokal untuk situs Anda seperti yang dikembalikan oleh CLI (biasanya localhost:5000 ), tetapi tambahkan URL dengan bigben , seperti: http://localhost:5000/bigben

  4. Ulangi fungsi Anda dan fungsinya untuk situs Anda. Gunakan emulator Firebase untuk menguji iterasi ini.

Kunjungi halaman konfigurasi Hosting untuk detail selengkapnya tentang aturan penulisan ulang . Anda juga dapat mempelajari tentang urutan prioritas tanggapan untuk berbagai konfigurasi Hosting.

Perhatikan bahwa untuk meningkatkan kinerja penyajian konten dinamis, Anda dapat menyetel setelan tembolok secara opsional .

Langkah 4: Terapkan fungsi Anda

Setelah fungsi Anda berfungsi seperti yang diinginkan di emulator, Anda dapat melanjutkan untuk menerapkan, menguji, dan menjalankannya dengan sumber daya proyek nyata . Ini adalah saat yang tepat untuk mempertimbangkan pengaturan opsi runtime untuk mengontrol perilaku penskalaan untuk fungsi yang berjalan dalam produksi.

  1. Terapkan fungsi Anda serta konten dan konfigurasi Hosting Anda ke situs Anda dengan menjalankan perintah berikut dari akar direktori proyek lokal Anda:

    firebase deploy --only functions,hosting
  2. Akses situs langsung Anda dan fungsi Anda di URL berikut:

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

    • Setiap domain khusus yang terhubung :
      CUSTOM_DOMAIN /bigben

Gunakan kerangka kerja web

Anda dapat menggunakan kerangka kerja web, seperti Express.js , di Cloud Functions untuk menyajikan konten dinamis aplikasi Anda 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 proyek lokal Anda dengan menjalankan perintah berikut dari direktori functions Anda:

    npm install express --save
  2. Buka file /functions/index.js Anda, lalu impor dan inisialisasi Express.js:

    const functions = require('firebase-functions');
    const express = require('express');
    const app = express();
    
  3. Tambahkan dua titik akhir berikut:

    1. Tambahkan titik akhir pertama untuk melayani indeks situs web 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 titik akhir lain untuk mengembalikan jumlah BONG sebagai API, dalam format JSON, di bawah /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 file firebase.json Anda, arahkan semua permintaan ke fungsi app . Penulisan ulang ini memungkinkan Express.js untuk melayani subpath berbeda yang kami konfigurasikan (dalam contoh ini, / dan /api ).

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

Tambahkan perangkat tengah

Melanjutkan contoh kami, sekarang Anda menggunakan Express.js, Anda dapat menambahkan middleware Express.js dengan cara yang biasa. Misalnya, Anda dapat mengaktifkan permintaan CORS di titik akhir kami.

  1. Instal cors middleware dengan menjalankan perintah berikut:

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

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

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

Langkah selanjutnya