Vite; React, Vue, Svelte, Solid ve düz JavaScript projelerini statik dosyalardan oluşan bir klasöre, dist/ klasörüne derler. Lobsite bu klasörü barındırır. npm run build, ardından npx lobsite çalıştırın; uygulama HTTPS'li bir *.lobsite.app adresinde yayına girer. Uygulamada istemci tarafı yönlendirme varsa, tek bir ayar derin bağlantıların çalışmasını sağlar.
Vite şablonuyla tarayıcı oyunu mu yapıyorsunuz? Phaser barındırma kılavuzu, bu dağıtım iş akışının yanı sıra oyun varlıklarını, tuval boyutlarını ve oyun testi yapılarını kapsar.
Nasıl çalışır
npm run buildile derleyin (yanivite build). Uygulamadist/içine, hash'li dosyalardist/assets/içine gelir.- Projede
npx lobsiteçalıştırın. Vite'ın derlemeye zaten kopyaladığıpublic/klasörünü değil,dist/klasörünü deploy eder. İlk deploy hesap gerektirmez ve 6 saat sürer. - Uygulamada bir yönlendirici varsa tek sayfa modunu açın:
lobsite.tomldosyasınaspa = trueekleyin ya da sitenin ayarlarında Tek sayfalı uygulama'yı açın. Sonra siteyi sahiplenme bağlantısıyla ücretsiz bir hesapta koruyun.
Yönlendirme ve tek sayfa modu
React Router, Vue Router veya TanStack Router kullanan bir Vite uygulamasının tek bir index.html dosyası vardır. /settings adresini doğrudan açmak, sunucudan var olmayan bir dosya ister. Tek sayfa modu açıkken Lobsite bu yollara index.html dosyanızla yanıt verir ve sayfayı yönlendirici çizer:
# lobsite.toml
spa = true
Uygulamayı yalnızca sayfa istekleri alır. Eski bir /assets/index-3f9a.js gibi eksik bir dosya gerçek bir 404 alır; böylece bir deploy'dan sonra önceki sürümü hâlâ açık tutan ziyaretçi, betik yerine HTML değil, net bir hata görür. package.json içinde bir yönlendirici varken tek sayfa modu kapalıysa deploy bir ipucu yazdırır. Ayrıntılar belgelerde.
vite.config ve derleme
basevarsayılan değeri/olarak kalır: uygulama adresinin en üstünden sunulur. Yalnızca bir GitHub Pages proje sitesi için ayarlayın, taşınınca kaldırın.VITE_ile başlayan ortam değişkenleri derlemeye yazılır. Uygulamayı açan herkes onları görebilir, bu yüzden içlerine gizli bilgi koymayın;.envdosyalarının kendisi asla deploy edilmez.- Birden çok sayfa (birden fazla HTML dosyalı
build.rollupOptions.input) çok sayfalı bir sitedir: her sayfa bir dosyadır ve tek sayfa moduna gerek yoktur. npm run preview,dist/klasörünü yerelde sunar; deploy öncesi en hızlı kontroldür.
Hash'li dosyaları önbelleğe almak
Vite her dosyanın içeriğinin hash'ini adına koyar, örneğin index-3f9a.js; böylece belirli bir ada sahip dosya hiç değişmez. Lobsite de dosyaları içeriğe göre saklar, bu yüzden bir deploy yalnızca değişen parçaları yükler. Tarayıcıların bu dosyaları bir yıl saklaması için bir başlık kuralı ekleyin:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html her zaman yeniden kontrol edilir; ziyaretçiler deploy'dan hemen sonra yeni sürümü alır.
lobsite.toml'da spa = true ya da paneldeki tek bir anahtar: derin bağlantılar uygulamanızı açar, eksik dosyalar yine 404 verir.
Dosyalar hash'lerine göre saklanır. Değişmemiş bir siteyi yeniden deploy etmek 0 bayt yükler.
Yayına almadan önce önizleyin. Yönlendirmeler dahil tek tıkla geri alın.
Her site ilk deploy'dan itibaren HTTPS'li bir *.lobsite.app adresi alır.
Yönlendirmeler, başlıklar ve formlar lobsite.toml içinde durur ve her deploy ile birlikte gider.
Hesapsız bir deploy 6 saat yayında kalır. Sahiplenme bağlantısı onu ücretsiz olarak korur.
Vite barındırma hizmetleri karşılaştırması
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Tek sayfalı uygulamada derin bağlantılar | spa = true veya paneldeki bir anahtar |
Bir _redirects kuralı |
vercel.json içinde bir rewrite |
Hayır: index.html dosyasını 404.html olarak kopyalayın, 404 durumuyla sunulur |
| Eksik betik dosyaları | 404 | Uygulamanın index.html dosyası |
Uygulamanın index.html dosyası |
404 |
| Sunucuda derleme | Hayır: dist/ klasörünü deploy edersiniz |
Evet | Evet | GitHub Actions'ta |
| İlk deploy'dan önce hesap | Hayır: 6 saat yayında, sonra ücretsiz koruyun | Evet | Evet | Evet, ve bir depo |
| Özel alan adı | Evet, ücretsiz | Evet | Evet | Evet |
Netlify ve Vercel Git'ten derler ve sunucu fonksiyonları çalıştırır. Lobsite ise derlenmiş bir Vite uygulamasını makinenizden, CI'dan veya bir yapay zekâ ajanından yayına almanın en hızlı yoludur; tek sayfa yönlendirmesi tek satır ya da tek tıktır.
Sık sorulan sorular
Vite uygulamamın ana sayfa dışındaki sayfaları neden "Not found" gösteriyor?
Uygulama istemci tarafı yönlendirme kullanıyor ve sunucuda bu yollar için dosya yok. Tek sayfa modunu açın: lobsite.toml içinde spa = true ya da sitenin ayarlarında Tek sayfalı uygulama.
Lobsite Vite derlememi çalıştırıyor mu?
Hayır. Kendi makinenizde veya CI'da derleyin, sonra dist/ klasörünü deploy edin. npm run preview ile kontrol ettiğiniz şey birebir yayına girer.
Vite ortam değişkenlerini kullanabilir miyim?
Evet, derlemeyi çalıştırdığınızda içine yazılan VITE_ değişkenlerini. Değiştirdikten sonra yeniden derleyin. Gizli olan her şey bir Vite uygulamasında değil, sunucuda durmalı.
Çok sayfalı bir Vite sitesi tek sayfa moduna ihtiyaç duyar mı?
Hayır. Her HTML sayfası kendi dosyasıdır ve about.html /about adresinde açılır. Yanlış yazılmış bir adres 404.html dosyanızı alsın diye tek sayfa modunu kapalı bırakın.