Cloud Functions ile dinamik içerik sunma ve mikro hizmetler sunma

Dinamik içeriklerinizi oluşturmak ve yayınlamak ya da REST API'leri mikro hizmet olarak oluşturmak için Cloud Functions'ü Firebase Hosting ile eşleyin.

Cloud Functions for Firebase, HTTPS isteklerine yanıt olarak arka uç kodunu otomatik olarak çalıştırmanızı sağlar. Kodunuz, Google'ın bulutunda depolanır ve yönetilen bir ortamda çalıştırılır. Kendi sunucularınızı yönetmenize ve ölçeklendirmenize gerek yoktur.

Firebase Hosting ile entegre Cloud Functions için örnek kullanım alanları ve örnekler için sunucusuz hizmetlere genel bakış sayfamızı ziyaret edin.

Cloud Functions'ü Firebase Hosting'a bağlama

Bu bölümde, bir işlevi Firebase Hosting öğesine bağlamayla ilgili adım adım açıklamalı bir örnek sunulmaktadır.

Dinamik içerik yayınlamanın performansını artırmak için isteğe bağlı olarak önbellek ayarlarınızı düzenleyebileceğinizi unutmayın.

1. Adım: Cloud Functions'yi ayarlayın

  1. Firebase CLI'nin en son sürümüne sahip olduğunuzdan ve Firebase Hosting'ı başlattığınızdan emin olun.

    CLI'yi yükleme ve Hosting'ü başlatma hakkında ayrıntılı talimatlar için Hosting için Başlangıç Kılavuzu'na bakın.

  2. Cloud Functions'yi ayarladığınızdan emin olun:

    • Cloud Functions'yi zaten oluşturduysanız 2. Adım: HTTPS işlevi oluşturun ve test edin'e geçebilirsiniz.

    • Cloud Functions hizmetini kurmadıysanız:

      1. Proje dizininizin kökünden aşağıdaki komutu çalıştırarak Cloud Functions dosyasını başlatın:

        firebase init functions

      2. İstendiğinde JavaScript'i seçin (Bu adım adım açıklamalı örnekte JS kullanılır).

      3. Yerel proje dizininizde bir functions dizini (az önce çalıştırdığınız Firebase komutu tarafından oluşturulur) olup olmadığını kontrol edin. Cloud Functions kodunun bulunduğu dizin budur.

2. Adım: Hosting siteniz için bir HTTPS işlevi oluşturun ve test edin

  1. /functions/index.js uygulamasını favori düzenleyicinizde açın.

  2. Dosyanın içeriğini aşağıdaki kodla değiştirin.

    Bu kod, HTTPS isteklerine tıpkı bir saat gibi günün her saati için BONG ile yanıt veren bir HTTPS işlevi (bigben adlı) oluşturur.

    const functions = require('firebase-functions/v1');

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. Firebase Local Emulator Suite kullanarak işlevlerinizi yerel olarak test edin.

    1. Yerel proje dizininizin kökünden aşağıdaki komutu çalıştırın:

      firebase emulators:start

    2. İşleve, CLI tarafından döndürülen yerel URL üzerinden erişin. Örneğin: http://localhost:5001/PROJECT_ID/us-central1/bigben.

HTTPS istekleri hakkında daha fazla bilgi edinmek için Cloud Functions belgelerini inceleyin.

Bir sonraki adımda, Firebase'da barındırılan siteniz için dinamik içerik oluşturabilmesi amacıyla bu HTTPS işlevine Firebase Hosting URL'sinden nasıl erişeceğiniz açıklanmaktadır.

3. adım: HTTPS isteklerini işlevinize yönlendirin

Yeniden yazma kuralları sayesinde, belirli kalıplarla eşleşen istekleri tek bir hedefe yönlendirebilirsiniz. Aşağıdaki adımlarda, Hosting sitenizdeki ../bigben yolundan gelen tüm isteklerin bigben işlevini yürütmek için nasıl yönlendirileceği gösterilmektedir.

  1. firebase.json dosyanızı açın.

  2. hosting bölümü altına aşağıdaki rewrite yapılandırmasını ekleyin:

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. Firebase emülatörleriyle tekrar test ederek yönlendirmenizin beklendiği gibi çalıştığını onaylayın.

    1. Yerel proje dizininizin kökünden aşağıdaki komutu çalıştırın:

      firebase emulators:start

    2. CLI tarafından döndürülen sitenizin yerel olarak barındırılan URL'sini (genellikle localhost:5000) ziyaret edin ancak URL'ye bigben ekleyin. Örneğin: http://localhost:5000/bigben

  4. İşlevinizi ve siteniz için işlevini tekrarlayın. Bu iterasyonları test etmek için Firebase emülatörlerini kullanın.

En iyi performans için aşağıdaki bölgelerden birini seçerek işlevlerinizi Hosting ile birlikte barındırın:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

Yeniden yazma kuralları hakkında daha fazla bilgi için Hosting yapılandırma sayfasını ziyaret edin. Çeşitli Hosting yapılandırmaları için yanıtların öncelik sırası hakkında da bilgi edinebilirsiniz.

Dinamik içerik yayınlamanın performansını artırmak için isteğe bağlı olarak önbellek ayarlarınızı düzenleyebileceğinizi unutmayın.

4. adım: İşlevinizi dağıtın

İşleviniz emülatörde istediğiniz gibi çalışmaya başladıktan sonra gerçek proje kaynaklarıyla işlevi dağıtma, test etme ve çalıştırma işlemlerine geçebilirsiniz. Bu, üretimde çalışan işlevler için ölçeklendirme davranışını kontrol etmek amacıyla çalışma zamanı seçeneklerini ayarlamak için iyi bir zamandır.

  1. Yerel proje dizininizin kökünden aşağıdaki komutu çalıştırarak işlevinizin yanı sıra Hosting içeriğinizi ve yapılandırmanızı sitenize dağıtın:

    firebase deploy --only functions,hosting

  2. Canlı sitenize ve işlevinize aşağıdaki URL'lerden erişebilirsiniz:

    • Firebase alt alan adlarınız:
      PROJECT_ID.web.app/bigben ve PROJECT_ID.firebaseapp.com/bigben

    • Bağlı tüm özel alanlar:
      CUSTOM_DOMAIN/bigben

Web çerçevesi kullanma

Uygulamanızın dinamik içeriğini yayınlamak ve karmaşık web uygulamalarını daha kolay yazmak için Cloud Functions'de Express.js gibi web çerçevelerini kullanabilirsiniz.

Aşağıdaki bölümde, Firebase Hosting ve Cloud Functions ile Express.js kullanımı hakkında adım adım açıklamalı bir örnek verilmiştir.

  1. functions dizininizden aşağıdaki komutu çalıştırarak Express.js'yi yerel projenize yükleyin:

    npm install express --save

  2. /functions/index.js dosyanızı açın, ardından Express.js'yi içe aktarıp başlatın:

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. Aşağıdaki iki uç noktayı ekleyin:

    1. Web sitemizin dizini / adresinde yayınlanacak ilk uç noktayı ekleyin.

      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. BONG sayısını /api altında JSON biçiminde API olarak döndürecek başka bir uç nokta:

      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. Express.js uygulamasını HTTPS işlevi olarak dışa aktarın:

    exports.app = functions.https.onRequest(app);

  5. firebase.json dosyanızda, tüm istekleri app işlevine yönlendirin. Bu yeniden yazma işlemi, Express.js'in yapılandırdığımız farklı alt yolu (bu örnekte / ve /api) sunmasına olanak tanır.

    {
 "hosting": {
   // ...

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

Ara katman yazılımı ekleme

Örneğimize devam edelim. Express.js'yi kullandığınızda Express.js ara yazılımını normal şekilde ekleyebilirsiniz. Örneğin, uç noktalarınızda CORS isteklerini etkinleştirebilirsiniz.

  1. Aşağıdaki komutu çalıştırarak cors aracı yazılımını yükleyin:

    npm install --save cors

  2. /functions/index.js dosyanızı açın, ardından Express.js uygulamanıza cors'ı şu şekilde ekleyin:

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

Firebase'i Express uygulamaları ve orta katman modülleriyle kullanma hakkında daha fazla bilgi edinmek için Cloud Functions belgelerini inceleyin.

Sonraki adımlar