0Pricing
Vue Academy · Ders

Barındırma Platformlarına Dağıtım

Vue uygulamalarını statik barındırıcılara ve platformlara dağıtın.

Barındırma Platformlarına Dağıtım, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Uygulamanızı Yayına Alma

Bir Vue SPA'sı statik dosyalara derlenir; bu nedenle onu herhangi bir statik barındırıcıda barındırabilirsiniz. Netlify, Vercel ve GitHub Pages gibi platformlar bu dosyaların dağıtımını hızlı ve çoğu zaman ücretsiz hâle getirir.

Neyi Yayına Alırsınız

npm run build tarafından oluşturulan dist klasörünün içeriğini dağıtırsınız. Barındırıcı, bu dosyaları dünya genelindeki kullanıcılara bir CDN üzerinden sunar.

npm run build
# upload the dist/ folder to your host

Netlify'a Dağıtım

Netlify, Git deponuzdan derleme yapabilir. Ona derleme komutunu ve yayımlanacak klasörü bildirirsiniz.

# Netlify settings
# Build command: npm run build
# Publish directory: dist

Vercel'e Dağıtım

Vercel, Vite projelerini otomatik olarak algılar. Deponuzu bağladığınızda derlemeyi çalıştırır ve çıktıyı sunar; her gönderimde yeniden dağıtım yapar.

# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist

GitHub Pages'e Dağıtım

GitHub Pages, bir depodaki statik dosyaları sunar. Yerel olarak veya sürekli tümleştirme ortamında derleme yapıp dist çıktısını Pages dalına gönderebilir ya da bir eylem kullanabilirsiniz.

Geçmiş Modu Sorunu

Geçmiş modu ile Vue Router, /about gibi temiz adresler oluşturur. Ancak statik bir barındırıcının gerçek bir /about dosyası yoktur; bu nedenle doğrudan ziyaret veya yenileme 404 döndürür.

SPA Yönlendirme Düzeltmesi

Çözüm, sunucuya tüm rotalar için index.html dosyasını sunmasını söylemektir; böylece yönlendirmeyi istemci tarafında Vue Router üstlenir.

Netlify Yönlendirme Kuralı

Netlify'da, tüm yolları index.html'e yeniden yazan bir _redirects dosyası (veya netlify.toml kuralı) ekleyin.

# public/_redirects
/*    /index.html   200

Vercel Yeniden Yazma Kuralı

Vercel'de bir vercel.json yeniden yazma kuralı, index.html'e aynı geri dönüşü sağlar.

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

Temel Yol Yapılandırması

Uygulamanız bir alt yoldan sunuluyorsa (/my-repo/ gibi, GitHub Pages'te yaygın bir durumdur), varlık adreslerinin doğru çözümlenmesi için Vite yapılandırmanızdaki base seçeneğini ayarlayın.

// vite.config.js
export default {
  base: "/my-repo/"
}

CI Dağıtımı

Dağıtımları sürekli tümleştirme ile otomatikleştirin. Bir iş akışı bağımlılıkları kurar, sınamaları çalıştırır, derleme yapar ve ana dalınıza yapılan her gönderimde yayımlar; böylece yayına alma işlemi müdahale gerektirmez.

# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/

Hızlı Kontrol

Dağıtım konusundaki bilginizi sınayın.

Özet

dist klasörünü Netlify, Vercel veya GitHub Pages gibi statik bir barındırıcıya dağıtın. Yenileme sırasında geçmiş modu rotalarının çalışması için bir SPA geri dönüşü (index.html dosyasına yönlendirme veya yeniden yazma) ekleyin, alt yoldan barındırma için Vite base değerini ayarlayın ve tüm bunları CI ile otomatikleştirin. Sırada uygulamayı üretimde izlemek ve bakımını yapmak var.

Sıkça Sorulan Sorular

“Barındırma Platformlarına Dağıtım” dersi ücretsiz mi?

Evet — “Barındırma Platformlarına Dağıtım” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Barındırma Platformlarına Dağıtım” dersinde ne öğreneceğim?

Vue uygulamalarını statik barındırıcılara ve platformlara dağıtın. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“Barındırma Platformlarına Dağıtım” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Derleme Sürecini İyileştirme
  2. Barındırma Platformlarına Dağıtım
  3. İzleme ve Bakım
← Vue Academy Sayfasına Dön