MEVN & Nuxt — Ben yanlışlıkla Dev-Ops Oldum!

Bu yazıda özet geçmek gerekirse; MongoDB, Express, Vue, NodeJS, Nuxt ve Vuetify ile yapılmış bir projenin hikayesi yer almaktadır. Fikir vereceğini tahmin ettiğim bu yazıyı bir çırpıda okuyacağınızı umuyorum. O halde haydi başlayalım.

Başlık ilginç değil mi? Evet, bence de bir hayli ilginç :) Geçtiğimiz sene, 2022 için kendime bir harita çizmiştim ve bu harita içerisinde en az birkaç tane MEVN Stack (MongoDB, Express, Vue ve NodeJS) projesi çıkartmayı planlıyordum. (Github’ta ReactJS ile hazırlanmış en az birkaç repomun olmasını da hala istiyorum) En azından kullanılabilecek bir site olmasını istediğim için de, biraz düşünme süreci olmuştu. Biraz konfor alanımdan da çıkarak, zorlanmak istediğimden dolayı belli teknolojilerde karar vermem gerekiyordu. Bir de deploy etmeden birkaç NUXT ve Node.js projesine girişmiştim ve bu sefer biraz daha farklılaştırarak bu projeyi hayata alayım istedim çünkü günün sonunda bu siteleri yayına alacaktım, local’de kalmayacaktı.

MongoDB, Express, Vue, NodeJS, Nuxt.JS, Vuetify…

Gelelim yazının çıkış noktasına… Yaklaşık 2 aydır projeyi deploy edemiyorum. Hafta içi akşamları çok fazla vakit ayıramadığım için de genelde hafta sonu sabahları 2–3'er saat bakabiliyordum. Bu da süreci iyice sürüncemeye sokmaya başlamıştı… Bilin bakalım az önce ne oldu? Express ile yazdığım API birkaç gün önce ayağa kalkmıştı, Nuxt.JS ile yazdığım front-end tarafı da an itibariyle yarım saattir ayakta, yazının sonunda hala sorunsuz bir şekilde çalışıyor :)

Keşke… Keşke, karşılaştığım sorunların hepsini bir yere not alsaydım ama bu kadar sürüncemede kalacağını tahmin etmediğim için buna gerek duymamıştım. Ve NuxtJS projelerinin deployu hakkında ciddi manada kaynak eksikliğinin olduğunu farkettim. Ancak, aklımda kaldığınca aktarmaya çalışacağım…

5 farklı yerden VPS aldım ama yok, bir türlü projeleri ayağa kaldıramıyorum. Bir Front-End projesini ayağa kaldırmak ne kadar zor olabilir ki? Build’ini alır sunucuya atarsın ve site çalışmaya başlar. Ya da firebase gibi bir servisten faydalanırsın, işiniz çok daha kolaylaşmış olur.

.Net Core, PHP, Classic ASP

Back-End bir proje için de durum çok farklı olmaz. .Net Core projeleri biraz IIS ile uğraştırsa da en fazla 1 günün sonunda o site canlıya çıkmış olur, o da en fazla. Hele ki Classic ASP veya PHP bir sitenin ilk yayını için ise en fazla 1 saat yeterli oluyor. Çoğu zaman bu kadar bile sürmüyordu.

Node.JS Hosting

Gelelim NodeJS ve NodeJs tabanlı server-side işlere… Yıllardır boş vakitlerimde NodeJS hosting nasıl olacak? Bir host satın alıp Node.JS siteyi ayağa kaldırabilir miyiz diye düşünüp mantığını anlamaya çalışıyordum, bazen de birkaç arkadaşla konuşuyorduk. Bir zorluk çıkacağından emindim ama bu kadar olacağını düşünmemiş olabilirim. Muhtemelen ilk denemede senin de böyle bir sorunun oldu ya da olacaktır :)

Nginx Nedir?

Nginx… Node.JS bildiğin üzere :3000 / :4000 gibi portlar üzerinden çalışıyor. E ama mustafacagri.com’a girince ip:3000'a nasıl yönlendireceğiz? Cevap Nginx imiş, bunu da yola çıkınca öğrenme fırsatım oldu.

Nginx; yüksek eş zamanlı çalışma kabiliyeti, yüksek performans ve düşük hafıza kullanımına odaklanılarak tasarlanmış bir Web sunucusudur. Aynı zamanda ters vekil sunucusu, yük dengeleyici ve HTTP ön belleği olarak da kullanılabilir.

Özetle Nginx için bir reverse proxy diyebiliriz. Dışarıdan gelen istekleri, gerekli portlara yönlendirmeye yarayan bir araç. Bu arada şöyle de ilginç bir şey gördüm ve sizinle de paylaşmak istiyorum.

Nginx, Rus yazılım mühendisi Igor Sysoev tarafından mail.ru için yapılmış mail sunucusudur. Fakat daha sonra geliştirilip tüm platformlarda kullanılabilen bir araç haline getirilmiş.

FTP Servisi

Daha önceden genellikle paneller (Cpanel, Please, Maestro vb…) ile domain yönetimini hallettiğim için bu sefer, sunucuya dosya aktarımını nasıl yapacağız diye düşündüm. Bulabildiğim kadarıyla vsftpd, Pure-FTPd gibi araçlar vardı. İkisini de kurdum ama sonradan fark ettim ki, aslında ftp ile sunucaya girmek pek de işime yaramayacak. Çünkü zaten kodlar Github’ta var, neden Github’tan direkt sunucuya dosyaları çekmiyorum ki? Bu kısmı da çok detaya girmeden atlayabilirim dedim ve konuyu şimdilik kapatıyorum :)

CWP — CentOS Web Panel

VPS’e Centos kurmuştuk, bir arkadaşım sağolsun, CWP diye bir şey var, gayet de Node.JS ile güzel çalışıyormuş dedi. 10 gün öncesinde kurduk ve gerçekten de güzel özellikleri olan, kullanımı da gayet basit olan bir panel. Express ile yazılmış olan API’ı panel üzerinden ayağa kaldırabilsem de henüz NUXT’ı panel üzerinden ayağa kaldıramadım. Muhtemelen bir ara onu da hallederim ancak şu ana kadar gayet temiz şekilde proje çalışıyor.

Linux / Centos 7

Hayatımda ilk defa bir Linux sunucuda, sıfırdan yüze çalışma fırsatım oldu. Yaklaşık 1.5 senedir macOS kullanan birisi için bu açıkçası güzel bir gelişme diyebilirim.

nano, pm2, kill 9 <pid> nedir bilmeyen ben için, güzel bir gelişme oldu diyebilirim. Ve onlarca pratik bilgiye de sahip oldum diyebilirim.

Nuxt’ı Neden Ayağa Kaldıramamışım?

Aslında Express ayağa kalkıyor ama Nuxt ile yazılan ön yüz tarafı bir türlü çalışmıyordu. Sebebini ise çok ilginç bir şekilde fark ettim.

Çalışan proje

Nuxt =>

Nedir bu localhost:terabase? Neden diğeri *.hbci sorularını sorarken server’ın hostunu belirlemediğimi fark ettim, alttaki host: ‘0.0.0.0’ kısmını ekledim.

export default {
server: {
port: 4000, // default: 3000
host: ‘0.0.0.0’
}

🎉 artık Frontend (Nuxt) ve Backend (Express — API) güzel bir şekilde çalışmaya başladı…

ecosystem.config.js ve nuxt-start paketi de işinize yarayacaktır, ufak bir not düşmek isterim. Ayrıca, NodeJs / ExpressJs projelerde root klasörde bir index.js / server.js olduğu için bunları startup file olarak belirleyebiliyorsunuz. Ancak, Nuxt’ta böyle bir dosya yok. O yüzden de startup file olarak

node_modules/nuxt-start/bin/nuxt-start.js

‘ı gösteriyorsunuz ve proje ayağa kalkıyor.

Sadece Nuxt mı kullandım? Peki ya Vue?

Sitenin görünen tarafını Nuxt ile yazdım çünkü SEO için Vue hala yetersiz kalıyor. Ne kadar SEO eklentileri de kursanız da, Google’ın hala Vue ile yazılmış siteleri tam anlamıyla indexlemediğini düşünüyorum. Sadece düşünmekle de kalmıyorum, 2 sene önce Vue ile yazdığım bir sitenin hala indexlenmediğini de gördüm. Hem de hiçbir sayfasını indexlememiş. En azından anasayfayı indexlemesini tahmin ederdim. (Not: indexletmek için hiçbir ekstra çaba sarfedilmedi)

Ayrıca, sitenin bir de admin paneline ihtiyaç olacağını tahmin ediyor olmalısınız. Bu kısmı ise Vue ile yazdım, çünkü bu kısmın Google tarafından herhangibir indexlenme ihtiyacı yok ve Nuxt ile bu taraf için çok fazla vakit kaybetmek istedim.

Motivasyonu Kaybetme, Sorulara Bildiklerlinden Başla!

Genellikle bir projeye başlarken developer’ların zor kısma odaklanıp heyecanlarını kaybettiğini görüyorum. Ancak, aslında en iyi bildiğiniz konularla işe başladığınızda hem heyecanınız kaçmıyor, hem de ilerlemeyi gördükçe size daha fazla motivasyon sağlıyor. Böylelikle, muhtemelen motivasyon kayıplarını henüz başındayken yok ettiğim için, ilerleme de hızlı oldu.

Nuxt vs Vue

Ancak, sonradan fark ettim ki server-side rendering’e gerek olmasa bile bundan sonra dashboard’ları ya da admin panelleri de Nuxt ile yazabileceğimi hissettim. Çünkü birçok ekstra avantajı var.

• Router’a ihtiyaç duymuyorsun, Nuxt senin için tüm routing işlerini hallediyor.
• Vuex tarafında modül yapısını senin yerine hallediyor. (Eğer benim gibi Vuex ve özellikle de Vuex modules yapısını kullanmaya bayılıyorsanız, kesinlikle Nuxt daha iyi) Ayrıca, API’dan init() tarzı bir action ile veri alacaksanız, nuxtServerInit() ile Nuxt sizin yerinize bunu kolayca hallediyor.

Aklıma ilk gelen avantajları bunlar oldu. Zaten, çok da bir farkı olmadığını göreceksiniz, eğer ki henüz Nuxt ile tanışmadıysanız.

Neden Vuetify?

Şirket içerisinde UI frame olarak Vuetify kullanıyoruz. Uzun yıllar Bootstrap kullanmış birisi olarak şunu söyleyebilirim ki bazı konularda alışkanlıkların dışına çıkmak da güzel oluyor. İnternette çeşitli karşılaştırmalar zaten var, o yüzden de karşılaştırma konusuna çok fazla girmeyeceğim ama kesinlikle Vuetify’a göz atmanızı tavsiye ederim. Kullanım kolaylığı sağlamasının yanında birçok component’i ile de işinizi kolaylaştırıyor.

Fakat, Vuetify’ın en büyük dezavantajına da değinmeden geçmek istemiyorum. Hala Vue 3 ile uyumlu değil ve sürekli olarak release date’i erteliyorlar. Bunun sonucunda da alttaki başlık ortaya çıkıyor.

Bir küçük not daha ekleyeyim… Vue 3 ile Vuetify’ı da beraber kullanmaya çok çalıştım ama bir türlü çalıştıramadım. Resmi olarak Vuetify Vue 3'ü desteklemese de bir umuttu benimkisi…

Neden Vue 2 + Composition API

Vuetify tercihimden dolayı malesef Vue 3 kullanamadım. Ancak, Composition API ile Vue 3'e benzer bir yapıyı kullanma şansım oluyor ve yarın bir gün Vuetify biz de artık Vue 3 ile uyumluyuz derse (peki ne zaman, ne zaman?!), geçiş süreci çok da zor olmayacak.

Vuex 4 değil, Vuex 3!

Yine Vuetify, yine bir sıkıntı… Evet, Vue 2 ile Vuex 4'ü ne yaptıysam kullanamadım. Öyle denedim yok, böyle denedim yok. Sadece 2–3 kişinin bunu denediğini fark ettim ve onlar da ne yazık ki bu konuda başarılı olamamışlar.

Eklemeden geçemeyeceğim bir konu daha… Vue 2.6 + Vuex 3 ❤. Vue 3 + Vuex 4'e göre bana daha sevimli geliyor, Syntax Sugar!

Bunun yanında Vue 2.6 + Composition API + Vuex 3 kullanıyorsanız ve benim gibi aktif olarak mapGetters, mapActions hayranıysanız, size minik bir sürprizim var. Maalesef, bu nimetlerden faydalanamıyorsunuz ve bir takım workaround’larla durumu kurtarabiliyorsunuz.

setup(props, { root }) {
const state = reactive({
data: computed(() => root.$store.getters[‘modelName/getName’]),
….
}

gibi… Ve de şöyle bir uyarı alacaksınız, ama el mahkum, ne yapalım…

‘root’ is deprecated.Vetur(6385)

Eeee, Özet?

Bu yazı diğer yazılara göre çok fazla bilgi içermiyor olabilir, ama kısa bir yol hikayesinden bahsetmiş oldum. Bir de, 1–2 sene öncesinde başlamaya niyetlendiğim ancak henüz bitiremediğim Node & Express & MongoDB Rest API Boilerplate repomu da güncelleme vaktinin geldiğini haber vermek istedim. Ayrıca, Nuxt & Node & Express & MongoDB Boilerplate reposunun da vaktinin geldiğini de kendime not düşmüş olayım. Yeni bir projeye başlarken güzel ve hızlı bir başlangıç sağlamaya kesinlikle faydalı olacaktır.

Bir sonraki görüşmemize kadar sağlıklı kalman dileğiyle…