Cloud Functions ile dinamik içerik sunun ve mikro hizmetleri barındırın

Dinamik içeriğinizi oluşturmak ve sunmak veya mikro hizmetler olarak REST API'leri oluşturmak için Bulut İşlevlerini Firebase Hosting ile eşleştirin.

Firebase için Bulut İşlevleri , 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ışır. Kendi sunucularınızı yönetmeye ve ölçeklendirmeye gerek yok.

Örneğin, Firebase Hosting ile entegre Bulut İşlevleri için kullanım senaryoları ve örnekleri için sunucusuz genel bakışımızı ziyaret edin.

Cloud Functions'ı Firebase Hosting'e Bağlayın

Bu bölüm, bir işlevi Firebase Hosting'e bağlamak için ayrıntılı bir örnek sağlar.

Dinamik içerik sunma performansını iyileştirmek için isteğe bağlı olarak önbellek ayarlarınızı yapabileceğinizi unutmayın.

1. Adım: Cloud Functions'ı kurun

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

    CLI'yi yükleme ve Barındırma'yı başlatma hakkında ayrıntılı talimatlar için Barındırma için Başlangıç ​​kılavuzuna bakın .

  2. Cloud Functions'ı kurduğunuzdan emin olun:

    • Cloud Functions'ı zaten kurduysanız Adım 2: Bir HTTPS işlevi oluşturun ve test edin.

    • Cloud Functions'ı kurmadıysanız :

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

        firebase init functions

      2. İstendiğinde JavaScript'i seçin (bu örnekte JS kullanılır).

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

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

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

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

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

    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. Firebase Local Emulator Suite'i 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 aracılığıyla erişin, örneğin: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

HTTPS istekleri hakkında daha fazla bilgi edinmek için Bulut İşlevleri belgelerini ziyaret edin.

Sonraki adım, Firebase tarafından barındırılan siteniz için dinamik içerik oluşturabilmesi için bir Firebase Barındırma URL'sinden bu HTTPS işlevine nasıl erişeceğiniz konusunda size yol gösterir.

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ımlar, barındırma sitenizdeki ../bigben yolundan tüm istekleri bigben işlevini yürütmek için nasıl yönlendireceğinizi gösterir.

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

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

    "hosting": {
  // ...

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

  3. Firebase öykünücüleriyle yeniden 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. Siteniz için CLI tarafından döndürülen yerel olarak barındırılan URL'yi ziyaret edin (genellikle localhost:5000 ), ancak URL'yi şu şekilde bigben ile ekleyin: http://localhost:5000/bigben

  4. İşlevinizi ve siteniz için işlevselliğini yineleyin. Bu yinelemeleri test etmek için Firebase öykünücülerini kullanın.

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

Dinamik içerik sunma performansını iyileştirmek için isteğe bağlı olarak önbellek ayarlarınızı yapabileceğinizi unutmayın.

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

İşleviniz öykünücüde istediğiniz gibi çalıştığında, onu gerçek proje kaynaklarıyla dağıtmaya, test etmeye ve çalıştırmaya devam edebilirsiniz. Bu, üretimde çalışan işlevler için ölçekleme davranışını kontrol etmek için çalışma zamanı seçeneklerini ayarlamayı düşünmek için iyi bir zamandır.

  1. Yerel proje dizininizin kökünden aşağıdaki komutu çalıştırarak, Barındırma içeriğinizin yanı sıra işlevinizi de dağıtın ve sitenize yapılandırın:

    firebase deploy --only functions,hosting

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

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

    • Bağlı herhangi bir özel alan :
      CUSTOM_DOMAIN /bigben

Bir web çerçevesi kullanın

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

Aşağıdaki bölüm, Express.js'yi Firebase Barındırma ve Bulut İşlevleri ile kullanmaya yönelik bir adım adım örnek sağlar.

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

    npm install express --save

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

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

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

    1. / adresinde web sitemizin dizinine hizmet edecek 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. Ve BONG sayısını API olarak JSON biçiminde /api altında döndürmek için 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ı bir 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, Express.js'nin yapılandırdığımız farklı alt yolu sunmasına izin verir (bu örnekte / ve /api ).

    {
 "hosting": {
   // ...

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

Ara katman yazılımı ekle

Örneğimize devam edersek, artık Express.js kullandığınıza göre, tipik bir şekilde Express.js ara katman yazılımını ekleyebilirsiniz. Örneğin, uç noktalarımızda CORS isteklerini etkinleştirebilirsiniz.

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

    npm install --save cors

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

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

Firebase'i Express uygulamaları ve ara yazılım modülleriyle kullanma hakkında daha fazla bilgi edinmek için Bulut İşlevleri belgelerini ziyaret edin.

Sonraki adımlar