Uygulama Barındırma'yı kullanmaya başlayın

GitHub deposunda mevcut bir Next.js veya Angular uygulamanız (Next.js 13.5.x+ veya Angular 18.2.x+ sürümleri) varsa App Hosting'ı kullanmaya başlamak için App Hosting arka ucu oluşturup canlı dalınıza aktararak kullanıma sunma işlemini başlatmanız yeterlidir. Uygulamanız yoksa bu kılavuzda açıklanan adımları uygulamak için örnek uygulamalarımızdan birini kullanın.

Yapay zeka desteği için aşağıdaki istemi yapay zeka kodlama temsilcinize (ör. Antigravity, Claude Code, Codex ve Cursor) kopyalayın. İstemi özelleştirebilir ve temsilcinizle birlikte üzerinde çalışabilirsiniz. Ayrıntılı kurulum bilgileri için Firebase aracı becerileri sayfasını ziyaret edin. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

Bu kılavuzda, GitHub deposuna her yeni kayıt yapıldığında otomatik olarak dağıtım yapmak için Firebase konsolunda App Hosting hizmetinin nasıl ayarlanacağı açıklanmaktadır. Bu akışın sonunda, GitHub deponuzun main dalına her yeni değişiklik kaydettiğinizde yeniden dağıtılan canlı bir Next.js veya Angular örnek uygulamanız olur.

Bu kılavuzda önerilen Firebase konsol akışı ele alınsa da GitHub bağlantısı olmadan yerel kod dağıtmak için Firebase CLI'yi kullanmak gibi başka dağıtım yöntemleri de vardır.

1. adım: Demo deposunu çatallayın

https://github.com/firebase/apphosting-adapters adresini ziyaret edin ve Fork'u (Çatalla) seçin.

2. adım: App Hosting arka ucu oluşturun

  1. Firebase konsolunda Hosting & Serverless > App Hosting'e gidin.

  2. Başlayın'ı tıklayın.

  3. İstenirse App Hosting hizmetini kullanmak için kullandıkça öde Blaze fiyatlandırma planına geçin.

App Hosting arka uç kurulumunun ekran görüntüsü.

Aşağıdaki adımları tamamlamak için talimatları uygulayın:

  • Birincil bölgeyi (genellikle kullanıcılarınıza en yakın bölge) seçin.
  • GitHub'a bağlanın. apphosting-adapters deposunu çatallayarak oluşturduğunuz depoyu seçin.
  • Uygulamanızın kök dizinini aşağıdakilerden birine ayarlayın:
  • Canlı dalı main olarak ayarlayın.
  • Otomatik kullanıma sunmayı etkinleştirin (Otomatik kullanıma sunma varsayılan olarak etkindir).
  • Arka ucunuza bir ad atayın.
  • Çalışma zamanı ortamınızı seçin. Varsayılan olarak, önerilen en yeni Node.js sürümü sizin için önceden seçilir.
    • Otomatik Temel Resim Güncellemeleri'ni (ABIU) yapılandırın. ABIU varsayılan olarak etkindir ve temel ortamınıza güvenlik yamalarını otomatik olarak uygular. Çalışma zamanınız için "Belirtilmedi"yi seçerek ABIU'yu devre dışı bırakabilirsiniz.
  • Yeni bir Firebase web uygulaması oluşturun.

Finish and deploy'u (Bitir ve dağıt) seçin.

3. adım: Dağıtılan uygulamayı görüntüleme

Bir arka uç oluşturduğunuzda Firebase, son kullanıcıların web uygulamanızı ziyaret edebileceği ücretsiz bir alt alan adı sağlar. Bu alt alan adının biçimi backend-id--project-id.us-central1.hosted.app şeklindedir.

Arka ucunuzun kontrol panelindeki Arka uç bilgileri satırında, yeni web sitenizi görüntülemek için yayındaki arka ucunuzun bağlantısını seçin:

Canlı uygulama bağlantısının vurgulandığı arka uç bilgi satırının ekran görüntüsü.

4. adım: Değişiklik göndererek kullanıma sunma işlemini tetikleyin

Arka ucunuz oluşturulduktan ve canlı bir URL'niz olduktan sonra, GitHub deponuzun canlı dalına değişiklikleri her aktardığınızda web uygulamanızın yeni bir sürümünün kullanıma sunulmasını tetikleyebilirsiniz. App Hosting kurulumunuzu test etmek için:

  1. Demo GitHub deposunun çatallanmış sürümünde demo uygulamasının ana sayfasının kaynağına gidin, istediğiniz bir düzenlemeyi yapın ve değişikliğinizi ana dala gönderin. Ana sayfanızı bulmak için:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Firebase konsolunda, yeni değişikliğiniz üretime sunulurken App Hosting metriğini izleyin. Kullanıma sunma işlemi tamamlandığında, yaptığınız değişikliği uygulamanın ana sayfasında görebilirsiniz.

Sonraki adımlar