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'i kullanmaya başlamak için App Hosting arka ucu oluşturup canlı dalınıza aktararak kullanıma sunabilirsiniz. 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 destekli kodlama asistanınıza (ö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 aracının 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'yı kullanmak gibi başka dağıtım yöntemleri de vardır.

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

GitHub deposunda Next.js veya Angular uygulamanız varsa bu adımı atlayıp 2. adım: App Hosting arka ucu oluşturun bölümüne geçebilirsiniz. Kendi uygulamanızı dağıtmak için apphosting-adapters deposunu çatallamanız veya yüklemeniz gerekmez.

Mevcut bir uygulamanız yoksa ve örnek bir uygulama dağıtmak istiyorsanız https://github.com/firebase/apphosting-adapters adresini ziyaret edin ve Fork'u (Çatalla) seçin. Bu depoda, çerçeve bağdaştırıcı araçlarının yanı sıra /starters dizininde resmi Next.js ve Angular başlangıç şablonları da bulunur.

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 ürününü 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ölge seçin (genellikle kullanıcılarınıza en yakın bölge).

  • GitHub'a bağlanın. apphosting-adapters deposunu çatallayarak oluşturduğunuz depoyu veya mevcut uygulama deponuzu seçin.

  • Uygulamanızın kök dizinini ayarlayın:

    • Kendi uygulamanızı dağıtıyorsanız uygulamanızın kök dizinini belirtin (varsayılan olarak /). Bu dizin genellikle package.json dosyanızın bulunduğu yerdir.

    • apphosting-adapters demo deposunu kullanıyorsanız uygulamanızın kök dizinini aşağıdaki yollardan birine ayarlayın:

    • /starters/nextjs/basic

    • /starters/angular/basic

  • 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 Görüntü 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.

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.

Yeni web sitenizi görüntülemek için arka ucunuzun kontrol panelindeki Arka uç bilgileri satırında canlı 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ış kopyasında demo uygulamasının ana sayfasının kaynak koduna 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 değişikliğinizi uygulamanın ana sayfasında görebilirsiniz.

Sonraki adımlar