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

Dinamik içeriklerinizi oluşturup sunmak veya REST API'leri mikro hizmetler olarak oluşturmak için Cloud Functions ile Firebase Hosting'yi eşleştirin.

Cloud Functions for Firebase, HTTPS isteklerine yanıt olarak arka uç kodunu otomatik olarak çalıştırmanıza olanak tanır. Kodunuz, Google'ın bulutunda depolanır ve yönetilen bir ortamda çalıştırılır. Kendi sunucularınızı yönetmeniz ve ölçeklendirmeniz gerekmez.

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

Cloud Functions cihazını Firebase Hosting ağına bağlama

Bu bölümde, bir işlevi Firebase Hosting'ya bağlama konusunda adım adım bir örnek verilmektedir.

Dinamik içerik yayınlama performansını artırmak için önbellek ayarlarınızı isteğe bağlı olarak ayarlayabilirsiniz.

1. adım: Cloud Functions kurulumunu yapın

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

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

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

    • Cloud Functions'ı daha önce ayarladıysanız 2. adım: HTTPS işlevi oluşturma ve test etme bölümüne geçebilirsiniz.

    • Cloud Functions'ı ayarlamadıysanız:

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

        firebase init functions

      2. İstendiğinde JavaScript'i seçin (bu adım adım açıklama örneğinde JS kullanılmaktadır).

      3. Yerel proje dizininizde (az önce çalıştırdığınız Firebase komutuyla oluşturulan) bir functions dizininin olup olmadığını kontrol edin. Bu functions dizini, Cloud Functions kodunun bulunduğu yerdir.

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

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

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

    Bu kod, günün her saati için saat gibi BONG ile HTTPS isteklerine 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. CLI tarafından döndürülen yerel URL üzerinden işleve 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 ziyaret edin.

Bir sonraki adımda, bu HTTPS işlevine bir Firebase Hosting URL'sinden nasıl erişeceğiniz açıklanmaktadır. Böylece, Firebase'de barındırılan siteniz için dinamik içerik oluşturabilirsiniz.

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

Yeniden yazma kurallarıyla, belirli kalıplarla eşleşen istekleri tek bir hedefe yönlendirebilirsiniz. Aşağıdaki adımlarda, Hosting sitenizdeki ../bigben yolundan gelen tüm istekleri bigben işlevini yürütecek şekilde nasıl yönlendireceğiniz gösterilmektedir.

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

  2. hosting bölümüne 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ı doğrulayı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 sitenizdeki işlevselliğini yineleyin. Bu yinelemeleri test etmek için Firebase emülatörlerini kullanın.

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

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

Hosting yapılandırma sayfasını ziyaret ederek yeniden yazma kuralları hakkında daha fazla bilgi edinin. Ayrıca, çeşitli Hosting yapılandırmaları için yanıtların öncelik sırası hakkında da bilgi edinebilirsiniz.

Dinamik içerik yayınlama performansını artırmak için önbellek ayarlarınızı isteğe bağlı olarak ayarlayabilirsiniz.

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

İşleviniz emülatörde istediğiniz gibi çalıştıktan sonra gerçek proje kaynaklarıyla 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 üzere çalışma zamanı seçeneklerini ayarlamak için iyi bir zamandır.

  1. Aşağıdaki komutu yerel proje dizininizin kökünden ç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. Aşağıdaki URL'lerden canlı sitenize ve işlevinize erişin:

    • Firebase alt alanları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ğine hizmet vermek ve karmaşık web uygulamalarını daha kolay yazmak için Cloud Functions'da Express.js gibi web çerçevelerini kullanabilirsiniz.

Aşağıdaki bölümde, Express.js'nin Firebase Hosting ve Cloud Functions ile birlikte kullanımına ilişkin adım adım açıklamalı bir örnek verilmektedir.

  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 dizinini / adresinde yayınlamak için 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. Ayrıca, BONG sayısını JSON biçiminde API olarak döndüren başka bir uç nokta da vardır. Bu uç nokta /api altında yer alır:

      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'nin 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 edersek artık Express.js kullandığınız için Express.js ara yazılımını normal şekilde ekleyebilirsiniz. Örneğin, uç noktalarımızda CORS isteklerini etkinleştirebilirsiniz.

  1. Aşağıdaki komutu çalıştırarak cors ara 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 ekleyin. Örneğin:

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

Express uygulamaları ve ara katman yazılımı modülleriyle Firebase'i kullanma hakkında daha fazla bilgi edinmek için Cloud Functions dokümanlarını ziyaret edin.

Sonraki adımlar