ServBay ile Nuxt.js Projesi Oluşturma ve Çalıştırma
Nuxt.js Nedir?
Nuxt.js, popüler Vue.js framework'ünün üzerine inşa edilmiş açık kaynaklı bir framework'tür ve modern, yüksek performanslı web uygulamaları geliştirmek için özel olarak tasarlanmıştır. Nuxt.js, pek çok karmaşık yapılandırmayı geliştiricinin odağından uzaklaştırarak, iş mantığına yoğunlaşmasını sağlar. Özellikle sunucu tarafı render (SSR) uygulamaları geliştirmede oldukça başarılıdır; ayrıca güçlü bir statik site oluşturma (SSG) kabiliyetine sahiptir. Bu sayede, içerik açısından zengin, SEO dostu web siteleri ve uygulamalar geliştirmek için ideal bir tercihtir.
Nuxt.js'nin Ana Özellikleri ve Avantajları
- Sunucu Tarafı Render (SSR): Vue sayfalarını, sunucu üzerinde önceden render ederek; ilk yüklenme hızını artırır, kullanıcı deneyimini iyileştirir ve içeriğin arama motorları tarafından daha iyi taranmasını sağlayarak SEO'ya katkıda bulunur.
- Statik Site Oluşturma (SSG): Proje derlenirken tamamen statik HTML dosyaları üretir. Bu yöntem son derece yüksek performans sunar, kolayca dağıtılabilir ve sunucu çalışma zamanı maliyeti gerektirmez; sık sık değişmeyen içerikler veya blog/dokümantasyon siteleri için idealdir.
- Otomatik Kod Parçalama: Nuxt.js, rotalara göre JavaScript kodunu otomatik olarak böler; kullanıcı sayfayı ziyaret ettiğinde yalnızca gerekli kodu yükler ve böylelikle uygulama performansı beden belirgin şekilde yükselir.
- Dosya Sistemi Bazlı Yönlendirme:
pages
klasöründe.vue
dosyaları oluşturarak otomatik olarak yönlendirme yapılandırmasını gerçekleştirir ve bu sayede yönetim oldukça kolaylaşır. - Modüler Yapı: Kapsamlı bir modül ekosistemine sahiptir; çeşitli fonksiyon ve üçüncü parti hizmetler (örneğin Axios, PWA desteği, içerik yönetim sistemi entegrasyonları vb.) kolayca entegre edilebilir.
- Yapılandırma Yerine Konvansiyon: Belirli bir klasör yapısı ve adlandırma kurallarına göre ilerleyerek, karmaşık ayarlarla vakit kaybetmeyi önler.
- Geliştirici Deneyimi İyileştirmeleri: Sıcak modül yenilemeleri (HMR), hata raporlamaları gibi özelliklerle geliştirme süreçlerini hızlandırır.
Bu avantajlar sayesinde, Nuxt.js ile karmaşık, yüksek performanslı ve SEO dostu web uygulamaları daha verimli ve kolay bir şekilde geliştirilebilir.
ServBay Üzerinde Nuxt.js Projesi Kurmak ve Çalıştırmak
Bu rehberde, ServBay'in sunduğu güçlü yerel geliştirme ortamı — özellikle Node.js paketlerinin ve web sitesi yönetim özelliklerinin nasıl kullanılacağını — bir Nuxt.js projesi oluşturmak, ayarlamak ve çalıştırmak için adım adım anlatıyoruz. ServBay üzerinde geliştirme modunu (ters proxy kullanarak) ve üretim modunu (statik dosya servisi ile) ayrı ayrı ele alıyoruz.
Gereksinimler
Başlamadan önce, aşağıdaki koşulları sağladığınızdan emin olun:
- ServBay uygulamasının başarılı bir şekilde kurulu olması.
- ServBay'de Node.js paketinin kurulu ve etkin olması. Bunu, ServBay kontrol panelindeki ‘Paketler’ sekmesinden kontrol edebilir ve kurabilirsiniz.
- Node.js, npm (veya Yarn/pnpm) ile temel terminal komutları hakkında bilgi sahibi olmanız.
- (Tavsiye edilir) Bir kod editörü yüklü olması, örneğin VS Code.
Nuxt.js Projesi Oluşturma
create-nuxt-app
komut satırı aracı ile hızlıca bir Nuxt.js projesi başlatacağız.
Terminali Açıp ServBay Web Sitesi Kök Dizini’ne Girin
ServBay'in varsayılan web sitesi kök dizini, yerel geliştirme projelerinizi saklamak için idealdir. Terminal uygulamanızı açın ve aşağıdaki komutu çalıştırarak bu klasöre gidin:
macOS:
bashcd /Applications/ServBay/www
1Windows:
bashcd C:\ServBay\www
1Yeni Nuxt.js Projesi Başlatma
npx create-nuxt-app
komutunu kullanarak,servbay-nuxt-app
ismiyle yeni bir proje başlatıyoruz.npx
, npm 5.2+ ile gelen ve paketleri global kurmaya gerek olmadan çalıştırmaya olanak veren bir araçtır.bashnpx create-nuxt-app servbay-nuxt-app
1Komutu uyguladıktan sonra terminaldeki yönergeleri izleyerek proje ayarlarını yapabilirsiniz. İşte örnek bir kurulum süreci:
bash? Project name: servbay-nuxt-app ? Programming language: JavaScript ? Package manager: Npm # Paket yöneticinizi seçin, Npm veya Yarn önerilir ? UI framework: None # İhtiyaca göre bir UI framework seçin ? Nuxt.js modules: Axios # Gerekirse Nuxt.js modüllerinden seçim yapın ? Linting tools: ESLint # Kod kontrolü için bir linting aracı seçin ? Testing framework: None # Gerekirse bir test framework'u seçin ? Rendering mode: Universal (SSR / SSG) # Render modunu belirleyin, Universal SSR & SSG sağlar ? Deployment target: Server (Node.js hosting) # Sunucu tipi, Server yerel geliştirme ve Node.js deploy için uygundur ? Development tools: jsconfig.json (Recommended for VS Code) # Geliştirme aracı ayarlarını seçin
1
2
3
4
5
6
7
8
9
10Proje Bağımlılıklarını Kurun
Yeni oluşturduğunuz proje klasörüne girin ve seçtiğiniz paket yöneticisiyle gerekli bağımlılıkları yükleyin:
bashcd servbay-nuxt-app npm install # Veya Yarn kullanın: yarn install # Veya pnpm: pnpm install
1
2
3
4Yükleme işleminin bitmesini bekleyin.
Proje Ana Sayfasını Düzenleme
Test için ana sayfa kodunu basit bir metin gösterecek şekilde değiştirelim.
pages/index.vue
Dosyasını AçınKod editörünüzle proje klasöründeki
pages/index.vue
dosyasını açın.Dosya İçeriğini Değiştirin
Dosya içeriğini, ekranda "Hello ServBay!" metni gözükecek şekilde aşağıdaki kodla değiştirin:
html<template> <div> <h1>Hello ServBay!</h1> </div> </template> <script> export default { name: 'IndexPage' } </script> <style scoped> div { text-align: center; margin-top: 50px; font-family: sans-serif; } h1 { color: #333; } </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22Burada style etiketine
scoped
özelliği ekledik; bu şekilde stil yalnızca mevcut bileşene uygulanır ve çıktının görünümünü biraz daha güzelleştirmiş olduk.
ServBay'de Geliştirme Modunu Çalıştırmak
Nuxt.js geliştirme sunucusu genellikle belirli bir yerel portta çalışır. ServBay'in özel alan adı, SSL sertifikası ve merkezi 80/443 portları üzerinden erişmek için ServBay'in web sitesi ayarlarında ters proxy kullanacağız.
Nuxt.js Geliştirme Sunucusunu Başlatma
Proje kökündeyken, geliştirme sunucusunu başlatmak için şu komutu çalıştırın. Port olarak
8585
seçiyoruz; dilediğiniz başka bir boş port seçebilirsiniz.macOS:
bashcd /Applications/ServBay/www/servbay-nuxt-app npm run dev -- --port 8585 # Veya Yarn kullanın: yarn dev --port 8585 # Veya pnpm: pnpm run dev --port 8585
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-nuxt-app npm run dev -- --port 8585 # Veya Yarn kullanın: yarn dev --port 8585 # Veya pnpm: pnpm run dev --port 8585
1
2
3
4Sunucu başladığında, genellikle
http://localhost:8585
adresinde çalışır. Bu terminal penceresini açık bırakın; sunucu çalışmaya devam etsin.ServBay Web Sitesini Ayarlayın (Ters Proxy)
ServBay kontrol panelini açın, ‘Web Sitesi’ sekmesine geçin. Sol alt köşedeki
+
butonuna tıklayarak yeni bir site ekleyin:- İsim: Tanınabilir bir ad girin, ör.
Nuxt.js Dev Site (Proxy)
. - Alan adı: Tarayıcıda erişmek istediğiniz özel alan adını girin, örn.
nuxt-dev.servbay.demo
..servbay.demo
sonekini kullanmak ServBay markası için iyi bir tercihtir. - Web Site Türü:
Ters Proxy
seçin. - IP Adresi:
127.0.0.1
(Yerel loopback adresi). - Port: Nuxt.js sunucusunu başlatırken kullandığınız port, burada
8585
.
Ayarları tamamladıktan sonra “Ekle” veya “Kaydet” düğmesine tıklayın. ServBay otomatik konfigürasyon günceller ve etkinleştirir.
ServBay'de Node.js geliştirme sitesi ekleme (genellikle ters proxy ile) ile ilgili daha ayrıntılı adımlar için bkz: Node.js Geliştirme Web Sitesi Ekleme.
- İsim: Tanınabilir bir ad girin, ör.
Geliştirme Modu Sitesine Erişin
Web tarayıcınızı açın, ServBay'de kurduğunuz alan adına gidin, ör.
https://nuxt-dev.servbay.demo
.ServBay'in ters proxy özelliğiyle, Nuxt.js geliştirme sunucunuza doğrudan ServBay tarafından yönetilen alan adı ve HTTPS portu üzerinden ulaşabilirsiniz. ServBay, otomatik olarak SSL sertifikası (ServBay User CA tarafından imzalanmış) üretip yapılandırır; sisteminizin bu CA'ya güvendiğinden emin olun. Böylece geliştirme ortamınızda da HTTPS kullanabilirsiniz — bu, prodüksiyonu simüle etmek, Service Worker test etmek veya güvenli ortam gerektiren işlevleri denemek için oldukça değerlidir.
Üretim Sürümünü Oluşturmak ve Çalıştırmak
Nuxt.js projeniz geliştirme aşaması tamamlandığında ve deploy olmaya hazırsa (veya üretim ortamını yerel olarak test etmek istiyorsanız), projeyi derleyip üretim sürümünü oluşturmalısınız. Universal mod ve statik site için genellikle nuxt generate
(ya da npm run export
script ile) komutu kullanılır.
Üretim Sürümü Derleyip Statik Dosyaları Oluşturun
Proje kökünde şu komutları çalıştırın.
npm run build
kodunuzu derler,npm run export
ise rotalara uygun statik HTML dosyalarını çıkış dizinine (dist
) yazar.macOS:
bashcd /Applications/ServBay/www/servbay-nuxt-app npm run build npm run export # Veya Yarn: yarn build && yarn export # Veya pnpm: pnpm build && pnpm run export
1
2
3
4
5Windows:
bashcd C:\ServBay\www\servbay-nuxt-app npm run build npm run export # Veya Yarn: yarn build && yarn export # Veya pnpm: pnpm build && pnpm run export
1
2
3
4
5Derleme tamamlandığında, proje klasörünüzde tüm statik dosyaları içeren bir
dist
klasörü göreceksiniz.ServBay Web Sitesini Ayarlayın (Statik Dosya)
ServBay kontrol panelinde, ‘Web Sitesi’ sekmesine gidin ve sol alttaki
+
butonuna tıklayarak yeni bir site ekleyin:- İsim: Kolayca ayırt edebileceğiniz bir ad girin, ör.
Nuxt.js Prod Site (Static)
. - Alan adı: Üretim için erişmek istediğiniz özel bir alan adı girin, örn.
nuxt-prod.servbay.demo
. - Web Site Türü:
Statik (Static)
seçin. - Web Site Kök Dizini: Nuxt.js tarafından üretilen statik dosyaların bulunduğu dizin yolunu girin:
- macOS:
/Applications/ServBay/www/servbay-nuxt-app/dist
- Windows:
C:\ServBay\www\servbay-nuxt-app\dist
- macOS:
Ayarları tamamladıktan sonra “Ekle” veya “Kaydet” butonuna tıklayın. ServBay otomatik olarak konfigürasyonu güncelleyip etkinleştirir.
- İsim: Kolayca ayırt edebileceğiniz bir ad girin, ör.
Üretim Sitesine Ulaşın
Web tarayıcınızı açın, üretim sürümü için oluşturduğunuz alan adına gidin, örn.
https://nuxt-prod.servbay.demo
.ServBay’in yüksek performanslı web sunucusu (Caddy veya Nginx; ayarınıza göre) doğrudan
dist
klasöründeki statik dosyaları sunacaktır. Statik içeriği servis etmek için en hızlı ve en optimize edilmiş yöntem budur. Ayrıca, ServBay sayesinde ücretsiz SSL sertifikası ve özel alan adı avantajlarından da faydalanırsınız.
Sonuç
ServBay ile, Nuxt.js projelerinizin yerel geliştirme ve önizleme sürecini kolayca yönetebilirsiniz. Node.js paketleriyle geliştirme sunucusunu başlatıp, ServBay’in web sitesi fonksiyonu ile ters proxy kurarak özel alan adı ve HTTPS ortamında geliştirme ve debug işlemleri gerçekleştirebilirsiniz. Geliştirme tamamlandıktan sonra, projeyi derleyip statik dosyaları oluşturun ve ServBay’in statik web sitesi türüyle yüksek performanslı yerel önizleme yapın. Bu iş akışı, ServBay’in sunduğu kolaylık ve güçlü özelliklerle ön yüz projelerinin yerel geliştirme ve test süreçlerini oldukça rahatlatır. Bu rehberin, Nuxt.js geliştirmede ServBay’i daha verimli kullanmanıza yardımcı olmasını dileriz!