Liman MYS, sunucu yönetimini kolaylaştıran güçlü bir platform olmasının yanı sıra, esnek eklenti altyapısıyla da öne çıkar. Bu rehberde, "Liman Extension Template" adını vereceğimiz hazır bir eklenti şablonunu kullanarak, kod değişikliklerimizi anında Liman arayüzünde görebileceğimiz profesyonel bir geliştirme ortamını nasıl kuracağımızı adım adım inceleyeceğiz.
Bölüm 1: Eklenti Şablonunu Liman'a Yükleme
Geliştirme ortamını kurmadan önce, üzerinde çalışacağımız eklentinin Liman tarafından tanınması gerekir. Bu nedenle, hazır eklenti şablonumuzu sisteme yüklüyoruz.
- Liman MYS web arayüzünde oturum açın ve sağ üst köşedeki Ayarlar simgesine tıklayın.
- Açılan menüden Sistem Ayarları seçeneğine ve ardından sol menüden Eklentiler sekmesine gidin.
- Yükle butonuna tıklayarak bilgisayarınızdaki .zip uzantılı eklenti şablonu dosyasını seçin ve yüklemeyi tamamlayın.
- Yükleme başarılı olduğunda, eklentiniz listede görünecektir.
Bu adımdan sonra artık eklentimizi arayüzden silip yüklemeyeceğiz. Tüm süreci sunucu tarafında yöneteceğiz.Bu ksımla ılgili detaylı bilgi aşşağıdaki linkten erişebilirsiniz.
Bölüm 2: Sunucuya Bağlantı ve Yetkilendirme Hazırlıkları
Bu bölümde, geliştirme yapacağımız sunucuya SSH üzerinden bağlanacak ve VS Code ile sorunsuz bir bağlantı kurmak için gerekli yapılandırmaları yapacağız.
- Adım 1: Sunucuya İlk Bağlantı
Öncelikle sunucunuza standart kullanıcınız ile (genellikle ubuntu, centos, debian vb.) bağlanın.
ssh kullanici_adiniz@<SUNUCU_IP_ADRESINIZ>
<SUNUCU_IP_ADRESINIZ>kısmını Liman'ın kurulu olduğu sunucunun IP adresi ile değiştirin.
Bu aşamada sizden sunucu şifreniz istenecektir.
- Adım 2: liman Kullanıcısını Geliştirmeye Hazırlama
Liman, sistem üzerinde kendi işlemlerini yönetmek için genellikle liman adında bir kullanıcı oluşturur. Geliştirme yaparken yetki ve sahiplik sorunları yaşamamak adına işlemlerimizi bu kullanıcı üzerinden yürütmek en sağlıklı yöntemdir.
liman Kullanıcısına Şifre Atama:
liman kullanıcısının varsayılan olarak bir şifresi olmayabilir. SSH bağlantısı için bir şifre belirlememiz gerekiyor.
sudo passwd liman
Bu komutu çalıştırdıktan sonra liman kullanıcısı için yeni bir şifre belirlemeniz istenir.Şifre belirledikten sonra terminale aşağıdaki formatta bağlantı komutunu girin:
ssh liman@<SUNUCU_IP_ADRESINIZ>
Bu komut,liman adlı kullanıcıya bağlanmamızı sağlar.
liman Kullanıcısının Kabuğunu (Shell) Değiştirme:
Güvenlik nedeniyle liman kullanıcısının kabuğu interaktif olmayan bir kabuk (/usr/bin/login gibi) olabilir. Etkileşimli bir terminal deneyimi için bu kabuğu bash olarak değiştirmeliyiz.
sudo usermod --shell /bin/bash liman
Bu komut, liman kullanıcısının oturum açtığında standart bir Bash terminali kullanmasını sağlar.
- Adım 3: Şifresiz ve Güvenli Bağlantı için SSH Anahtarı Oluşturma
Her seferinde şifre girmek yerine, SSH anahtar tabanlı kimlik doğrulama kullanarak süreci otomatikleştirebiliriz.
SSH Anahtar Çifti Oluşturma (Lokal Makinenizde):
Eğer daha önce oluşturmadıysanız, kendi bilgisayarınızın terminalinde aşağıdaki komutu çalıştırın:
ssh-keygen
"Enter file in which to save the key...": Bu soruya Enter'a basarak varsayılan konumu onaylayın.
"Enter passphrase...": Daha fazla güvenlik için bir parola belirleyebilirsiniz, ancak geliştirme kolaylığı için bu adımı Enter'a basarak boş geçebilirsiniz.
Public Anahtarı Sunucuya Kopyalama:
Oluşturduğunuz public anahtarı (.pub uzantılı olan) Liman sunucusundaki liman kullanıcısının yetkilendirilmiş anahtarlar listesine ekleyeceğiz.
ssh-copy-id liman@<SUNUCU_IP_ADRESINIZ>
Bu komut sizden son bir kez liman kullanıcısının şifresini isteyecektir. Şifreyi girdikten sonra, artık ssh liman@<SUNUCU_IP_ADRESINIZ> komutuyla şifresiz bir şekilde sunucuya bağlanabilirsiniz.
Bölüm 3: Visual Studio Code ile Geliştirme Ortamını Yapılandırma
Artık sunucu tarafı hazır olduğuna göre, kodlarımızı doğrudan sunucu üzerinde düzenlemek için VS Code'u yapılandıracağız. Her seferinde IP adresi ve kullanıcı adı yazmak yerine, SSH yapılandırma dosyasına kalıcı bir kayıt ekleyerek bağlantı sürecini otomatikleştireceğiz.
- Adım 1:"Remote - SSH" Eklentisini Yükleyin
VS Code'u açın, sol taraftaki Eklentiler (Extensions) sekmesine gidin, arama çubuğuna Remote - SSH yazın ve Microsoft tarafından geliştirilen eklentiyi yükleyin.
- Adım 2: Kalıcı Bir SSH Bağlantısı Oluşturma (Config Dosyası)
Bu adım, sunucu bağlantı bilgilerimizi config adında özel bir dosyaya kaydederek, bu bağlantıya kolayca hatırlanabilir bir isim vermemizi sağlar.
SSH Yapılandırma Dosyasını Açın:
Kendi lokal bilgisayarınızda, bir terminal veya komut istemi açın. SSH yapılandırma dosyasını bir metin editörü ile açın. Bu dosya genellikle aşağıdaki konumlarda bulunur:
Linux veya macOS: ~/.ssh/config
Windows: C:\Users\KULLANICI_ADINIZ\.ssh\config
Not:
Eğer .ssh klasörü veya config dosyası mevcut değilse, kendiniz oluşturabilirsiniz.
Kendi lokal bilgisayarınızda bir terminal açın. nano gibi kullanımı kolay bir terminal editörü ile yapılandırma dosyasını doğrudan açmak için aşağıdaki komutu çalıştırın:
nano ~/.ssh/config
Not: nano editöründe dosyayı kaydetmek için Ctrl+O (Write Out) ve ardından Enter'a, çıkmak için ise Ctrl+X tuş kombinasyonunu kullanabilirsiniz.
Eğer Windows kullanıyorsanız ve terminal kullanmak istemiyorsanız, dosyayı C:\Users\KULLANICI_ADINIZ.ssh\config konumunda bulup Not Defteri (Notepad) gibi bir metin editörü ile de açabilirsiniz.
(Eğer .ssh klasörü veya config dosyası mevcut değilse, komut dosyayı sizin için oluşturacaktır.)
Yeni host bilgilerini eklemek için aşşağıdaki işlemleri gerçekleştirin.
Açtığınız config dosyasına aşağıdaki bloğu ekleyin ve kendi bilgilerinizle doldurun:
# Liman MYS Geliştirme Sunucusu
Host liman-dev-sunucusu
HostName <SUNUCU_IP_ADRESINIZ>
User liman
IdentityFile ~/.ssh/id_rsa
Host: Bağlantınızın kısa adıdır. VS Code'da görünecek ve kullanacağınız isim budur.
HostName: Liman sunucusunun gerçek IP adresi.
User: Bağlanacağınız kullanıcı adı, yani liman.
IdentityFile: Şifresiz bağlantı için oluşturduğunuz SSH özel anahtarınızın yolu (~/.ssh/id_rsa genellikle varsayılandır).
Dosyayı kaydedip kapatın.
- Adım 3: VS Code ile Yapılandırılmış Host'a Bağlanma
Ctrl+Shift+P (veya F1) tuş kombinasyonu ile komut paletini açın.
Remote-SSH: Connect to Host... yazıp seçin.
Karşınıza çıkan listede, config dosyasına eklediğiniz Host isminin (liman-dev-sunucusu gibi) doğrudan göründüğünü göreceksiniz.Bu isme tıklayarak bağlantıyı başlatın.
VS Code yeni bir pencere açacaktır. Sol alt köşede "SSH: liman-dev-sunucusu" yazdığını gördüğünüzde, bağlantı başarıyla kurulmuş demektir.
- Adım 4:Eklenti Klasörünü Açma
VS Code'da File > Open Folder... (veya Dosya > Klasör Aç...) seçeneğine tıklayın.
Açılan diyalog kutusuna eklentilerin bulunduğu yolu girin: /liman/extensions/
OK butonuna tıklayın.
Artık sol taraftaki dosya gezgininde, sunucudaki tüm eklenti dosyalarınızı görebilirsiniz. Yaptığınız her değişiklik anında sunucuya kaydedilecektir.
Bölüm 4: Eklentiyi Derleme ve Geliştirme Modunu Aktif Etme
Son aşamada, kodumuzun canlı olarak derlenmesini ve Liman arayüzünde görüntülenmesini sağlayacağız.
- Adım 1 :Node.js ve pnpm Kurulumu (Gerekliyse)
Eklenti bağımlılıklarını yönetmek ve derleme işlemlerini yapmak için pnpm paket yöneticisine ihtiyacımız var. pnpm'in çalışabilmesi için de öncelikle sunucunuzda Node.js'in kurulu olması gerekmektedir.
Node.js Kurulumu:
Eğer sunucunuzda Node.js kurulu değilse veya çok eski bir sürüm varsa, aşağıdaki komutlarla güncel bir LTS (Uzun Süreli Destek) sürümünü kurabilirsiniz.
# Terminalde aşağıdaki komutları sırasıyla çalıştırın:
# Node.js 22.x LTS sürümü için kurulum betiğini indirip çalıştırın
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
# Node.js ve beraberinde gelen npm'i yükleyin
sudo apt-get install -y nodejs
# Kurulumun başarılı olduğunu kontrol edin
node -v
npm -v
Bu komutlar sonunda v22.x.x ve v10.x.x gibi sürüm numaraları görmelisiniz.
PNPM Kurulumu:
Node.js ve npm'i kurduktan sonra, npm'i kullanarak pnpm'i global olarak (sistemin her yerinden erişilebilir şekilde) kurabiliriz.
# npm kullanarak pnpm'i global olarak yükleyin
sudo npm install -g pnpm
# pnpm kurulumunu kontrol edin
pnpm -v
Bu komut sonunda pnpm'in sürüm numarasını (9.x.x gibi) görüyorsanız, kurulum tamamlanmıştır.
- Adım 2: Bağımlılıkları Yükleme
Artık pnpm kurulu olduğuna göre, eklentimizin ihtiyaç duyduğu kütüphaneleri ve paketleri yükleyebiliriz.
VS Code içerisinde Terminal > New Terminal (veya Terminal > Yeni Terminal) menüsünden yeni bir terminal açın. Bu terminalin doğrudan sunucunuzda, açtığınız klasör yolunda (/liman/extensions/) açıldığına dikkat edin.
Üzerinde çalıştığınız eklentinin klasörüne girin (örneğin: cd eklenti-adiniz).
Proje bağımlılıklarını yüklemek için aşağıdaki komutu çalıştırın:
pnpm install
Bu komut, package.json dosyasını okur ve projenin ihtiyaç duyduğu tüm kütüphaneleri node_modules klasörü altına indirir.
Geliştirme Sunucusunu Başlatma:
Aynı terminalde, projenin canlı olarak derlenmesini ve dosya değişikliklerini izlemesini sağlayacak komutu çalıştırın:
pnpm run dev
Bu komut, genellikle arkaplanda bir geliştirme sunucusu başlatır ve dosyalarınızda yaptığınız her değişikliği otomatik olarak algılayıp yeniden derler.
- Adım 3 :Liman Arayüzünde Geliştirme Modunu Aktif Etme
Öncelikle Liman arayüzünden, geliştirdiğiniz eklentiyi bir sunucu gerekir. Bu işlem hakkında detaylı bilgi için resmi Liman dokümantasyonunu inceleyebilirsiniz: Liman Sunucu Yönetimi
Eklentiyi sunucuya atadıktan sonra, ilgili sunucu üzerinden eklentinizi açın.
Tarayıcınızın adres çubuğundaki URL'nin sonuna /development ekleyin ve Enter'a basın.
Bu işlemi yaptığınızda, Liman artık eklentinin derlenmiş statik dosyalarını değil, pnpm run dev komutunun çalıştırdığı geliştirme sunucusundan gelen canlı verileri kullanacaktır.
Ek Bölüm: Geliştirme Sürecinde Sık Karşılaşılan Sorunlar ve Çözümleri
Aşağıda, ana rehberi takip ederken veya geliştirme yaparken karşılaşabileceğiniz en yaygın dört sorun ve bu sorunları çözmek için izlemeniz gereken adımlar detaylandırılmıştır.
1. Eklenti Panelde Görünmüyor veya "Undefined" Olarak Gözüküyor
Eklentiyi Liman'a yükledikten sonra, panelde hiç görünmemesi veya isminin "Undefined" olarak listelenmesi.
Bu sorunun neredeyse her zaman tek bir nedeni vardır: Eklentinin .zip dosyasının hatalı bir klasör yapısıyla sıkıştırılması. Liman MYS, eklentiyi tanımak için hayati bir dosya olan extension.json'ın doğrudan zip dosyasının kök dizininde olmasını bekler.
- Çözüm Yolları:
Doğru Zip Yapısı: Eklenti dosyalarınızın bulunduğu klasörün içine girin, tüm dosyaları (extension.json, views, public vb.) seçin ve bunları doğrudan zipleyin.
my-extension.zip
-> extension.json
-> views/
-> public/
-> ...diğer dosyalar
Yanlış Zip Yapısı (Kaçınılması Gereken): Eklenti dosyalarını içeren ana klasöre sağ tıklayıp onu zip'lemek. Bu durumda extension.json kök dizinde olmaz.
my-extension.zip
-> my-extension/ (Hatalı alt klasör)
-> extension.json
-> views/
-> ...
2. Port Çakışması (EADDRINUSE) Hatası
pnpm run dev komutunu çalıştırdığınızda, terminalde "EADDRINUSE" (Error: address already in use) hatası almanız.
Temel Nedeni Geliştirme sunucusunun kullanmaya çalıştığı portun (genellikle 5173) başka bir uygulama veya arka planda unutulmuş eski bir geliştirme süreci tarafından zaten kullanılıyor olması.
- Çözüm Yolları:
Yöntem A: Alternatif Bir Port Kullanmak (En Hızlı Çözüm)
pnpm run dev komutunu, boş olduğundan emin olduğunuz farklı bir port numarası ile çalıştırın:
pnpm run dev -- --port 5174
Yöntem B: Portu Kullanan İşlemi Sonlandırmak
Mevcut portu meşgul eden işlemi bulup sonlandırın:
# Örnek olarak 5173 portunu kullanan işlemi bulalım
sudo lsof -i :5173
# Komut çıktısındaki PID (Process ID) numarasını kullanarak işlemi sonlandıralım
# Örneğin PID 12345 ise:
sudo kill -9 12345
Bu işlemden sonra pnpm run dev komutunu tekrar çalıştırabilirsiniz.
3. 404 - Not Found (/development) Hatası
Liman arayüzünde eklentiyi açıp URL sonuna /development eklediğinizde "404 - Not Found" hatası almanız.
Temel Nedeni Tarayıcınız, geliştirme sunucusuyla iletişim kuramıyor. Bunun birkaç sebebi olabilir.
- Çözüm Yolları (Sırasıyla Kontrol Edin):
Geliştirme Sunucusu Çalışıyor mu?
VS Code'daki terminalinize geri dönün. pnpm run dev komutunun hala çalıştığından ve bir hata vermediğinden emin olun. Eğer durmuşsa, yeniden başlatın.
Doğru Portu mu Kullanıyorsunuz?
pnpm run dev komutunun çıktısını kontrol edin. Geliştirme sunucusu hangi portta (5173, 5174 vb.) çalıştığını size söyleyecektir. Liman'ın bu porta erişebildiğinden emin olun.
Güvenlik Duvarı (Firewall) Engelliyor mu?
Sunucunuzun güvenlik duvarı, geliştirme portuna dışarıdan erişimi engelliyor olabilir. Ubuntu'da ufw kullanılıyorsa, ilgili porta izin verin:
# Vite'ın varsayılan portu 5173 için izin verelim
sudo ufw allow 5173
sudo ufw reload
Top comments (0)