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

GitHub deposunda mevcut bir Next.js veya Angular uygulaması (Next.js 13.5.x+ ya da Angular 18.2.x+) varsa App Hosting ile çalışmaya başlamak, App Hosting arka ucu oluşturup canlı dalınıza push işlemi yaparak dağıtımı başlatmak kadar kolaydır. Uygulamanız yoksa bu kılavuzda açıklanan adımları incelemek için örnek uygulamalarımızdan birini kullanın.

Yapay zeka yardımı için aşağıdaki istemi yapay zeka destekli kodlama aracınıza (ör. Antigravity, Claude Code, Codex ve Cursor) kopyalayın. İstemi özelleştirebilir ve temsilcinizle birlikte yineleme yapabilirsiniz. Ayrıntılı yükleme 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, bir GitHub deposuna her yeni taahhüt yapıldığında otomatik olarak dağıtmak için Firebase konsolunda App Hosting'nın nasıl ayarlanacağı açıklanmaktadır. Bu akışın sonunda, GitHub deponuzun main dalına yeni bir değişiklik gönderdiğiniz her seferinde yeniden dağıtılan canlı bir Next.js veya Angular örnek uygulamanız olur.

Bu kılavuzda önerilen Firebase konsol akışına odaklanılsa da diğer dağıtım yöntemleri de vardır. Örneğin, GitHub bağlantısı olmadan yerel kodu dağıtmak için Firebase CLI'yı kullanabilirsiniz.

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

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

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

  1. Firebase konsolunda Hosting ve sunucusuz > App Hosting'ya gidin.

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

  3. İstenirse App Hosting özelliğini kullanmak için kullandıkça öde Blaze fiyatlandırma planına yükseltin.

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

Bu adımları tamamlamak için talimatları uygulayın:

  • Birincil bölge seçin (genellikle kullanıcılarınıza en yakın bölge).
  • GitHub'a bağlanın. apphosting-adapters deposunu çatallayarak yeni oluşturduğunuz depoyu seçin.
  • Uygulamanızın kök dizinini aşağıdakilerden birine ayarlayın:
  • Canlı dalı ana olarak ayarlayın.
  • Otomatik kullanıma sunma özelliğini etkinleştirin (otomatik kullanıma sunma özelliği varsayılan olarak etkindir).
  • Arka uçunuza 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üncellemelerini (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.

Bitir ve dağıt'ı seçin.

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

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 alan adının biçimi backend-id--project-id.us-central1.hosted.app şeklindedir.

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

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

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

Arka uçunuz 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 tanınabilir düzenlemeyi yapın ve ardından 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 izleyin. Kullanıma sunma işlemi tamamlandığında, değişikliğinizi uygulamanın ana sayfasında görüntüleyebilirsiniz.

Sonraki adımlar