Halaman ini diterjemahkan oleh Cloud Translation API.

Sajikan konten dinamis dan host layanan mikro dengan Cloud Functions

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:
  1. Lakukan 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

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 dengan BONG 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 .
1. Dari root 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 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 bagian hosting :

"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.
1. Dari root direktori proyek lokal Anda, jalankan perintah berikut:
```
firebase emulators:start
```
2. Kunjungi URL yang dihosting secara lokal untuk situs Anda sebagaimana dikembalikan oleh CLI (biasanya localhost:5000 ), tetapi tambahkan URL dengan bigben , 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 dan PROJECT_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 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 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 tambahkan cors 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.