Pasangkan Cloud Functions dengan Firebase Hosting untuk membuat dan menayangkan konten dinamis Anda atau membuat 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 cache secara opsional .
Langkah 1: Siapkan Cloud Functions
Pastikan Anda memiliki Firebase CLI versi terbaru dan telah menginisialisasi Firebase Hosting.
Untuk instruksi terperinci tentang penginstalan CLI dan menginisialisasi Hosting, lihat panduan Memulai untuk Hosting .
Pastikan Anda telah menyiapkan Cloud Functions:
Jika sudah menyiapkan Cloud Functions, Anda dapat melanjutkan ke Langkah 2: Membuat dan menguji fungsi HTTPS .
Jika Anda belum menyiapkan Cloud Functions:
Lakukan inisialisasi Cloud Functions dengan menjalankan perintah berikut dari root direktori project Anda:
firebase init functions
Saat diminta, pilih JavaScript (contoh panduan ini menggunakan JS).
Periksa apakah Anda memiliki direktori
functions
di direktori proyek lokal Anda (dibuat oleh perintah Firebase yang baru saja Anda jalankan). Direktorifunctions
ini adalah tempat kode untuk Cloud Functions berada.
Langkah 2: Buat dan uji fungsi HTTPS untuk situs Hosting Anda
Buka
/functions/index.js
di editor favorit Anda.Ganti isi file dengan kode berikut.
Kode ini membuat fungsi HTTPS (bernama
bigben
) yang membalas permintaan HTTPS denganBONG
untuk setiap jam dalam sehari, 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>`); });
Uji fungsi Anda secara lokal menggunakan Firebase Local Emulator Suite .
Dari root direktori proyek lokal Anda, jalankan perintah berikut:
firebase emulators:start
Akses fungsi melalui URL lokal yang dikembalikan oleh CLI, misalnya:
.http://localhost:5001/ PROJECT_ID /us-central1/bigben
Kunjungi dokumentasi Cloud Functions untuk mempelajari permintaan HTTPS lebih lanjut.
Langkah berikutnya memandu Anda tentang cara mengakses fungsi HTTPS ini dari URL Firebase Hosting sehingga dapat menghasilkan konten dinamis untuk situs yang dihosting 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-langkah berikut menunjukkan cara mengarahkan semua permintaan dari jalur ../bigben
di situs Hosting Anda untuk menjalankan fungsi bigben
.
Buka file
firebase.json
Anda.Tambahkan konfigurasi
rewrite
berikut di bawah bagianhosting
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "bigben", "region": "us-central1" // optional (see note below) } ] }
Konfirmasikan bahwa pengalihan Anda berfungsi seperti yang diharapkan dengan menguji lagi dengan emulator Firebase.
Dari root direktori proyek lokal Anda, jalankan perintah berikut:
firebase emulators:start
Kunjungi URL yang dihosting secara lokal untuk situs Anda sebagaimana dikembalikan oleh CLI (biasanya
localhost:5000
), tetapi tambahkan URL denganbigben
, seperti:http://localhost:5000/bigben
Ulangi fungsi Anda dan fungsinya untuk situs Anda. Gunakan emulator Firebase untuk menguji iterasi ini.
Kunjungi halaman konfigurasi Hosting untuk detail lebih lanjut tentang aturan penulisan ulang . Anda juga dapat mempelajari urutan prioritas respons untuk berbagai konfigurasi Hosting.
Perhatikan bahwa untuk meningkatkan kinerja penyajian konten dinamis, Anda dapat menyetel setelan cache secara opsional .
Langkah 4: Terapkan fungsi Anda
Setelah fungsi Anda berfungsi seperti yang diinginkan di emulator, Anda dapat melanjutkan ke penerapan, pengujian, dan menjalankannya dengan sumber daya proyek nyata . Ini saat yang tepat untuk mempertimbangkan menyetel opsi runtime guna mengontrol perilaku penskalaan untuk fungsi yang berjalan dalam produksi.
Terapkan fungsi serta konten dan konfigurasi Hosting Anda ke situs Anda dengan menjalankan perintah berikut dari root direktori proyek lokal Anda:
firebase deploy --only functions,hosting
Akses situs langsung Anda dan fungsi Anda di URL berikut:
Subdomain Firebase Anda:
PROJECT_ID .web.app/bigben
danPROJECT_ID .firebaseapp.com/bigben
Setiap domain khusus yang terhubung :
CUSTOM_DOMAIN /bigben
Gunakan kerangka kerja web
Anda dapat menggunakan framework web, seperti Express.js , di Cloud Functions untuk menyajikan konten dinamis aplikasi Anda dan menulis aplikasi web yang rumit dengan lebih mudah.
Bagian berikut memberikan contoh panduan untuk menggunakan Express.js dengan Firebase Hosting dan Cloud Functions.
Instal Express.js di proyek lokal Anda dengan menjalankan perintah berikut dari direktori
functions
Anda:npm install express --save
Buka file
/functions/index.js
Anda, lalu impor dan inisialisasi Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
Tambahkan dua titik akhir berikut:
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>`); });
Dan titik akhir lainnya untuk mengembalikan hitungan
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)}); });
Ekspor aplikasi Express.js sebagai fungsi HTTPS:
exports.app = functions.https.onRequest(app);
Di file
firebase.json
Anda, arahkan semua permintaan ke fungsiapp
. 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 middleware
Melanjutkan contoh kami, sekarang Anda menggunakan Express.js, Anda dapat menambahkan middleware Express.js dengan cara biasa. Misalnya, Anda dapat mengaktifkan permintaan CORS di endpoint kami.
Instal middleware
cors
dengan menjalankan perintah berikut:npm install --save cors
Buka file
/functions/index.js
Anda, lalu tambahkancors
ke aplikasi Express.js Anda, seperti ini:const cors = require('cors')({origin: true}); app.use(cors);
Kunjungi dokumentasi Cloud Functions untuk mempelajari lebih lanjut cara menggunakan Firebase dengan aplikasi Express dan modul middleware.
Langkah selanjutnya
Siapkan caching untuk konten dinamis Anda di CDN global.
Berinteraksi dengan layanan Firebase lainnya menggunakan Firebase Admin SDK .
Tinjau harga dan kuota serta batas untuk Cloud Functions.