Dağıtma ve Yineleme

  • Vercel'i kullanarak MVP'nizi canlı bir üretim URL'sine dağıtın
  • API rotalarınızı kötüye kullanımdan korumak için hız sınırlaması ekleyin
  • Yayına aldıktan sonra yapay zeka özelliklerinizi izlemek için yapılandırılmış günlük kaydı ayarlayın
  • DevTools'u kullanarak uygulamanızın güvenliğini kontrol edin
  • Lansman öncesi kontrol listesini kullanarak uygulamanızın üretim aşamasına hazır olup olmadığını değerlendirin
  • Canlı Yayın Uygulaması: Herkesin erişebileceği genel bir HTTPS URL’sine dağıtılmış MVP’niz
  • GitHub deposunda bulunan, hata ayıklaması yapılmış ve test edilmiş bir MVP
  • Giriş, kayıt ve API rota koruması ile kullanıcı kimlik doğrulaması 
  • Depolama özelliği yapılandırılmış bir Supabase projesi 
  • Kullanıcı testlerinden elde edilen geri bildirimler uygulamanıza entegre edildi

MVP’den Üretime

Uygulamanız çalışıyor. Kullanıcılar tarafından test edildi, hataları giderdiniz ve kullanıcı kimlik doğrulaması eklediniz. Ancak şu anda, yalnızca Codespaces önizleme bağlantınıza sahip kişiler uygulamayı kullanabiliyor ve Codespace’iniz çalışmayı durdurduğunda bu bağlantı ortadan kalkıyor.

Bu modül, MVP uygulamanızı “kendi bilgisayarımda çalışıyor” durumundan “internetteki herkes tarafından kullanılabilir” durumuna getirir.

Bu ünite boyunca, diğer derslerde de kullandığımız özel ders öneri uygulaması olan TutorMatch’i rehber örnek olarak kullanacağız. TutorMatch’in Codespaces ortamında çalışır halinden herkesin erişebileceği canlı bir URL’ye dönüşüm sürecini görecek ve ardından her adımı kendi MVP’nize uyarlayacaksınız.

Uygulamanız Codespaces'ten genel erişime açık bir URL'ye taşındığında üç şey değişir:

Görünürlük

Uygulamanız bir URL aracılığıyla herkese açık hale gelir. Bu URL’yi bulan veya alan herkes, sadece ekibiniz değil, uygulamayı kullanmayı deneyebilir.

Azim

Uygulamanızın, sizin elle başlatmanıza gerek kalmadan çalışır durumda kalması gerekir. Codespaces’te testler sırasında sunucularınızı elle başlatıyordunuz, ancak gerçek kullanıcıların bulunduğu üretim ortamında barındırma platformu, uygulamanızı otomatik olarak çalışır durumda tutar.

Maliyet

Her AI API çağrısı maliyetlidir. Codespaces’te, uygulamanızı kimin kullanacağını siz kontrol ediyordunuz (çoğunlukla siz). Halka açık bir URL kullanıldığında, kullanıcı ve API kimlik doğrulaması yapılsa bile, kötüye kullanıma karşı ek koruma önlemleri almanız gerekir.

Bir Dağıtım Platformunun Seçilmesi

Uygulamanızı, yalnızca sizin erişebileceğiniz bir geliştirme ortamı olan Codespaces’te çalıştırıyordunuz. Bu alıştırmada, uygulamayı Vercel'e dağıtacaksınız; bu platform, web uygulamalarını barındırır ve size kalıcı bir genel URL sağlar.

Bir web uygulamasını devreye almanın birçok yolu vardır. İşte bir MVP’yi devreye alacak bir kişi için en yaygın seçeneklerin karşılaştırması:

Platform

Kurulum Karmaşıklığı

Ücretsiz Katman

En İyisi

Vercel

Basit (GitHub'a bağlanır)

100 GB bant genişliği, 100 saat sunucusuz hizmet

API rotaları içeren React/Next.js uygulamaları

Google AI Studio Dağıtımı

Çok basit (tek tıklamayla)

Google Cloud faturalandırma gereklidir (yeni kullanıcılar için 300 dolarlık ücretsiz kredi)

Tamamen AI Studio'da geliştirilen uygulamalar

Sevimli / Bolt

Basit (yerleşik barındırma)

Sınırlı, platforma göre değişiklik gösterir

GitHub olmadan hızlı prototipler

Netlify

Basit (GitHub'a bağlanır)

100 GB bant genişliği

Statik siteler, daha basit arka uçlar

Demiryolu / Render

Orta

Sınırlı ücretsiz paket

Veritabanlı tam yığın uygulamalar

Bu program için Vercel’i kullanacaksınız. Nedeni şu:

Çoğunuz için, youapp’in bir arka ucu vardır ve Vercel bunu gayet iyi yönetir. MVP’niz sadece bir dizi statik sayfadan ibaret değildir; Groq veya diğer LLM API’lerini çağıran, Supabase’e bağlanan ve muhtemelen diğer API’leri de çağıran sunucu tarafı API rotalarına sahiptir. Vercel’in sunucusuz işlevleri, arka uç kodunu otomatik olarak yönetir. Netlify gibi platformlar daha basit uygulamalar için iyi sonuç verir, ancak sunucu tarafı mantığı için daha fazla kurulum gerektirir.

GitHub’a doğrudan bağlanır. Kodunuz zaten GitHub’da bulunuyor. Vercel, deponuzu içe aktarır ve değişiklikleri her “push” ettiğinizde otomatik olarak yeniden dağıtır — bu program boyunca kullandığınız Git iş akışıyla aynıdır.

Kredi kartı gerekmez. Vercel’in ücretsiz planı için, halihazırda sahip olduğunuz GitHub hesabından başka hiçbir şeye gerek yoktur.

Vercel, üretim ortamı kurulumunu ve güvenliği otomatik olarak halleder. Dağıtım sürecinde önemli ölçüde kurulum gerektiren birçok unsur vardır. Vercel, bu kurulum gereksinimlerinin büyük bir kısmını otomatik olarak halleder.

Netlify, Vercel’in hemen ardından ikinci sırada yer alıyor ve başka bir platform denemek isterseniz sağlam bir alternatiftir. Hem Vercel hem de Netlify, GitHub'a bağlanır, push yapıldığında otomatik olarak dağıtım yapar ve cömert ücretsiz kullanım kademeleri sunar. Aradaki fark, Vercel'in arka uç API rotalarını kullanıma hazır olarak yönetirken, Netlify'ın sunucu kodunuzu kendi özel "Netlify Functions" formatına göre yeniden yapılandırmanızı gerektirmesidir. MVP uygulamanız için Vercel, hem daha basit hem de en kapsamlı seçenektir.

Ya uygulamam başka çerçeveler kullanıyorsa?

Next.js: Uygulamanız bir Next.js projesi ise, Vercel, Next.js’in yaratıcıları tarafından geliştirildiğinden hâlâ harika bir seçenektir.

Lovable veya Bolt:Bu platformlar kendi barındırma ve dağıtım hizmetlerini sunar. Uygulamanız halihazırda bu platformların altyapısında yayında olabilir. Vercel’e geçiş yapmanız mı yoksa platformun yerleşik barındırma hizmetini kullanmaya devam etmeniz mi gerektiği konusunda koçunuza danışın.

Python (Flask, Streamlit, FastAPI): Vercel’in ücretsiz planı Python arka uçlarını desteklemiyor. Alternatif platformlar olarak Railway veya Render hakkında koçunuza danışın. Railway (railway.app), Python’u destekleyen bir ücretsiz plan sunuyor — GitHub deponuzu bağlayın, gerisini Railway halletsin. Bu ünitedeki kavramlar — ortam değişkenleri, izleme, hata yönetimi — yine geçerlidir, ancak platforma özgü adımlar farklılık gösterecektir.

Vercel'in Yaptığı İşler

Vercel, altyapıyla ilgili birçok zorlu işi otomatik olarak halleder. Sorumluluklar şu şekilde dağılım gösterir:

VERCEL

  • HTTPS (şifreli bağlantılar) ile uygulamanızın güvenliğini sağlama
  • Kötü niyetli trafiği uygulamanıza ulaşmadan önce engelleme
  • Uygulamanızı dünya çapındaki kullanıcılar için hızlı hale getirme
  • Uygulamanızı manuel olarak başlatmanıza gerek kalmadan 7/24 çalışır durumda tutmak

SİZ

  • Kullanıcıların yapay zeka özelliğinizi kullanma sıklığını sınırlamak. Sınırlama yapılmazsa, tek bir kullanıcı yüzlerce maliyetli yapay zeka çağrısını tetikleyebilir
  • Kullanıcı dostu hata mesajları görüntülemek. Bu özellik olmadan, bir sorun oluştuğunda kullanıcılar kafa karıştırıcı teknik hata mesajlarıyla karşılaşırlar
  •  

İçinde Codespaces'te'da, ön uç ve arka uç uygulamalarınızı iki ayrı işlem olarak çalıştırıyor olabilirsiniz:

  1. Ön uç sunucusu, büyük olasılıkla React
  2. Arka uç sunucusu, büyük olasılıkla Express

Bu, derleme ve hata ayıklama işlemleri için gayet iyi çalışan standart bir geliştirme ortamıdır.

Ancak, Vercel , GitHub Codespaces'ten farklı şekilde çalışır. Kalıcı bir Express sunucusu çalıştırmaz. Bunun yerine iki şey yapar:

  1. Ön uç dosyalarınız (HTML, CSS ve npm run build komutuyla derlenen JavaScript dosyaları ) Vercel’in küresel CDN’si üzerinden sunulmaktadır. A CDN (İçerik Dağıtım Ağı) , uygulamanızın statik dosyalarının (HTML, CSS, JavaScript, resimler) kopyalarını depolayan ve dünya çapında yayılmış bir sunucu ağıdır.

Vercel, bunları derleme çıktı dizininde (örneğin dist/) arar. Vite geliştirme sunucunuz ve express.static() ile yazılmış kodlarınız üretim ortamında kullanılmaz — Vercel’in CDN’si bunların yerini tamamen alır. Bu durum normaldir ve beklenen bir durumdur.

  1. API rotalarınız (örneğin, /api/recommendations), her istek için sıfırdan başlatılan sunucusuz işlevler olarak çalışır.

Bunun çalışabilmesi için, Vercel’in Express uygulamanızın dosyadan dışa aktarılmasını ve Vercel’in bulabileceği bir konuma yerleştirilmesini gerektirir. Bunu, ilk etkinlikler sırasında küçük bir yapılandırma adımıyla ayarlayacaksınız.

Ancak mevcut kodunuzda büyük değişiklikler yapmaya gerek yok, bu yüzden endişelenmeyin. Uygulamanızı yeniden yazmıyorsunuz, sadece bir dağıtım yapılandırma katmanı ekliyorsunuz.

İşin sonunda, arkadaşlarınızla, ailenizle ve hatta potansiyel müşterilerinizle paylaşabileceğiniz aktif bir URL'ye sahip olacaksınız.

AKTİVİTE 1

Vercel ile Uygulamanızı Yayına Hazırlayın

Tahmini Süre: 30 Dakika

  1. GitHub'a gidin ve MVP deponuza ulaşın.
  2. Dağıtım yapmadan önce önceki ünitelerden kaynaklanan tüm çalışmalarınızı main dalına birleştirmiş olmalısınız. Açık durumda olan ve commit işlemi yapılmış tüm dalları birleştirin. 
  3. Ana dalda olduğunuzdan emin olun.
  4. Tıkla Kod'i tıklayın, ardından Ana dalda kod alanı oluştur 'i tıklayın. Diğer dallar için mevcut bir kod alanı olabilir, ancak ana daldan yeni bir tane açın.
  5. Codespace ortamının yüklenmesini bekleyin.

NOT: Geçmişte, depomuzdaki tüm güncellemeleri açıkça yeni bir dalda gerçekleştiriyorduk. Burada ana dalı güncellememiz kasıtlıdır; çünkü Vercel, otomatik dağıtımlar için “main” dalını izler ve uygulama mantığını değiştirmediğimiz, sadece yapılandırma dosyaları eklediğimiz için bu özel durumda ana dalda doğrudan yapılan hazırlık çalışmaları kabul edilebilir.

JavaScript’te dosyalar arasında kod paylaşımı için iki farklı sistem vardır: CommonJS ve ES Modülleri. CommonJS , JavaScript'in yalnızca sunucularda çalıştığı dönemde Node.js için geliştirilmiş olan eski sistemdir. ES Modules ise hem tarayıcılarda hem de Node.js'de çalışan daha yeni bir standarttır ve şu anda önerilen yaklaşım budur.
Express sunucunuzdaki export kodu, projenizin kullandığı sistemle eşleşmelidir — ES Modules için export default app veya CommonJS için module.exports = app. Yanlış olanı kullanmak, dağıtımı bozacaktır.

Bunu bilmek, Copilot’a kodunuzu güncellemesi için nasıl talimat vereceğiniz konusunda size yardımcı olacaktır.

Bunu şu şekilde anlayabilirsiniz:

  1. Şunu kontrol edin: package.json dosyanızı kontrol edin: json”type”: “module”
    Bu satır varsa, ES Modülleri kullanıyorsunuz demektir .
  2. Eğer bu değer yoksa veya “type”: “commonjs” yazıyorsa,CommonJS kullanıyorsunuz demektir.
  3. Kontrol etmenin bir başka yolu da dosyanın en üstündeki import ifadeleridir server.js.
    • ES Modules şu şekilde görünür:
      import express from ‘express’
      import dotenv from ‘dotenv’
    • CommonJS şu şekilde görünür:
      const express = require(‘express’)
      const dotenv = require(‘dotenv’)
  4. Muhtemelen kodunuzun en altında bir export ifadesi de bulunmaktadır:
    • ES Modülleri:
      export default app
      CommonJS:
      module.exports = app

Hangi standardı kullandığınızı kontrol edin ve not alın.

Uygulamanızı muhtemelen GitHub Codespace ortamında çalıştırdığınız için, ön uç ve arka uç için iki ayrı işlem olması muhtemeldir. 

Biri React ön ucu (Vite) için, diğeri ise Express arka ucu için. 

Vercel’in farklı bir yapıya ihtiyacı var.

  • Oluşturduğunuz ön uç dosyalarını bir CDN üzerinden sunar .
  • Express API rotalarınızı sunucusuz işlevler olarak çalıştırır.

İyi haber şu ki, bu geçiş süreci büyük ölçüde yapılandırma dosyalarının eklenmesi ve birkaç satır kod yazılmasından ibarettir. Mevcut uygulama mantığınız aynı kalır.

Codespace'inizde Copilot Sohbeti'ni açın ve şu komut satırına benzer bir komut kullanın:

Express.js + React uygulamamı Vercel’e dağıtım için hazırlamama yardım ediyorsun.

Hedef: Projemi, Vercel’in ön ucu sunabilmesi ve arka uç API rotalarını sunucusuz işlevler olarak çalıştırabilmesi için yapılandırmak.

Uygulamam şu anda Codespaces'te iki ayrı işlem olarak çalışıyor.

Terminal 1, React ön ucunu Vite ile çalıştırır (npm run dev). Terminal 2 ise Express arka ucunu (npm run dev) ayrı bir bağlantı noktasında çalıştırır.

Vercel’e dağıtım yapıyorum; Vercel, derleme çıktısından statik dosyaları sunuyor ve Express’i sunucusuz bir işlev haline dönüştürüyor.

Şu değişiklikleri yapın:

  1. SUNUCU DOSYASI: Express sunucu dosyamı [server.js veya benzeri] bir api/ dizinine taşıyın ve gerekirse adını index.js olarak değiştirin. Dosyanın sonuna şunu ekleyin: [ES_MODULES kullanılıyorsa: export default app veya COMMONJS kullanılıyorsa: module.exports = app]. Yerel geliştirme için mevcut app.listen() işlevini olduğu gibi bırakın.
  1. VERCEL YAPILANDIRMASI: Proje kök dizininde aşağıdaki içeriğe sahip bir vercel.json dosyası oluşturun:

   {

     “yeniden yazımlar”: [

       { “source”: “/api/(.*)”, “destination”: “/api” }

     ]

   }

  1. PACKAGE.JSON: Aşağıdaki komut dosyalarının mevcut olduğundan emin olun:
    • “dev”, yerel geliştirme amacıyla hem ön uç hem de arka ucu çalıştırmalıdır (aynı anda çalıştırılmasında bir sakınca yoktur)
    • “build”: “vite build” (compiles the React frontend into /dist)
      Add an “engines” field: { “node”: “>=18.0.0” }
      Make sure all backend dependencies (express, cors, dotenv, [your AI SDK]) are in the root package.json, not in a separate server package.json.
  1. URL KONTROLÜ: Tüm ön uç dosyalarında localhost, github.dev veya 127.0.0.1 içeren sabit kodlanmış URL’leri arayın. http://localhost:3000/api/recommendations yerine /api/recommendations gibi göreceli yollar ile değiştirin.
  1. VITE PROXY: vite.config.ts (veya vite.config.js) dosyasında, yerel geliştirme ortamında göreceli URL’lerin çalışmaya devam etmesi için bir proxy ekleyin:

   server: {

     proxy: {

       ‘/api’: { target: ‘http://localhost:3001’, changeOrigin: true }

     }

   }

Her güncellemede, neyi değiştirdiğini bana göster.

  1. Copilot’un oluşturduğu içeriği gözden geçirin. İşte her bir değişikliğin ne işe yaradığı ve neden önemli olduğu.

Vercel, api/ dizininde sunucusuz işlevleri arar. Express sunucunuzu buraya taşıyıp export default app (veya module.exports = app) ekleyerek, Vercel'in Express uygulamanızı içe aktarmasını ve sunucusuz bir işlev olarak çalıştırmasını sağlayabilirsiniz.

app.listen() satırınız kalır — Vercel, üretim ortamında bunu göz ardı eder, ancak Codespaces’te yerel geliştirme için yine de buna ihtiyacınız vardır.

Sunucu dosyanızın sonu şunun gibi bitmelidir:

				
					// Local development — Vercel ignores this in production
app.listen(process.env.PORT || 3000, () => {
  console.log(`Server running on http://localhost:${process.env.PORT || 3000}`);
});

// Export for Vercel serverless deployment
export default app;

Bu küçük yapılandırma dosyası, Vercel’e isteklerin nasıl yönlendirileceğini bildirir. /api/* adresine gelen tüm istekler Express uygulamanıza yönlendirilir. Diğer tüm istekler ise derlenmiş ön uç dosyalarına yönlendirilir. Dosyanın tamamı sadece 5 satırdan oluşur.

				
					{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api" }
  ]
}

Ön uç uygulamanızda fetch(‘http://localhost:3000/api/recommendations’) komutu varsa, Vercel’de bu çalışmayacaktır çünkü localhost:3000 adresi mevcut değildir.

Copilot, bunu fetch(‘/api/recommendations’) gibi göreceli bir yola dönüştürmelidir. Tarayıcı, bu yolu sayfayı barındıran etki alanına göre çözümler; bu, ister Codespaces olsun, ister üretim ortamındaki .vercel.app URL’niz olsun.

Ön uçta göreceli URL’ler kullanıyorsanız, yerel geliştirme sırasında /api isteklerini Express sunucunuza yönlendirmek için bir yönteme ihtiyacınız vardır. Vite proxy’si bunu otomatik olarak gerçekleştirir.

  • Ön uç uygulamanız api/recommendations adresine bir istek gönderdiğinde, Vite bu isteği Express sunucunuzun çalıştığı http://localhost:3000/api/recommendations adresine iletir.
  • Vercel’de üretim ortamında, bu işlev vercel.json dosyasındaki yeniden yazma kuralları tarafından yerine getirilir.

package.json dosyasında yapılması gereken birkaç değişiklik var.

  • komut dosyaları — sunucu komut dosyası yolu şu şekilde güncellenir: server/server.js adresinden api/index.jsolarak güncellenir ve muhtemelen dev betiği de yeni yolu yansıtacak şekilde güncellenir
  • bağımlılıklar — daha önce server/package.json dosyasında bulunan tüm arka uç bağımlılıklarının kök package.json dosyasına taşınmalıdır, çünkü artık ayrı bir server paketi bulunmamaktadır
  • “type”: “module” — eklenmiş olabilir ya da zaten oradaydı
  • “engines” — { “node”: “>=18.0.0” } added for Vercel compatibility

Örneğin, komut dosyaları bölümü şöyle görünmelidir:

				
					"scripts": {
  "dev": "concurrently \"vite\" \"node api/index.js\"",
  "build": "vite build",
  "preview": "vite preview",
  "server": "node api/index.js"
},

“build:” satırına dikkat edin. Bu, kurulumunuza bağlı olarak değiştirilebilir:

  • React + Vite (Copilot’ta en sık kullanılan) – “build”: “vite build”
  • Create React App ile React – “build”: “react-scripts build”
  • Vanilla JS (çerçeve kullanılmadan) – Derleme aşaması gerekmez

 

GitHub Copilot bize yaptıklarını şöyle gösterdi:

Express.js + React uygulamanızı Vercel'e dağıtım için hazırlamanıza yardımcı olacağım. Öncelikle, mevcut yapılandırmayı anlamak için proje yapınızı inceleyerek başlayayım.

Harika! “tutormatch-app-gemini-auth-working” dosyasındaki proje yapını inceledim. Müthiş bir haber: Uygulaman, Vercel’e dağıtım için zaten tamamen yapılandırılmış durumda. Gerekli olan 5 değişikliğin tamamı zaten yapılmış!

Mevcut Yapılandırmanın Özeti ✅

1. SUNUCU DOSYASI ✅

index.js dosyanız doğru şekilde ayarlanmış:

  • Vercel’in gerektirdiği şekilde api/ dizininde yer almaktadır
  • Uygulama, “export default app (ES modules)” komutuyla zaten dışa aktarılıyor
  • 3001 numaralı bağlantı noktasında yerel geliştirme için app.listen(PORT) işlevi içerir
  • Tüm Express rotaları (/api/recommendations ve /api/health dahil) yapılandırılmıştır

2. VERCEL YAPILANDIRMASI ✅

vercel.json dosyanız doğru şekilde yapılandırılmış:

Bu, Vercel’e tüm /api/* isteklerini sunucusuz işlevine yönlendirmesini söyler.

3. PACKAGE.JSON ✅

package.json dosyanızda gerekli tüm komut dosyaları ve yapılandırmalar mevcuttur:

  • ✅ “dev” komut dosyası, hem arka uç hem de ön ucu aynı anda çalıştırmak için kullanılır
  • ✅ React ön ucu için “build” ayarı “vite build” olarak belirlenmiştir
  • ✅ “engines” alanı için node sürümünün 18.0.0 veya üstü olması gerekir
  • ✅ Tüm arka uç bağımlılıkları (express, cors, dotenv, @google/genai) kök dizinindeki package.json dosyasında yer almaktadır .
  • ✅ concurrently, npm run server ve npm run client komutlarını aynı anda çalıştıracak şekilde doğru bir şekilde yapılandırılmıştır

4. URL KONTROLÜ ✅

Sabit kodlanmış URL bulunamadı. Ön uç uygulamanız aşağıdakileri doğru şekilde kullanıyor:

5. VITE PROXY ✅

vite.config.ts dosyanızda proxy ayarları yapılmış durumda:

Bu, npm run dev komutuyla yerel geliştirme sırasında /api adresine gelen isteklerin Express arka ucuna yönlendirilmesini sağlar.

Bunun Anlamı

Projeniz şu anda Vercel’e dağıtılmaya hazır! Vercel’e push yaptığınızda:

  1. Vite, React ön ucunuzu /dist dizinine oluşturacak
  2. Vercel, statik dosyaları sunacaktır
  3. Tüm /api/* istekleri, index.js dosyasındaki Express işleviniz tarafından işlenecektir.
  4. Supabase kimlik doğrulama işleminiz ve Gemini API çağrılarınız sorunsuz bir şekilde çalışacaktır

Yerel geliştirme: `npm run dev` komutunu çalıştırdığınızda, hem ön uç (5173 numaralı bağlantı noktası) hem de arka uç (3000 numaralı bağlantı noktası) otomatik olarak başlar; API çağrıları ise Vite proxy'si tarafından yönetilir.

Yeni bir kod alanını muhtemelen ana daldan doğrudan çalıştırıyor olabileceğiniz için, .env dosyasını kaybetmiş olabilirsiniz. Bu ortam değişkenlerinin kök .env dosyasında ayarlanması gerekecektir.

  1. Kodunuzu inceleyerek tüm VITE değişkenlerinizi kontrol edin. Bunlar, kök dizininizdeki .env dosyasında yer alması gerekir.
  2. Bir .env dosyasını kök klasöre ekleyin ve bunları tekrar ekleyin. Bizim durumumuzda bunlar şunlardı:
				
					VITE_SUPABASE_URL=
VITE_SUPABASE_KEY=
VITE_DEVELOPMENT_URL=

Burada test amacıyla VITE_DEVELOPMENT_URL değişkeni, kod alanınızın github.dev URL’sine ayarlanmalıdır. Vercel’i yapılandırmaya geldiğinizde, bu değeri kendi Vercel uygulama URL’nizle güncelleyeceksiniz.

  1. TÜM arka uç ortam değişkenlerinin Codespace gizli verilerinizde yer aldığından emin olun. Bunları kök .env klasörüne ekleyemezsiniz, çünkü bu durumda açıkta kalırlar.
  1. Bağımlılıkları yükle: npm install (eşzamanlı olarak ve arka uç bağımlılıklarını da yükler)
  2. "npm run dev " komutu, hem ön uç hem de arka uç sunucularını başlatacaktır.
  3. Test:
    • sayfa yüklemeleri
    • giriş işlemi başarılı
    • AI özelliği yanıt veriyor
  4. Her şey yerel ortamda düzgün çalışıyorsa, dağıtım yapmaya hazırsınız demektir.
  5. Vercel'e dağıtım için her şeyin hazır olduğundan emin olmak amacıyla LLM ile çalışmaya devam edin.
  1. Değişikliklerinizi kaydedin ve ana dala gönderin.
  2. GitHub'da ana dalınızın güncel olmasını sağlamak için tüm değişiklikleri birleştirin.

Artık kodunuzu Vercel platformunda çalışacak şekilde güncellediğinize göre, dağıtma zamanı geldi!

AKTİVİTE 2

Uygulamanızı Vercel’de Yayınlayın

Tahmini Süre: 30 Dakika

  1. vercel.com adresine gidin .
  2. “Kaydol” düğmesine tıklayın .
  3. " GitHub ile Devam Et" seçeneğini seçin. Bu işlem, Vercel'i MVP kodunuzun bulunduğu GitHub hesabına bağlar.
  4. Vercel’in GitHub depolarınıza erişmesine izin verin.

Kredi kartı gerekmez. Ücretsiz Hobby paketi, MVP’niz için fazlasıyla yeterlidir.

  1. Vercel kontrol panelinden “Yeni Ekle ” → “Proje” seçeneğine tıklayın
import screenshot in vercel dashboard
  1. Listeden MVP deponuzu bulun ve “İçe Aktar” düğmesine tıklayın . 

GitHub’u henüz doğru şekilde bağlamadıysanız, lütfen Vercel ile GitHub Projelerini Dağıtma başlıklı belgelerinde yer alan adımları izleyin.

choosing github repository in vercel dashboard

Vercel, proje türünüzü otomatik olarak algılar ve derleme ayarlarını doldurur

  1. Vercel genellikle doğru sonuç verir, ancak ayarların projenize uygun olup olmadığını kontrol edin.

Projenizde şunlar varsa…

Çerçeve Ön Ayarı

Derleme Komutu

Çıktı Dizini

vite.config.ts veya vite.config.js

vite.config.ts veya vite.config.js

hızlı derleme

dist

next.config.js veya next.config.ts

Next.js

bir sonraki sürüm

.sonraki

server.js + public/ klasörü

Diğer

(boş veya özel)

genel

package.json dosyasındaki react-scripts

React Uygulaması Oluştur

react-scripts derle

inşa etmek

TutorMatch uygulamamızda durum şöyle görünüyor:

  1. Vercel yanlış bir çerçeve tespit ettiyse, bunu geçersiz kılmak için “ Derleme ve Çıktı Ayarları”na tıklayın.

    “Derleme Komutu” ve “Çıktı Dizini” en önemli iki alandır. Emin değilseniz, npm run build komutunun yerel ortamda ne ürettiğini kontrol edin — komutu çalıştırdıktan sonra dist/, build/ veya .next/ klasörünü arayın.

Bu, en önemli adımdır. Uygulamanızın çalışabilmesi için API anahtarlarına ihtiyacı vardır ve bu anahtarlar kodunuzda değil, Vercel’de ayarlanmalıdır.

  1. Proje ayarları ekranında, “Ortam Değişkenleri” seçeneğine tıklayın .
  2. İki seçeneğiniz var:
    • .env dosyasınıiçe aktar – “.env Dosyasını İçe Aktar” seçeneğine tıklayın ve yerel .env dosyanızı seçin. Vercel, tüm anahtar-değer çiftlerini otomatik olarak okur.
    • Manuel olarak ekle –Her bir anahtar adını yazın ve değerini tek tek yapıştırın.
  3. Uygulamanızın ihtiyaç duyduğu tüm anahtarları, hem ön uç hem de arka uç ortam değişkenlerini eklediğinizden emin olun!

    Codespaces'te anahtarlarınız .env veya GitHub Secrets'ta bulunur. Üretim ortamında ise Vercel'in ortam değişkeni ayarlarında bulunur. Bu, aynı kavramın farklı bir konumda uygulanmasıdır.

    Bizim için durum şöyle:

Not: İlerleyen bölümlerde ödeme eklemeyi öğrendiğinizde, Stripe anahtarlarınızı eklemek için bu ekrana geri dönmeniz gerekecektir. Şu an için, geliştirme aşamasında eklediğiniz anahtarlar yeterlidir.

  1. "Dağıt" düğmesine tıklayın.

    Vercel, GitHub'dan kodunuzu alır, bağımlılıkları yükler, uygulamanızı derler ve bir URL atar. Bu işlem 1-3 dakika sürer. Derleme günlüklerini gerçek zamanlı olarak izleyebilirsiniz.
congralations message in vercel

İşlem tamamlandığında, Vercel size Vercel Kontrol Paneli’ne yönlendiren bir bağlantı içeren bir onay ekranı gösterebilir.

Devam edin. Burada uygulamanızla ilgili şu tür ayrıntıları görebilirsiniz:

  1. URL'niz 
  2. Daha sonraki adımlarda ele alacağımız en iyi uygulamalarla ilgili öneriler için şimdiden uygulamaya başlayabileceğiniz kontrol listesi
  3. Daha sonra ele alacağımız gözlemlenebilirlik paneli
  4. Daha sonra da üzerinde duracağımız analiz paneli
vercel dashboard overview

Bu URL, üretim ortamındaki URL’nizdir. URL’nin değiştiği Github Codespaces’teki MVP uygulamanızın aksine, burada Vercel’de URL’niz sabit kalacak ve bilgisayarınız açık ya da kapalı olsun, her zaman aktif durumda olacaktır.

Üretim URL’sini istediğiniz yerden açabilirsiniz; o halde, uygulamamızın internette olduğunu doğrulamak için telefonunuzdan açabilirsinizUygulamanızın internette olduğunu doğrulayın!

Tebrikler! 

Uygulamanız Vercel’e dağıtıldığında, Supabase’e Vercel URL’nizin güvenilir bir yönlendirme hedefi olduğunu bildirmeniz gerekir; aksi takdirde kimlik doğrulama geri çağrıları başarısız olur. GitHub geliştirici yönlendirmemizi ekledik, ancak şimdi Vercel URL’mizi de bir yönlendirme olarak eklemeliyiz.

  1. Şuraya gidin: Supabase Kontrol Paneli → Kimlik Doğrulama → URL Yapılandırması ve iki alan göreceksiniz:
    1. Site URL'si — burayı Vercel üretim URL'nizle değiştirin: https://your-app.vercel.app
    2. Yönlendirme URL’leri — Hem Vercel URL’nizi hem de Codespaces URL’nizi ekleyin. Codespace URL’niz zaten elinizde olmalıdır. Bunu github.dev için bir joker karakterle değiştirebilirsiniz; böylece yeni oluşturulan tüm codespace’ler çalışacaktır. Mevcut içeriği silin ve şunları ekleyin:
      https://your-app.vercel.app
      **https://*.github.dev/**

Sonundaki /** joker karakteri önemlidir — bu, tüm rotaları kapsar; ödemeleri eklerken buna ihtiyacınız olacak.

Supabase’e Kullanıcı Kimlik Doğrulama özelliğini eklediğimizde, Supabase’deki E-posta Bildirimini devre dışı bırakmıştık. Şimdi bunu üretim ortamında yeniden etkinleştirmek istiyoruz.

  1. Supabase Kontrol Paneli → Kimlik Doğrulama → Oturum Açma/Sağlayıcılar bölümüne gidin.
  2. " E-postayı Onayla " anahtarını AÇIK konumuna getirin.

Canlı URL'nizi ziyaret edin ve test edin:

  1. Sayfa düzgün bir şekilde yükleniyor mu? (Giriş sayfanızı görmeniz gerekir)
  2. Yeni bir hesap oluşturabilir ve oturum açabilir misiniz?
  3. Giriş yaptıktan sonra yapay zeka özelliğinizi deneyin. Yanıt veriyor mu?

Bir şey yolunda gitmezse, aşağıdaki sorun giderme bölümüne bakın. İlk dağıtımda derleme hataları normaldir.

  1. URL’nizi bir takım arkadaşınızla veya bir arkadaşınızla paylaşın.
  2. Onlardan, telefonlarında veya bilgisayarlarında bu URL’yi açmalarını ve bir hesap oluşturmayı denemelerini ve uygulamanızın bir özelliğini kullanmayı denemelerini isteyin.

Codespaces çalışmıyorken birinin uygulamanıza ilk kez erişti. Eğer çalışırsa, uygulamanız yayında demektir.

Özel bir alan adı mı istiyorsunuz? Varsayılan olarak, uygulamanızın URL’si your-app-name.vercel.app şeklinde otomatik olarak oluşturulur. Ancak tutormatch.app gibi markalı bir URL istiyorsanız, bunun nasıl yapılacağına dair adım adım kılavuz için sonundaki isteğe bağlı alıştırmaya göz atın. Ayrıca, Vercel’in Dağıtım kontrol listesindeki kılavuzu kullanarak bunu kendiniz de deneyebilirsiniz.

Sorun Giderme

Aşağıdaki her bir soruyu tıklayarak olası çözümü görüntüleyebilirsiniz.

Başarısız olan dağıtım öğesine tıklayın ve derleme günlüklerini inceleyin.

Sık görülen nedenler:

  • şu dosyada eksik bağımlılık var: package.json'da
  • bir içe aktarma yolundaki yazım hatası
  • eksik bir derleme komut dosyası.

Öncelikle Codespaces'te `npm run build ` komutunu çalıştırın; eğer yerel ortamda hata verirse, Vercel'de de hata verecektir.

Sunucu dosyanız muhtemelen Express uygulamasını dışa aktarmıyor.

Şunu ekleyin:

  • export default app; for (ES modülleri) veya
  • module.exports = app; for (CommonJS)

sunucu dosyanızın sonunda, api/ dizini içinde yer alan sunucu dosyanızın sonuna ekleyin.

Bu, en sık karşılaşılan tek dağıtım sorunudur.

  1. Vercel projesine gidin → Ayarlar → Ortam Değişkenleri.
  2. Her anahtar adının kodunuzda belirtilenle tam olarak eşleştiğini kontrol edin (büyük/küçük harf duyarlıdır).

    Unutmayın: VITE_ önekine sahip değişkenler yalnızca ön uç kodu içindir.

    GEMINI_API_KEY veya GROQ_API_KEY gibi arka uç API anahtarlarında VITE_ öneki KULLANILMAMALIDIR.
  1. Vercel Günlükleri sekmesini kontrol edin (Dağıtımlar → bir dağıtımı tıklayın → İşlev Günlükleri).
  2. “API_KEY tanımlanmamış” veya buna benzer bir hata mesajını arayın.
  3. Eğer bulunursa, eksik anahtarı Vercel’in Ortam Değişkenleri’ne ekleyin.
  4. Yerel (kod alanı) .env dosyasını kontrol edin ve uygulamanızın hangi anahtarları beklediğini öğrenin.

Express sunucunuzda sabit olarak ayarlanmış bir bağlantı noktası olabilir.

app.listen(3000) ifadesini app.listen(process.env.PORT) olarak değiştirin ve PORT değerinin ortam değişkenlerinizde yer aldığından emin olun.

Ön uçta sabit olarak kodlanmış URL’leriniz var (örneğin, http://localhost:3001/api/…).

Bunları göreceli yollara (/api/…) dönüştürün.

Göreceli yollar, CORS sorunlarını tamamen ortadan kaldırır.

Vercel, üretim ortamında express.static() işlevini göz ardı eder ve statik dosyaları derleme çıktı dizininden sunar.

CSS dosyaları veya resimler eksikse, bunların dist/ klasöründe yer aldıklarını kontrol edin.

Görseller için, bunların public/ klasöründe bulunduğundan veya React kodunuza içe aktarıldığından emin olun.

package.jsondosyasında bir bağımlılık eksik.

Codespaces'te `npm install ` komutunu çalıştırın ve güncellenen ` package-lock.json ` dosyasını ana dala gönderin.

Supabase Auth yönlendirme URL’lerinizin yeni Vercel URL’nizi içerdiğinden emin olun.

Supabase kontrol paneline gidin → Kimlik Doğrulama → URL Yapılandırması bölümüne gidin ve .vercel.app URL’nizi ekleyin.

Supabase Oturum Açma ayarlarında Site URL’sini ve Yönlendirme URL’lerini Vercel URL’nize göre güncelleyin.

Geliştirme çalışmalarınızın aksamaması için Codespaces URL’nizi listede tutun.

Vercel ayarlarınızdaki derleme çıktı dizini, ` npm run build ` komutunun dosyaları kaydettiği konumla uyuşmuyor.

Kontrol edin:

  • Vite, dist/,
  • Create React App şu komutları kullanır build/.

Vercel’in Derleme ve Çıktı Ayarları’nda Çıktı Dizinini güncelleyin.

Şunun doğru olduğundan emin olun: vercel.json dosyanın proje kök dizininde bulunduğundan emin olun (bunu Etkinlik 1'de oluşturmuştunuz).

API rotaları hâlâ çalışmıyorsa, bir “builds” bölümü eklemeyi deneyin:

				
					{ 
    "builds": [{ 
        "src": "api/index.js"
        "use": "@vercel/node"
    }], 
    "rewrites": [{ 
        "source": "/api/(.*)", 
        "destination": "/api" 
    }] 
}

Fluid Compute özelliği sayesinde (yeni projelerde varsayılan olarak etkindir), işlevler Hobby planında en fazla 300 saniye (5 dakika) boyunca çalıştırılabilir.

Fluid Compute kullanılmadığında, sınır 60 saniyedir.

AI çağrılarınızda hâlâ zaman aşımı hatası alıyorsanız, komut satırını basitleştirmeyi veya kullanıcı için bir yükleme göstergesi ve zaman aşımı mesajı eklemeyi düşünün.

Otomatik dağıtım

GitHub kullanarak MVP’nizi oluştururken, çalışmanızı düzenlemek için dalları (branches) öğrendiniz. Artık dalların gerçek sonuçları var: şu dala main ana dalına gönderim yapmak, canlı uygulamanızın anında değişmesi anlamına gelir.

GitHub'da tipik bir üretim iş akışı şu şekildedir:

  • ana dal = üretim. Vercel'e bağlı. Her push işleminde otomatik olarak dağıtım yapılır.
  • özellik dalları = yeni çalışmalar için güvenli bir alan. Burada denemeler yapın.

Asla test edilmemiş kodu doğrudan main 'e aktarmayın.

Hatalı bir güncelleme, canlı uygulamanızı tüm kullanıcılar için çalışmaz hale getirir.

AKTİVİTE 3

Otomatik Dağıtım Testi

Tahmini Süre: 15 Dakika

  1. GitHub’a gidin ve MVP deponuza gidin
  2. Deponun sol üst köşesindeki ana açılır menüyü tıklayın ve tüm dalları görüntüleyin.
  3. Yeni bir dal oluşturun .
  4. İstediğiniz adı verebilirsiniz: test-auto-deploy
  5. Bu dal için yeni bir Codespace oluşturun ve açın.
  1. Başlık veya düğme metnini güncellemek gibi küçük ve gözle görülür bir değişiklik yapın; böylece değişikliğin işe yaradığını kolayca test edebilirsiniz. 

Sayfa başlığını “TutorMatch” yerine “TutorMatch – TESTINGAUTODEPLOY” olarak güncelleyeceğiz.

Bunu App.jsx dosyasında bulduk. 

  1. Codepace’te yaptığınız değişikliği açıklayıcı bir mesajla kaydedin ve test-auto-deploy dalına gönderin.
  2. GitHub’a geri dönün. Bir push işlemi gerçekleştirildiğini belirten bir düğme görmelisiniz.
  3. Bir Pull Request oluşturmak için düğmeye tıklayın ya da doğrudan Pull Request'ler sekmesine gidin.  
  1. Başlık ve açıklama ekleyin
  2. “Pull isteği oluştur” seçeneğine tıklayın .
  3. “Çekme isteğini birleştir ” seçeneğine tıklayın ve onaylayın.

GitHub'da birleştirme işlemini onayladığınızda, şunu görmelisiniz:

  1. tarihçe
  2. Vercel’e özgü daha fazla bilgi Bu, Vercel entegrasyonu nedeniyle eklenmiştir.

Umarım herhangi bir çakışma olmaz ve çekme isteğini başarıyla birleştirebilirsiniz.

  1. Vercel kontrol panelinize gidin.
  2. Projeniz için “Dağıtımlar ” seçeneğine tıklayın.

İki yeni satır görmeniz gerekir:

    • Yapılan bir değişikliği önizleyen bir şey
    • Üretim sürümü için bir adım. Üretim sürümünün durumu “oluşturuluyor” veya “hazır” olabilir.
      Durum “hazır” olduğunda, URL’nize giderek yapılan değişiklikleri görebilirsiniz.
  1. İşlem tamamlandığında, değişikliği görmek için canlı URL’nizi yenileyin

Aslında başlığında “TESTING DEPLOYMENT” yazan bir sürüm istemiyoruz. Vercel’de geri alma seçeneği olsa da, sistem yine de GitHub deposuna bakıp mevcut ana dalı çekecektir; bu nedenle değişikliği geri almak için yine aynı adımları uygulamanız gerekecektir.

  1. Codespace’e geri dönün ve başlığı eski haline getirin.
  2. Değişikliği kaydedin ve sunucuya gönderin.
  3. Bir çekme isteği oluşturun ve birleştirin.
  4. Vercel'de başlığın tekrar orijinal haline döndüğünü bir kez daha kontrol edin. 

Uygulamanızı Üretim Ortamında Güvenli Hale Getirin

Program boyunca uygulamanızda aşamalı olarak güvenlik önlemleri aldınız; örneğin:

  • API anahtarlarını GitHub Secrets'ta saklama (kodunuzdan ve commit geçmişinizden uzak tutma)
  • API çağrılarını sunucu tarafında gerçekleştirmek (anahtarı tarayıcıdan tamamen uzak tutmak) 
  • Supabase kullanarak kullanıcı kimlik doğrulaması eklemek; böylece yalnızca oturum açmış kullanıcılar uygulamanıza erişebilir
  • API ara yazılımı güvenliği eklendi; böylece uygulamanız dışında hiç kimse API çağrıları yapamaz. 

Bunlar önemli koruma önlemleridir, ancak her şeyi kapsamazlar.

Yetkili bir uygulama kullanıcısı, bir dakika içinde yapay zeka özelliğinizi 500 kez çağıran bir komut dosyası yazabilir ve bu da tüm Groq / Gemini / Hugging Face API kredilerinizi tüketebilir ya da daha da kötüsü, size büyük bir mali yük getirebilir. 

Ya da API anahtarınızın geçerlilik süresi dolabilir ve güvenli hata işleme yapılmazsa, kullanıcılarınız yararlı bir mesaj yerine son derece teknik bir ham mesajla karşılaşabilir.

Vercel, uygulamanızı altyapı düzeyinde güvence altına alarak dağıtık saldırılar, ağ aşırı yüklemeleri ve temel web tehditleri gibi durumlara karşı koruma sağlar. Bunlar otomatik olarak engellenir.

Ancak Vercel, AI API’larınızın çağrı başına ücretlendirildiğini ya da hata yanıtlarınızın şirket içi ayrıntılar içerdiğini bilmez. Bunlar, yalnızca sizin bildiğiniz ve halledebileceğiniz uygulama düzeyindeki konulardır.

Bir sonraki adımda iki katmanlık ek koruma sağlanır: 

  1. istek sınırlaması: her kullanıcının yapabileceği istek sayısına bir sınır koyma
  2. güvenli hata yönetimi: teknik hataları kullanıcı dostu mesajlarla değiştirme

Hız sınırlaması eklemenin çeşitli yolları vardır . İşte bunların karşılaştırması:

Yaklaşım

Nasıl Çalışır?

Tezahür

Bellek içi (hızlı hız sınırlaması)

Mağaza taleplerinin sayısı sunucunuzun belleğinde tutulur

Kurulumu kolaydır. Sunucusuz işlevler yeniden başlatıldığında sıfırlanır. Arka arkaya yapılan kötüye kullanımları engeller.

Harici depo (veritabanındaki gibi)

Mağaza sayılarını, sistemin yeniden başlatılmasından sonra da korunacak ayrı bir veritabanında tutar

Yoğun trafik koşullarında daha güvenilirdir, ancak ek bir hizmetin kurulması ve ücretinin ödenmesi gerekir. 

Aynı zamanda en karmaşık olanıdır, ancak kullanıcı sayınız arttığında bu seçeneği şiddetle tavsiye ediyoruz.

Edge ara yazılımı

İstekleri, kodunuza ulaşmadan önce Vercel’in ağ sınırında engeller

En hızlı yanıt, ancak farklı bir kodlama modelini öğrenmeyi gerektirir (Vercel Edge Runtime)

MVP'niz için, bellek içi hız sınırlama pratik bir seçimdir. Minimum kurulumla en yaygın kötüye kullanım modellerini (birinin AI düğmenize tekrar tekrar tıklaması veya bir komut dosyasının hızlı istekler göndermesi) yakalar. Uygulamanız rakiplerinizi geride bırakırsa ve asla sıfırlanmayan bir hız sınırlamasına ihtiyaç duyarsanız, veritabanı depolamasına geçmek doğal ve güvenli bir sonraki adımdır.

AKTİVİTE 4

Hız Sınırlaması ve Güvenli Hata Yönetimi Ekleme

Tahmini Süre: 20 Dakika

  1. GitHub’a gidin ve MVP deponuza gidin
  2. Deponun sol üst köşesindeki ana açılır menüyü tıklayın ve tüm dalları görüntüleyin.
  3. Yeni bir dal oluşturun .
  4. İstediğiniz adı verebilirsiniz: add-security (ya da başka bir açıklayıcı ad).
  5. Bu dal için yeni bir Codespace oluşturun ve açın.

Üretim ortamında, URL’nizi bulan herkes, dakikada yüzlerce AI çağrısı gerçekleştiren komut dosyaları da dahil olmak üzere istek gönderebilir. İstek sınırlaması, her kullanıcının gönderebileceği istek sayısını sınırlar.

  1. Codespace'inizde Copilot Sohbeti'ni açın ve şu komut satırını kullanın:

Görev: Express.js uygulamamı üretim ortamına dağıtmak üzere güvenli hale getirmeme yardımcı oluyorsun.

Hedef: Rotalarımda API’nin kötüye kullanılmasını önlemek için hız sınırlaması eklemek.

Bağlam: Uygulamam, /api/ altındaki API rotalarıyla Express.js kullanıyor. Uygulamayı Vercel kullanarak zaten yayına aldım.

Kullanıcı başına API sınırı: Kullanıcı başına dakikada 5 istek ile sınırlandırılmıştır. “Çok fazla istek var. Lütfen bir süre bekleyin.” mesajıyla birlikte 429 durum kodu döndürülür. 

Depolama: İstekleri takip etmek için bellek içi depolama kullanın.

  1. Oluşturulan kodu inceleyin. İşte bizim index.js dosyamızda oluşturulan kod budur.
				
					const RATE_LIMIT_WINDOW_MS = 60 * 1000
const RATE_LIMIT_MAX_REQUESTS = 5
const requestLog = new Map()

const getUserKey = (req) => {
  const forwardedFor = req.headers['x-forwarded-for']
  if (typeof forwardedFor === 'string' && forwardedFor.length > 0) {
    return forwardedFor.split(',')[0].trim()
  }

  return req.ip || req.socket?.remoteAddress || 'unknown-user'
}

const apiRateLimiter = (req, res, next) => {
  const now = Date.now()
  const userKey = getUserKey(req)
  const userTimestamps = requestLog.get(userKey) || []

  const validTimestamps = userTimestamps.filter(
    (timestamp) => now - timestamp < RATE_LIMIT_WINDOW_MS
  )

  if (validTimestamps.length >= RATE_LIMIT_MAX_REQUESTS) {
    const oldestTimestamp = validTimestamps[0]
    const retryAfterSeconds = Math.max(
      1,
      Math.ceil((RATE_LIMIT_WINDOW_MS - (now - oldestTimestamp)) / 1000)
    )

    return res
      .status(429)
      .set('Retry-After', String(retryAfterSeconds))
      .json({ error: 'Too many requests. Please wait a moment.' })
  }

  validTimestamps.push(now)
  requestLog.set(userKey, validTimestamps)
  next()
}

// Middleware
app.use(cors())
app.use(express.json())
app.use('/api', apiRateLimiter)

Copilot tarafından eklenen birkaç önemli parçayı görebilmeniz gerekir. Değişken isimleri tam olarak farklı olabilir, ancak şunun gibi bir yapıya sahip olmalıdır:

  • WINDOW_MS değişkeni: zaman aralığının süresini belirlemek için kullanılır: 60*1000 = 60.000 milisaniye, yani bir dakika
  • MAX_REQUESTS değişkeni: Her pencere başına izin verilen istek sayısını kontrol etmek için kullanılır. Uygulamamızda bu değer = 5’tir.
    Copilot, Express sürümüne bağlı olarak bu değişkenleri “limit” veya “max” olarak oluşturabilir, ancak her ikisi de çalışmalıdır.
  • Sınır aşıldığında görüntülenecek özel mesaj. Uygulamamız için = “Çok fazla istek var. Lütfen bir süre bekleyin”.

Hız sınırını hem Codespaces'te hem de kodu birleştirip ardından üretim ortamında test ederek deneyebilirsiniz. Bu özelliği hâlâ doğrulama aşamasında olduğumuzdan, Codespaces'te test etmeniz daha uygun olacaktır. 

  1. Uygulamanızı Codespaces'te başlatın (npm run dev) ve bir tarayıcı sekmesinde önizleyin. 
  2. Giriş yapın ve AI özelliğinize gidin.
  3. AI özelliği düğmesine arka arkaya 20'den fazla kez hızlıca tıklayın.
  4. Sınırı aştığınızda “Çok fazla istek var. Lütfen bir süre bekleyin.” mesajını görmelisiniz.
  5. Bir dakika bekleyin ve tekrar deneyin. Normal şekilde çalışması gerekir.

Mesaj görünmezse, Copilot’ta hata ayıklama yapabilirsiniz. 

NOT: Vercel, arka uç sisteminizi sunucusuz işlevler olarak çalıştırır; bu nedenle, örnekler yeniden başlatıldığında bellek içi hız sınırlayıcı sıfırlanır. Bu durum, MVP trafiği için uygundur. Bir kişinin bir düğmeye 50 kez tıklaması gibi arka arkaya yapılan kötüye kullanımları engelleyebilir.

Codespaces'te ayrıntılı hata mesajları, hata ayıklamanıza yardımcı olur. Üretim ortamında ise bu ayrıntılar, bir saldırgana kodunuzun nasıl yapılandırıldığını gösterir. 

Güvenli hata yönetimi, kullanıcılara kullanıcı dostu bir mesaj gösterirken teknik ayrıntıları sunucuya kaydeder. Hata mesajlarını ortadan kaldırmıyorsunuz; sadece saldırganların bunları görememesi için başka bir yere yönlendiriyorsunuz.

  1. Copilot’a try/catch istisna işleme eklemesini isteyin. İşte örnek bir komut:

Express.js API’ma üretim ortamına uygun hata işleme özelliği eklememe yardım edin.

Ham hata mesajlarını güvenli ve kullanıcı dostu yanıtlarla değiştirin.

Bağlam: Uygulamam, Express rotalarından Groq API’sini çağırıyor. Üretim ortamında, kullanıcıların yığın izlerini veya dahili ayrıntıları görmesini istemiyorum.

Rota işleyicilerini try/catch bloğu içine alın. Sunucu tarafında console.error() ile hataların tam metnini günlüğe kaydedin. Kullanıcılara “Bir sorun oluştu. Lütfen tekrar deneyin.” mesajını gönderin. Groq API hatalarını, dahili ayrıntıları göstermeden kullanıcıya yardımcı olacak şekilde sunun.

  1. Oluşturulan kodu inceleyin.

    Bir try/catch bloğu görmelisiniz; burada catch bloğu, hatanın tam metnini şu şekilde günlüğe kaydeder:

    1. console.error() (yalnızca sunucu tarafında)
    2. kullanıcıya gönderilen genel bir mesaj.

Groq veya Gemini API hataları gibi bilinen hatalarda ise bunun yerine spesifik ve faydalı mesajlar görüntülenir.

Tüm API anahtarlarımız için Codepace gizli bilgilerini kullandığımızdan, kodumuzda doğrudan bir düzenleme yapacağız.

  1. Groq (veya başka bir LLM) API’sini çağıran sunucu kodunu bulun. 
  2. GROQ_API_KEY (veya eşdeğer değişken) değerini GROQ_APIKEY olarak değiştirin. 
  3. AI özelliğinizi deneyin.
  4. API'nin başarısız olduğuna dair bir hata mesajı görmelisiniz. Yığın izi GÖRMEMELİSİNİZ.
  5. Terminalinizi kontrol edin. Hatanın tüm ayrıntıları orada kayıtlı olmalıdır.
  6. Kodu tekrar GROQ_API_KEY olarak değiştirin ve yeniden çalışıp çalışmadığını kontrol etmek için tekrar deneyin.
  1. Codespace'inizde, hız sınırlama ve hata işlemeyle ilgili değişikliklerinizi açıklayıcı bir mesajla commit edin.
  2. " add-security " dalına gönderin.
  3. GitHub’a gidin. Bir Pull Request oluşturmanızı öneren bir başlık görmelisiniz.
  4. “Karşılaştır ve çekme isteği gönder” seçeneğine tıklayın .
  5. Değişikliklerinizi açıklayan bir başlık ekleyin (örneğin, “Hız sınırlaması ve güvenli hata işleme ekle”).
  6. “Pull isteği oluştur” seçeneğine tıklayın .
  7. Değişiklikleri gözden geçirin, ardından “Çekme isteğini birleştir ” seçeneğine tıklayın ve onaylayın.
  8. Vercel kontrol panelinize gidin. Yeni bir dağıtımın otomatik olarak oluşturulduğunu görmelisiniz.

Dağıtım işlemi tamamlandıktan sonra, canlı URL’nizde kontrol edin.

  1. Giriş yapın ve yapay zeka özelliğinizi her zamanki gibi kullanın. Çalışması gerekir.
  2. AI özelliğine 20'den fazla kez hızlıca tıklayın. Sonunda “Çok fazla istek” mesajını görmelisiniz.
  3. Bir dakika, tekrar dene. Normal şekilde çalışması gerekir.

Sorun Giderme

Uygulamanıza güvenlik özellikleri eklerken karşılaşabileceğiniz bazı sorunları aşağıda inceleyebilirsiniz. Her bir sorunu tıklayarak nasıl çözebileceğinizi öğrenebilirsiniz.

Orta katman yazılımının yalnızca statik dosya rotalarına değil, API rotalarınıza da uygulandığından emin olun. express-rate-limit orta katman yazılımı, rota işleyicilerinizden önce eklenmelidir.

Codespace terminalinizde ` npm install express-rate-limit ` komutunu çalıştırın ve güncellenmiş `package.json` ile `package-lock.json` dosyalarını push edin.

Sunucusuz işlevler, istekler arasında yeniden başlatılabilir. Hız sınırlayıcı, arka arkaya çok sayıda istek gönderilmesi gibi kötüye kullanım durumlarına karşı hâlâ işlevini yerine getirir. Bu, bir MVP için beklenen bir davranıştır.

Catch bloğunuzun res.json() işlevine genel bir mesaj gönderdiğinden ve console.error() ile hatanın tam metnini günlüğe kaydettiğinden emin olun. Sizin hata işleyicinizi geçersiz kılan başka bir hata işleyiciniz olup olmadığını kontrol edin.

Uygulamanızı İzleme

Uygulamanız devreye alınmış ve güvenliği sağlanmıştır. URL’nizi herkesle paylaşmadan önce, iki şey daha yapmanız gerekiyor:

  1. Lansmandan sonra neler olduğunu görebilmek için bir izleme sistemi kurun
  2. Güvenlik sisteminizin gerçekten çalıştığını kontrol edin. Sadece çalıştığını varsaymayın.

AI çağrıları, her çağrı başına maliyet oluşturması, değişken sürelerde gerçekleşmesi ve beklenmedik çıktılar verebilmesi nedeniyle normal API isteklerinden farklıdır. Standart bir “istek başarılı” günlüğü, AI yanıtının yararlı olup olmadığını, kullanıcının ne kadar beklediğini veya çağrının ne kadara mal olduğunu size söylemez. Yapılandırılmış günlük kaydı bu ayrıntıları kaydeder; böylece Vercel kontrol panelinizden bu sorulara yanıt bulabilirsiniz.

Vercel Kontrol Paneli 

Vercel kontrol paneliniz, uygulamanızın üretim ortamında nasıl bir performans sergilediğini görebileceğiniz bir penceredir. vercel.com adresinden projenize gidin ve üç bölümü inceleyin.

Her dağıtım, zaman damgası ve durumu (başarılı veya başarısız) ile birlikte listelenir. Tam derleme günlüğünü görmek için herhangi bir dağıtımı tıklayın. Dağıtım hatalarını burada giderirsiniz. Derleme başarısız olursa, günlükler bunun nedenini gösterir.

vercel deployment panel

Sunucu tarafındaki günlükler burada gerçek zamanlı olarak görüntülenir. Bunlar, konsol çıktıları ve hatalar da dahil olmak üzere API rotalarınıza gelen istekleri gösterir.

Ayrıntıları görmek için herhangi bir günlük kaydına tıklayın: istek URL’si, yanıt durum kodu ve yürütme süresi. Soldaki filtreleri kullanarak sonuçları durum koduna göre (tüm 500 hatalarını bul), rotaya göre (sadece AI isteklerini görüntüle) veya zaman aralığına göre daraltabilirsiniz.

Ayrıca, “Canlı” düğmesine tıklayarak günlükleri gerçek zamanlı olarak izleyebilirsiniz. Bu özellik, uygulamanızı test ederken tıkladığınızda sunucuda neler olup bittiğini görmek istediğinizde kullanışlıdır.

Günlük saklama süresi: Şubat 2026 itibarıyla, Hobby (ücretsiz) planında çalışma zamanı günlükleri yaklaşık 1 saat boyunca erişilebilir durumda olacaktır. Bu süre, test ve hata giderme işlemleri için yeterlidir; ancak günlükler ertesi gün artık mevcut olmayacaktır. AI özelliğinizi test ettikten kısa bir süre sonra “Günlükler” sekmesini kontrol edin. 

vercel logs panel

"Gözlemlenebilirlik" bölümü, tek tek günlük kayıtlarının ötesine geçerek tüm istekleriniz genelinde ortaya çıkan eğilimleri gösterir: hangi rotaların en yavaş olduğu, hangilerinin hata oranlarının en yüksek olduğu ve fonksiyonunuzun performansının zaman içinde nasıl değiştiği.

Bu sekme, ücretsiz Hobby planı da dahil olmak üzere tüm planlarda mevcuttur. 

Observability Pro ve Plus planları, özel sorgu ve anomali uyarıları özelliğini etkinleştirir.
MVP’niz için buna ihtiyacınız yok; varsayılan görünümler yeterlidir. 

Vercel, Gözlemlenebilirlik kapsamında aşağıdaki olay türlerini izler:

  • Edge İstekleri
  • Vercel İşlev Çağrıları
  • Harici API İstekleri
  • Orta Katman Yazılımı Çağrılarının Yönlendirilmesi
  • AI Ağ Geçidi İstekleri
vercel observability panel
ETKİNLİK 5

İzleme, Doğrulama ve Başlatma

Tahmini Süre: 25 Dakika

  1. GitHub’a gidin ve MVP deponuza gidin
  2. Deponun sol üst köşesindeki ana açılır menüyü tıklayın ve tüm dalları görüntüleyin.
  3. Yeni bir dal oluşturun .
  4. İstediğiniz adı verebilirsiniz: add-monitoring(ya da başka bir açıklayıcı ad).
  5. Bu dal için yeni bir Codespace oluşturun ve açın.

Üretim ortamındaki AI aramaları hakkında bilmeniz gereken ilk şey, bunların ne kadar sürdüğüdür. 15 saniye bekleyen bir kullanıcı, uygulamanın arızalı olduğunu düşünebilir.

Copilot'tan zamanlama sarmalayıcısını eklemenize yardım etmesini isteyin.

Express.js AI rotama izleme özelliği eklemek istiyorum.

Üretim ortamında her bir Groq API çağrısının ne kadar sürdüğünü takip etmek istiyorum.

AI kodum [index.js] dosyasında yer alıyor ve Groq API’sini çağırıyor. Vercel’e dağıtım yapıyorum.

AI çağrısından önce ve sonra Date.now() değerini kaydedin. Yanıt süresini milisaniye cinsinden hesaplayın. Rota adını da ekleyerek console.log() ile günlüğe kaydedin.

  1. Uygulamanızı Codespaces'te başlatın ve bir AI çağrısı başlatın.
  2. Terminal çıktısında yanıt süresi günlüğünü kontrol edin.
  3. Henüz dağıtmayın. Bir sonraki adımda daha fazla günlük kaydı ekleyeceksiniz ve tek seferde dağıtım yapacaksınız.

Şimdi zamanlama kodunuzu genişleterek genel durumu tam olarak görebilirsiniz. Yapılandırılmış günlükler JSON formatında olduğundan, bunları Vercel’in kontrol panelinde arayabilir ve filtreleyebilirsiniz. Copilot’tan gerekli kodu oluşturmasını isteyin.

Temel console.log komutlarını, Vercel’in kontrol panelinde arama yapabileceğim yapılandırılmış JSON günlükleriyle değiştirin.

Groq API çağrım için responseTime değerini ölçen bir zamanlama sarmalayıcım zaten var.

Her AI çağrısı için console.log(JSON.stringify(data)) komutunu kullanarak bir JSON nesnesi günlüğe kaydedin; bu nesne şu bilgileri içermelidir:
zaman damgası (ISO),
eylem adı,
inputLength (karakter sayısı, içerik değil),
responseTime (ms),
success (true/false),
hata (mesaj veya null)

Örnek (TutorMatch için): 

Bir öğrenci özel ders öğretmeni önerileri aradığında, günlük kaydı şöyle görünebilir. Uygulamanızda farklı eylem adları olacaktır. AI özelliğinizin işlevine göre uyarlayın.

				
					{
  "timestamp": "2026-02-16T14:32:01Z",
  "action": "get_tutor_recommendations",
  "inputLength": 145,
  "responseTime": 2340,
  "success": true,
  "error": null
}

Her alan belirli bir amaca hizmet eder:

  • zaman damgası – Kullanıcılar tarafından bildirilen sorunları (“saat 15:00’te arıza oldu”) günlüklerdeki olaylarla ilişkilendirmenizi sağlar
  • eylem – Hangi AI özelliklerinin en çok kullanıldığını ve hangilerinin göz ardı edildiğini gösterir
  • inputLength – Olağandışı derecede büyük girişler, kötüye kullanımın işareti olabilir. Günlüğe kaydedilen uzunluk (içerik değil), kullanıcı gizliliğini korur
  • responseTime – Kullanıcılar şikayet etmeden önce performans sorunlarını tespit etmenize yardımcı olur. 10 saniyenin üzerinde tutarlı süreler dikkat gerektirebilir
  • başarı – Yapay zeka arıza oranınızı bir bakışta gösterir. %5 normal, %50 ise bir kriz durumudur
  • hata – Çağrılar başarısız olduğunda, hata mesajı sorunu yeniden canlandırmanıza gerek kalmadan nedenini size bildirir
  1. Uygulamanızı Codespace'te yeniden çalıştırın.
  2. Bir AI çağrısı başlatın.
  3. JSON günlük kayıtları için terminali kontrol edin.

Şimdi, zamanlama ve yapılandırılmış günlük kaydı değişikliklerinizi birlikte kaydedin ve dağıtın:

  1. Günlük kaydı değişikliklerinizi açıklayıcı bir mesajla kaydedin.
  2. Add-monitoringdalına gönder.
  3. GitHub’a gidin. Bir Pull Request oluşturmanızı öneren bir başlık görmelisiniz.
  4. “Karşılaştır ve çekme isteği gönder” seçeneğine tıklayın .
  5. Değişikliklerinizi açıklayan bir başlık ekleyin.
  6. “Pull isteği oluştur” seçeneğine tıklayın .
  7. Değişiklikleri gözden geçirin, ardından “Çekme isteğini birleştir ” seçeneğine tıklayın ve onaylayın.
  8. Vercel kontrol panelinize gidin ve “Dağıtımlar” sekmesinde yeni bir dağıtımın başladığını doğrulayın.
  9. Dağıtım tamamlandığında, canlı uygulamanızı açın, oturum açın ve 2-3 adet AI çağrısı başlatın.
  10. Vercel → Günlükler bölümüne gidin ve yapılandırılmış JSON girişlerinizi arayın
  11. timestamp, action, responseTime ve success alanlarının doğru şekilde görüntülendiğini kontrol edin
  12. Her günlük kaydı bir satır olarak görüntülenmelidir. Ok simgesine tıklayarak JSON alanlarınızı genişletip görüntüleyebilirsiniz.
  13. JSON yerine [Object object] ifadesini görürseniz, kodunuzu console . log(logData) yerine console.log( JSON.stringify(logData)) kullanacak şekilde güncelleyin.

Unutmayın, ücretsiz kademede günlükler yaklaşık 1 saat boyunca erişilebilir durumdadır; bu nedenle, testten hemen sonra bunları kontrol edin.

Vercel, sayfa görüntülemelerini ve ziyaretçi verilerini takip eden ücretsiz bir web analizi hizmeti sunar. Kurulum birkaç dakika sürer ve proje sunumunuzda referans olarak kullanabileceğiniz gerçek ziyaretçi istatistiklerini size sağlar.

  1. Vercel projenizin kontrol paneline gidin
  2. " Analytics " sekmesine tıklayın.
  3. " Web Analizi" seçeneğinin yanındaki "Etkinleştir" düğmesine tıklayın .
  1. Hala “add-monitoring” dalınız varsa, ilgili kod alanını açın. Aksi takdirde, deponuz için yeni bir dal oluşturun ve yeni bir kod alanı açın.
  2. Codespace'inizde, terminalde ` npm install @vercel/analytics ` komutunu çalıştırarak analytics paketini yükleyin.
  3. Uygulamanıza analiz bileşenini ekleyin.
    • Eğer kullanıyorsanız React veya Next.js,
      • App.jsx dosyasına “import { Analytics } from ‘@vercel/analytics/react’” satırını ekleyin
      • Add <Analytics /> as a component inside your App.jsx return, typically just before the closing tag.
    • Basit HTML/JS uygulamaları için,“
      Commit’i Etkinleştir” seçeneğine tıkladıktan sonra Vercel’in gösterdiği talimatları izleyin.
  4. Değişikliklerinizi kaydedin, gönderin ve birleştirin. Bir sonraki dağıtım, veri toplamaya başlayacaktır.

Not: Kontrol panelinde analitik özelliğini etkinleştirmek tek başına yeterli değildir. Verilerin aktarılabilmesi için kodunuzda @vercel/analytics paketinin de bulunması gerekir. 3. ve 4. adımları atlarsanız, Analitik sekmesi boş kalacaktır.

Hobby planı, aylık 2.500 ücretsiz olay içerir (Şubat 2026 itibarıyla); bu, bir MVP için fazlasıyla yeterlidir. Kurulumun ardından, uygulamanızı kaç kişinin ziyaret ettiğini, hangi sayfaları görüntülediklerini ve nereden geldiklerini görebileceksiniz.

Şimdi DevTools’u kullanarak üretim ortamındaki uygulamanızın gerçekten güvenli olup olmadığını doğrulayın. Sadece güvenli olduğunu varsaymayın.

  1. Dağıtılmış uygulamanızı (Codespace'iniz değil, .vercel.app URL'si) tarayıcıda açın.
  2. DevTools'u açmak için F12 tuşuna basın (veya sağ tıklayıp “İnceleme” seçeneğini seçin).
  3. “Ağ” sekmesine geçin.
  4. Ağ günlüğünü temizleyin (temizle simgesine tıklayın).
  5. Uygulamanıza giriş yapın ve yapay zeka özelliğini kullanın.
  6. Ağ isteklerinin nasıl göründüğüne bakın.

Aşağıdakilerin her birini kontrol edin. Bunlar, devreye alınmış her uygulamanın geçmesi gereken üç güvenlik kontrolüdür.

1. Kontrol: API anahtarlarınız gizli mi?

AI özelliğinizi tetikleyen talebe tıklayın.

  1. İstek URL’si SİZİN arka uç sunucunuza yönlendirilmelidir: https://your-app.vercel.app/api/ai-query. Doğrudan api.groq.com adresine veya herhangi bir harici API’ye yönlendirilmemelidir. Eğer böyle bir durum olursa, ön uç uygulamanız AI API’sini doğrudan çağırıyor demektir ve API anahtarınız açığa çıkabilir.
  2. “Başlıklar” sekmesine tıklayın ve “İstek Başlıkları”na bakın. Groq API anahtarınız hiçbir başlıkta GÖRÜNMEMELİDİR. Arka uç sisteminiz, harici çağrıyı sunucu tarafında gerçekleştirir. Tarayıcı, bu anahtarı hiçbir zaman görmez.
  3. URL’deki sorgu parametrelerini kontrol edin. URL’de ?key=AIza… gibi bir ifade olmamalıdır.

API anahtarınız tarayıcı isteğinin herhangi bir yerinde görünüyorsa, durun. Anahtarınız açığa çıkmıştır ve sitenizi inceleyen herkes onu çalabilir. Kodunuza geri dönün ve tüm harici API çağrılarının sunucu tarafında gerçekleştiğinden emin olun.

Aynı istekle ilgili olarak, İstek Başlıklarına tekrar bakın. Şunları görmelisiniz:

Yetkilendirme: Bearer eyJhbGciOiJIUzI1NiIs…

Bu, ön uç uygulamanızın gönderdiği Supabase oturum belirtecidir. Bu belirteç, isteğin oturum açmış bir kullanıcıdan geldiğini kanıtlar. Bu uzun karakter dizisi, kimlik doğrulama bilgilerini güvenli bir şekilde iletmek için kullanılan standart bir format olan JSON Web Token’dır (JWT).

Authorization başlığı eksikse, kimlik doğrulama kodunuza geri dönün ve ön uç uygulamanızın getSession() işlevini çağırdığını ve her API isteğinde jetonu eklediğini doğrulayın.

  1. DevTools'u “Ağ” sekmesinde açık tutun.
  2. AI özelliği düğmesine 10'dan fazla kez hızlıca tıklayın.
  3. “Ağ” sekmesini takip edin: İlk birkaç istek, 200 durum kodunu (başarılı) döndürmelidir.
  4. Sınır aşıldıktan sonra, istekler 429 (Çok Fazla İstek) durum kodunu döndürmelidir.
  5. Uygulamanızda “Çok fazla istek var. Lütfen bir süre bekleyin.” mesajı görüntülenmelidir.

20'den fazla isteğin tümü, hız sınırlaması olmaksızın 200 kodunu döndürüyorsa, istekler arasında sunucusuz işlev yeniden başlatılmış olabilir. Daha hızlı tıklamayı deneyin. Hız sınırlayıcı, arka arkaya gelen yoğun istek dalgalarına karşı en etkili şekilde çalışır. Bir MVP için bu koruma düzeyi uygundur.

Üretim Maliyetlerinin Gözden Geçirilmesi

Uygulamanız, belirli sınırlamaları olan ücretsiz kullanım kademelerine sahip hizmetler kullanmaktadır. Bu sınırlamaları bilmek, beklenmedik ücretlendirmeleri önler.

Mümkünse fatura uyarılarını ayarlayın. Bazı ücretsiz paketlerde, ücretli bir plana geçene kadar uyarı ayarlamanıza izin verilmez.

Vercel

Ücretsiz Paket – 100 GB bant genişliği, 4 saat aktif CPU, aylık 1 milyon işlev çağrısı

Maliyet – Bant genişliği veya işlev sınırları aşılırsa

Nereden Kontrol Edilir – Vercel kontrol paneli → Kullanım

Fatura Uyarısı – Proje → Ayarlar → Kullanım. Hobby kademesi sınırlarını inceleyin. Vercel, bu sınırlara yaklaştığınızda sizi uyarır.

Supabase

Ücretsiz Paket – 500 MB veritabanı, 1 GB dosya depolama alanı, aylık 50.000 aktif kullanıcı

Maliyet – Depolama veya kullanıcı sınırları aşılırsa

Nereden Kontrol Edilir – Supabase kontrol paneli → Ayarlar → Faturalandırma

Fatura Uyarısı –Ayarlar → Faturalandırma bölümüne gidin. Veritabanı ve depolama alanı için kullanım uyarılarını ayarlayın.

Groq API'si

Ücretsiz Katman – Hız sınırlamalı ücretsiz kademesi (modele göre değişir)

Maliyet – Ücretsiz kademenin ötesindeki yüksek hacimli API çağrıları

Nereden Kontrol Edilir – Groq kontrol paneli → Kullanım

Fatura Uyarısı – Groq Konsolunuzda Ayarlar → Faturalandırma → Limitler bölümüne gidin.

Piyasaya Sürülmeden Önce Kontrol Listesi

Uygulamanızı dünyayla paylaşmadan önce bu kontrol listesini gözden geçirin. Liste üç gruba ayrılmıştır: Uygulamanız çalışıyor mu, güvenli mi ve başlatıldıktan sonra neler olduğunu görebiliyor musunuz?

✅ İşe yarıyor mu?

  •  Canlı URL doğru şekilde yükleniyor
  •  Giriş ve kayıt işlemleri (hesap oluşturma, giriş yapma, çıkış yapma)
  •  Giriş yapıldıktan sonra yapay zeka özelliği üretim ortamında çalışır
  •  Uygulama başka bir cihazda veya tarayıcıda çalışıyor mu (emin olmak için URL’yi bir takım arkadaşınızla paylaşın)

✅ Güvenli mi?

  •  API anahtarları, DevTools’un Ağ sekmesinde GÖRÜNMÜYOR
  •  API isteklerinde yetkilendirme başlığı bulunmaktadır 
  •  Hızlı isteklerin ardından hız sınırlama tetiklenir 
  •  Çevre değişkenleri Vercel’de ayarlanır; kodunuzda sabit olarak yazılmaz

✅ Neler olduğunu görebiliyor musun?

  •  Bir AI çağrısı tetiklediğinizde, yapılandırılmış JSON günlükleri Vercel’in Günlükler sekmesinde görüntülenir
  •  Web Analitiği etkinleştirildi
  •  Vercel, Supabase ve Groq için maliyet gösterge panelleri kontrol edildi

Herhangi bir öğede sorun varsa, URL’nizi paylaşmadan önce bunu düzeltin.

Tüm öğeler başarılı olursa, uygulamanız paylaşılmaya hazırdır.

Sorun Giderme

Sunucu tarafı API rotalarınızda console.log() işlevini kullandığınızdan emin olun; bunu istemci tarafı kodunda kullanmayın. İstemci tarafı günlükleri Vercel’de değil, tarayıcıda görüntülenir.

console.log(logData ) yerine console.log( JSON.stringify( logData ) ) kullanın .

Günlük dosyalarınızda responseTime değerini kontrol edin. Bu değer sürekli olarak 10 saniyenin üzerindeyse, bir yükleme mesajı eklemeyi ve isteği bölmeyi düşünün,

Fluid Compute özelliği sayesinde (yeni projelerde varsayılan olarak etkindir), işlevler Hobby planında en fazla 300 saniye (5 dakika) boyunca çalıştırılabilir. Fluid Compute özelliği olmadan bu sınır 60 saniyedir. Yapay zeka çağrılarınızda hâlâ zaman aşımı hatası alıyorsanız, kullanıcılar için bir yükleme göstergesi ve zaman aşımı mesajı ekleyin.

Ön uç uygulamanız, arka uç üzerinden geçmek yerine harici API’yi doğrudan çağırıyor. Ön uç uygulamanızı, Express rotanızı (örn. /api/ai-query) çağıracak şekilde güncelleyin.

Veriler, bir sonraki dağıtımın ardından ve birkaç sayfa ziyaretinden sonra görünür. Özelliği etkinleştirdikten ve sitenizi ziyaret ettikten sonra birkaç dakika bekleyin.

Uygulamanız your-app-name.vercel.app adresinde yayında. Bu adres, yarışmalar, kullanıcı testleri ve sunumlarınız için uygun. Ancak uygulamanızın gerçek bir işletme gibi algılanmasını istiyorsanız, özel bir alan adı büyük fark yaratır. tutormatch.app, tutormatch-mvp.vercel.app adresinin veremediği bir profesyonellik hissi verir.

Vercel’in ücretsiz planı, ek ücret ödemeden özel alan adlarını destekler (proje başına en fazla 50 adet, otomatik HTTPS ile). Tek masraf, alan adının kendisidir.

ETKİNLİK 6

(İSTEĞE BAĞLI) - Özel bir alan adı bağlayın

Tahmini Süre: 15 Dakika

Kendi alan adınızı almak için bu seçeneklerden birini seçin.

Seçenek

Maliyet

Süreç

GitHub Öğrenci Geliştirici Paketi

Alan adı kayıt kuruluşu

Okul e-posta adresiniz varsa, GitHub hesabınız üzerinden kaydolabilirsiniz. education.github.com/pack adresinden başvurun. Namecheap’ten (.me), Name.com’dan (.live, .studio, .app, .dev ve 20’den fazla diğer uzantı) ücretsiz alan adları ile .tech alan adları dahildir.

GitHub Öğrenci Geliştirici Paketi

~Yılda 10-15 ABD doları

Namecheap, Cloudflare veya Google Domains’ten satın alın. Fiyatlar uzantıya göre değişiklik gösterir. .com uzantısı, .site veya .tech uzantılarından daha pahalıdır.

Namecheap, Cloudflare veya Google Domains’ten satın alın. Fiyatlar uzantıya göre değişiklik gösterir. .com uzantısı, .site veya .tech uzantılarından daha pahalıdır.

~Yılda 10-20 ABD doları

Vercel kontrol panelinizden (Ayarlar → Etki Alanları) doğrudan arama yapın ve satın alın. Vercel, DNS ayarlarını otomatik olarak yapar. Ücret ödemek istiyorsanız en basit seçenek budur.

  1. Vercel projen ize gidin → Ayarlar → Etki Alanları
  2. "Etki Alanı Ekle " seçeneğine tıklayın ve etki alanı adınızı girin (örn. tutormatch.app)
  3. Vercel, ihtiyacınız olan DNS kayıtlarını gösterir. Aşağıdakilerden birini göreceksiniz:
    • Vercel’in IP adresine yönlendiren bir A kaydı (tutormatch.app gibi kök etki alanları için).
    • cname.vercel-dns.com adresine yönlendiren bir CNAME kaydı (www.tutormatch.app gibi alt etki alanları için).
  4. Alan adı kayıt kuruluşunuzun DNS ayarlarına gidin ve Vercel tarafından sağlanan kayıtları ekleyin.
  5. DNS'nin yayılmasını bekleyin. Bu işlem genellikle 30 dakikadan az sürer, ancak 48 saate kadar da sürebilir.

Bu adımı atlamayın. Aksi takdirde, özel alan adınızda oturum açma işlemi çalışmayacaktır.

  1. Supabase kontrol paneline gidin → Kimlik Doğrulama → URL Yapılandırması.
  2. Özel alan adı URL’nizi (örn. https://tutormatch.app) hem Site URL ’sine hem de Yönlendirme URL’lerine ekleyin.
  3. .vercel.app URL’nizi de listeye ekleyin. Yedek olarak hâlâ işlev görüyor.
  1. Tarayıcınızda özel alan adınızı ziyaret edin. Uygulamanız HTTPS üzerinden yüklenmelidir (kilit simgesine dikkat edin).
  2. Giriş yapmayı deneyin. Eğer Codespaces URL’nize veya .vercel.app URL’nize yönlendiriliyorsanız, 3. adımı atlamışsınız demektir.
  3. AI özelliğinizi (ve diğer API entegrasyonlarını) test ederek her şeyin uçtan uca düzgün çalıştığından emin olun.

Sorun Giderme

Kayıt sağlayıcınızın DNS ayarlarında A kaydı veya CNAME kaydını bir kez daha kontrol edin. Vercel’den değerleri tam olarak kopyaladığınızdan emin olun.

Bir dakika. Vercel, DNS güncellemesi yayıldıktan sonra SSL'yi otomatik olarak devreye alır, ancak bu işlem bir saate kadar sürebilir.

Supabase kimlik doğrulama yönlendirme URL’lerini, özel alan adınızı içerecek şekilde güncelleyin. Listede hem .vercel.app hem de özel alan adı URL’lerini koruyun.

Yansıma

İşte, başardınız! Uygulamanız devreye alındı ve yayında! Tebrikler! Birkaç dakikanızı ayırıp şu sorular üzerinde düşünün:

Sunset and reflection over lake
01

'ın İzlenmesi
Uygulamanızın yayına girdiğini bilmek, hatalar, performans ve maliyet konusundaki düşünce tarzınızı nasıl değiştiriyor? İlk haftanızda en çok hangi unsurları yakından takip edersiniz?
02

Yolculuk
Bir fikirle başladınız, bir prototip geliştirdiniz, kodunu yazıp hatalarını giderdiniz, kimlik doğrulama ile güvenliğini sağladınız ve şimdi de bunu dünyaya sundunuz. Bu süreçte hangi beceri sizi en çok şaşırttı?
03

Sonraki Adımlar
Bundan sonra neye öncelik vereceksiniz? Yeni özellikler, daha iyi yapay zeka yanıtları, performans iyileştirmeleri mi, yoksa kullanıcılara yönelik pazarlama çalışmaları mı?

Anahtar Terimler

  • Yayınlama: Uygulamanızı internette kalıcı bir URL üzerinden erişime açma işlemidir. Önizleme bağlantısından farklı olarak, yayınlanmış bir uygulama bilgisayarınız kapalıyken bile erişime açık kalır.
  • Üretim Ortamı: Kod yazıp test ettiğiniz geliştirme ortamının aksine, gerçek kullanıcıların etkileşimde bulunduğu uygulamanızın canlı sürümü.
  • Ortam Değişkenleri (Üretim): API anahtarları ve gizli anahtarlar, kodunuzda değil, barındırma platformunuzun ayarlarında saklanır. Vercel’de bunlar proje kontrol panelinden ayarlanır.
  • Otomatik Dağıtım: GitHub’daki ana dalınıza kod gönderdiğinizde Vercel, uygulamanızı otomatik olarak yeniden derler ve yeniden dağıtır.
  • İstek Sınırlaması: Bir kullanıcının belirli bir zaman aralığında gönderebileceği istek sayısını sınırlama. Kötüye kullanımı önler ve API maliyetlerini kontrol eder. 
  • Güvenli Hata Yönetimi: Kullanıcılara genel ve anlaşılır hata mesajları sunarken, tüm teknik ayrıntıları sunucuya kaydedme. İçerideki ayrıntıların potansiyel saldırganlara ifşa edilmesini önler.
  • Yapılandırılmış Günlük Kaydı: Uygulamanızdaki olayları düz metin yerine düzenli JSON verileri olarak kaydetme. Üretim ortamında meydana gelen olayları arama, filtreleme ve analiz etme imkânı sağlar.
  • Gözlemlenebilirlik: Günlükler, metrikler ve izleme panoları aracılığıyla, çalışmakta olan uygulamanızın içinde neler olup bittiğini dışarıdan anlayabilme yeteneği.
  • Sunucusuz İşlevler: Sunucu yönetimi gerektirmeden, istekler üzerine talep üzerine çalışan arka uç kodu. Vercel, Express.js API rotalarınızı otomatik olarak sunucusuz işlevlere dönüştürür.
  • Özel Alan Adı: Varsayılan .vercel.app URL’sinin yerine, size ait olan ve Vercel dağıtımınıza yönlendiren kişiselleştirilmiş bir web adresi (örneğin tutormatch.app).
  • DNS (Etki Alanı Adı Sistemi): Etki alanı adlarını (tutormatch.app gibi) bilgisayarların sunucuları bulmak için kullandıkları IP adreslerine çeviren sistemdir. Özel bir etki alanı bağladığınızda, DNS kayıtlarını Vercel’e yönlendirecek şekilde yapılandırırsınız.

Ek Kaynaklar

Dağıtım

Güvenlik

İzleme

Maliyet Yönetimi

 

Ders İçeriği
Önceki Test
Kursa geri dön
Sonraki Test