React Vite site yayınlama
React ve Vite Portfolyonu Yayınla: Canlı Örnek ve Kontrol Listesi
Bir portfolyonun yerelde çalışması ilk adım. Asıl hedef, kendi alan adında açılması ve her güncellemeden sonra beklediğin gibi çalışması. Önce DeployVera üzerinde yayında olan bir frontend örneğine bakalım, ardından kendi projenin yayın kontrol listesini çıkaralım.
Kurucumuzun günlük kullanımından bir örnek
yusufcelalcelik.com, kişisel çalışmaların ve projelerin sunulduğu bir portfolyo. Site React ve Vite kullanıyor ve DeployVera üzerinde yayınlanıyor. Sayfaları, mobil görünümü ve bağlantıları doğrudan canlı sitede inceleyebilirsin.
Kendi projelerimizde de DeployVera’yı kullanıyor, ürünümüzü kendi yönettiğimiz altyapıda çalıştırıyoruz. Bu portfolyo, sunduğumuz altyapıyı kendi işlerimizde nasıl kullandığımıza bir örnek.
1. Önce projenin üretim çıktısını kontrol et
Standart bir statik Vite projesinde npm run build, yayınlanacak dosyaları varsayılan olarak dist dizinine üretir. Projenin package.json dosyasındaki komutları ve vite.config dosyasındaki build.outDir ayarını esas al; bunlar projene göre değişebilir.
npm run preview ile bu çıktıyı yerelde inceleyebilirsin. Preview komutu yerel kontrol içindir; canlı ortamda statik dosyaları sunacak yayın yapılandırmasını kullan. Aşağıdaki adımlar kendi React ve Vite projen için bir başlangıç listesidir.
- 1.package.json ve kilit dosyanı depoya ekle. npm kullanıyorsan npm ci ile bağımlılıklarını kur, ardından üretim build’ini yerelde al.
- 2.Görsellerin, fontların ve sayfa bağlantılarının üretim çıktısında açıldığını kontrol et.
- 3.Tarayıcıya gönderilen koda API anahtarı, veritabanı parolası veya başka bir gizli değer ekleme.
2. GitHub deposundan yayın ayarlarına geç
DeployVera’da GitHub bağlantını tamamlayıp projeni ve yayınlamak istediğin branch’i seç. Statik bir frontend yayınlıyorsan build türünü, statik site seçimini ve yayın dizinini projenin üretim çıktısıyla eşleştir.
Varsayılan bir Vite projesinin çıktı dizini dist olabilir; özel bir Dockerfile veya farklı build ayarı kullanıyorsan kendi yapılandırman geçerlidir. Build tamamlandığında logları ve uygulama adresini birlikte kontrol et.
- 1.Doğru depo ve branch’i seç; yayınlanacak son değişikliklerin GitHub’da olduğundan emin ol.
- 2.Build ayarlarını ve yayın dizinini kontrol et.
- 3.Uygulama adresini açıp ana sayfayı ve önemli bağlantıları dene.
3. Kendi alan adını bağla ve yeniden dene
Uygulaman ilk adresinde çalıştıktan sonra alan adını ekle ve panelde gösterilen DNS yönlendirmesini uygula. DNS değişikliği yayıldığında HTTPS üzerinden kontrol et.
İstemci tarafında sayfa yönlendirmesi kullanıyorsan bir alt sayfayı doğrudan açıp yenile. Ana sayfa açılırken alt sayfanın 404 vermesi, statik sunucudaki yönlendirme ayarının gözden geçirilmesi gerektiğini gösterebilir.
- 1.Alan adının doğru uygulamaya yönlendiğini ve HTTPS’in çalıştığını doğrula.
- 2.Mobil görünümü, menüyü ve varsa iletişim formunu kontrol et.
- 3.Küçük bir içerik güncellemesi yayınla; yeni içeriğin geldiğini ve bağlantıların çalıştığını yeniden kontrol et.
4. Kendi projenle ilk adımı at
Portfolyo, tanıtım sitesi veya bir SaaS arayüzü hazırlıyorsan önce yayınlayacağın parçaları belirle. Ayrı bir API ya da veritabanın varsa kaynak ve uygulama limitlerini bu parçalarla birlikte değerlendir.
Paketler sayfasında deneme kapsamını, kaynak sınırlarını ve ücretli devam koşullarını inceleyebilirsin. Yayın ayarlarında desteğe ihtiyacın varsa projenin kullandığı teknolojileri ve takıldığın adımı bize yaz.