Node.js kurulumu: Tarayıcı olmadan sunucuda düğme çalışmasını kontrol etme

Sunucuda JavaScript çalıştırmak için önce Node.js kurulumu gerekir. Nginx ve Apache yapılandırmalı bir WordPress sunucusuna Node.js 24.21.0 kurdum ve jsdom 30.1.3 ile bir web sayfasının düğme betiğini tarayıcı olmadan kontrol ettim.

Varsayılan depodaki nodejs 16.20.2 sürümünde; betik kontrolü için kullanacağım jsdom 30.1.3 ise Node.js 22.22.2 veya üstünü istiyor. Bu yüzden kurulumu dnf modül akışı 24 ile yaptım.

1️⃣ Sunucuya Node.js ve jsdom kurmanın amacı

Sunucuda düğme betiklerini kontrol etmek için iki şey gerekir: Node.js ve jsdom.

🔲 Node.js

JavaScript genellikle tarayıcıda çalışır, ancak Node.js kurulunca sunucu da JavaScript'i okuyup çalıştırabilir.

Node.js kurmak, yalnızca tarayıcıda bulunan JavaScript çalıştırma ortamını sunucuya da koymak demektir. Bu yüzden Node.js; web sunucusu oluşturmak, birçok dosyayı tek seferde işleyen komutlar yazmak ya da jsdom gibi paketleri yükleyip sayfaları kontrol etmek için kullanılır. Ghost da Node.js üzerinde çalışan bir CMS'tir.

🔲 jsdom

jsdom, Node.js'te kullanılan bir pakettir; HTML'i okuyup tarayıcıdaki gibi düğmelerine basılabilen bir belgeye dönüştürür. Tarayıcının sayfayı açarken oluşturduğu belge yapısını (DOM) ekran olmadan sunucunun içinde aynen kurar; böylece betikler gerçek bir tarayıcıdaymış gibi düğmeleri bulur ve metni değiştirir. Pencere açmadığı için sunucuda tek satırlık bir komutla çalıştırılabilir.

Yani bir kişinin tarayıcıyı açıp tek tek tıklayarak yaptığı kontrolü sunucu bir komutla üstlenir. Bu yüzden jsdom, düğme davranışını her düzeltmede otomatik test etmek, bir sayfadan yalnızca başlık ve bağlantı gibi içerikleri çekmek ya da yazı HTML'ini toplu olarak düzenlemek için de kullanılır.

Sayfayı PHP veya curl ile alırsanız yalnızca ilk gelen HTML'i görebilirsiniz. Düğmeye basıldıktan sonra değişen metin, ancak betik çalışınca görünür.

Tarayıcı dört adımdan geçer: sayfayı alma, sayfayı okuma, düğmeye basma ve ekranda gösterme. jsdom ekranda gösterme dışındaki üç adımı sunucuda yaptığı için düğmenin konumu ve boyutu tarayıcıda kontrol edilir.

2️⃣ Kurulumdan önce: Varsayılan depo ve modül akışları

[dnf install nodejs] komutunu çalıştırmadan önce hangi sürümün kurulacağını kontrol edin. AlmaLinux 9.8 varsayılan deposundaki nodejs 16.20.2'dir.

dnf list --available nodejs

Available Packages
nodejs.x86_64                    1:16.20.2-8.el9_4                     appstream

Modül deposunda 18, 20, 22 ve 24 olmak üzere dört akış var; kontrol tarihinde 22 akışı 22.23.2, 24 akışı 24.21.0 sürümündeydi.

dnf module list nodejs

nodejs 18     common [d], development, minimal, s2i Javascript runtime
nodejs 20     common [d], development, minimal, s2i Javascript runtime
nodejs 22     common [d], development, minimal, s2i Javascript runtime
nodejs 24     common [d], development, minimal, s2i Javascript runtime

npm kayıt defterine göre jsdom 30.1.3; 22 serisinde 22.22.2 ve üstünü, 24 serisinde 24.15.0 ve üstünü ya da 26 ve üstünü istiyor. 22 ve 24 akışlarının ikisi de bu koşulu karşılıyor.

3️⃣ Node.js kurulumu: dnf module

Bu kez 24 akışını kurdum; çalıştırmadan önce [--assumeno] seçeneğiyle kurulacak paket listesini kontrol ettim.

dnf module install nodejs:24 --assumeno

Listede yalnızca nodejs, npm, nodejs-libs, nodejs-docs ve nodejs-full-i18n olmak üzere beş paket vardı. Web sunucusu, PHP ve çekirdek paketleri yoktu. Kontrol ettikten sonra kurulumu [-y] seçeneğiyle yapın.

dnf module install -y nodejs:24

Dependencies resolved.
==============================================================================================
 Package            Architecture  Version                                    Repository  Size
==============================================================================================
Installing group/module packages:
 nodejs             x86_64  1:24.21.0-1.module_el9.8.0+321+1555b6a2           appstream   70 k
 npm                noarch  1:11.19.0-1.24.21.0.1.module_el9.8.0+321+1555b6a2 appstream  2.1 M
Installing dependencies:
 nodejs-libs        x86_64  1:24.21.0-1.module_el9.8.0+321+1555b6a2           appstream   24 M
Installing weak dependencies:
 nodejs-docs        noarch  1:24.21.0-1.module_el9.8.0+321+1555b6a2           appstream  5.3 M
 nodejs-full-i18n   x86_64  1:24.21.0-1.module_el9.8.0+321+1555b6a2           appstream  8.9 M
Installing module profiles:
 nodejs/common                                                                                
Enabling module streams:
 nodejs                     24                                                                

Transaction Summary
==============================================================================================
Install  5 Packages

Total download size: 40 M
Installed size: 185 M

[Installing weak dependencies], birlikte kurulması iyi olan paketleri, yani zayıf bağımlılıkları (weak dependencies) gösterir. İndirme boyutu 40M, kurulum boyutu 185M'dir.

node -v

v24.21.0

npm -v

11.19.0

cat /etc/dnf/modules.d/nodejs.module

[nodejs]
name=nodejs
stream=24
profiles=common
state=enabled

node 24.21.0, npm 11.19.0 sürümüyle kuruldu. Kurulumdan sonra değişen tek ayar dosyası [/etc/dnf/modules.d/nodejs.module] olup 24 akışı ile common profili etkin olarak kaydedilir.

4️⃣ jsdom kurulumu ve düğme betiği kontrolü

jsdom, npm ile bir çalışma klasörüne kurulur; çalışma klasörü web kökünün dışında oluşturulur.

mkdir ~/jsdom-test && cd ~/jsdom-test
npm init -y

[npm init -y] varsayılan değerlerle package.json oluşturur; ardından aynı klasöre jsdom kurulur.

npm install jsdom

added 36 packages, and audited 37 packages in 2s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm ls jsdom

jsdom-test@1.0.0 /root/jsdom-test
└── jsdom@30.1.3

jsdom 30.1.3 dahil 36 paket kuruldu ve bilinen güvenlik açığı sayısı 0. Çalışma klasöründeki node_modules boyutu 26M.

node -e 'const { JSDOM } = require(`jsdom`); console.log(new JSDOM(`<h1>Merhaba</h1>`).window.document.querySelector(`h1`).textContent)'

Merhaba

jsdom tek bir h1 etiketinden oluşan HTML'i belge olarak okuyup içindeki [Merhaba] metnini yazdırırsa çalışma kontrolü tamamdır.

Düğme betiği kontrolü, tıklamadan sonra metnin doğru değişip değişmediğini sunucuda doğrulamaktır. Örnek olarak çalışma klasöründe, [Kopyala] düğmesine basınca metni [Kopyalandı] olarak değişen bir HTML dosyası oluşturdum.

cat btn.html

<button id="copy">Kopyala</button>
<script>
document.getElementById('copy').addEventListener('click', function () {
  this.textContent = 'Kopyalandı';
});
</script>

Kontrol betiği HTML dosyasını jsdom ile okuyup betikleri çalıştırır ve düğmeye basmadan önceki ve sonraki metni yazdırır. Betik hataları [Hata:] ile başlayan satırlar olarak yazdırılır.

cat check.js

const fs = require('fs');
const { JSDOM, VirtualConsole } = require('jsdom');

const vc = new VirtualConsole();
vc.on('jsdomError', (e) => console.log('Hata:', e.message));

const dom = new JSDOM(fs.readFileSync(process.argv[2], 'utf8'), {
  runScripts: 'dangerously',
  virtualConsole: vc,
});
const btn = dom.window.document.querySelector('#copy');
console.log('Tıklamadan önce:', btn.textContent);
btn.click();
console.log('Tıkladıktan sonra:', btn.textContent);

node check.js btn.html

Tıklamadan önce: Kopyala
Tıkladıktan sonra: Kopyalandı

Tıkladıktan sonra metin [Kopyalandı] olarak değişir; böylece düğme betiğinin çalıştığını doğrulayabilirsiniz.

Betikteki tek bir yazım hatası sonucu değiştirir. getElementById içindeki büyük I harfini küçük l yaptığım bir dosyayla aynı kontrolü çalıştırdım.

sed 's/getElementById/getElementByld/' btn.html > btn-broken.html
node check.js btn-broken.html

Hata: Uncaught [TypeError: document.getElementByld is not a function]
Tıklamadan önce: Kopyala
Tıkladıktan sonra: Kopyala

İlk satırda hata yazdırılır ve betik durur; düğmeye bassanız da metin [Kopyala] olarak kalır.

Düğmeye CSS ile 120px genişlik ve 40px yükseklik verip ardından boyutunu yazdırdım.

cat size.js

const { JSDOM } = require('jsdom');
const dom = new JSDOM('<button id="copy" style="width:120px;height:40px">Kopyala</button>');
const btn = dom.window.document.querySelector('#copy');
console.log('yükseklik:', btn.offsetHeight, '/ genişlik:', btn.getBoundingClientRect().width);

node size.js

yükseklik: 0 / genişlik: 0

jsdom'da ekrana çizme adımı olmadığı için yükseklik ve genişlik 0 olarak yazdırılır.

🔢 SSS & önerilen içerikler

🧭 Paket yönetimi için önerilen içerikler 9 yazı · 2 kaynak

🗂️ Paket yönetimi

▸📂 Paket yönetimi komutları5

📄 yum komutu 📄 yum-config-manager komutu 📄 RPM ve YUM farkı 📄 apt · apt-get komutları 📄 snapd kurulumu

▸📂 Depodan kurulum4

📄 Node.js kurulumu 📄 CentOS 7 Nginx · PHP kurulumu 📄 phpMyAdmin kurulumu 📄 PHP-FPM kurulumu ve ayarları

▸🪐 Kaynaklar2

📡 DNF Module Command 📡 Node.js Previous Releases

Linux · Paketler

yum komutu | kullanım | seçenekler | yum-utils | paket ve depo yönetimi🔝

Red Hat tabanlı Linux dağıtımlarında kullanılan YUM komutu, paket yönetimi (kurma, güncelleme, kaldırma) için kullanılan komuttur.

Yazıyı oku →Şu anki yazı

Linux · Paketler

yum-config-manager komutu | YUM depo ayarları

yum komutu varsayılan kullanımda paketleri varsayılan depolardan (genellikle kararlı sürümler) kurar.

Yazıyı oku →Şu anki yazı

Linux · Paketler

Linux: RPM ve YUM farkı

RPM (Red Hat Package Manager) ve YUM (Yellowdog Updater, Modified), Linux'ta paket kuran kurulum programlarıdır.

Yazıyı oku →Şu anki yazı

Linux · Paketler

[Ubuntu] apt komutu | apt-get komutu kullanımı ve farkları

Red Hat tabanlı Linux sistemlerde paket yönetimi için dnf komutu, Debian tabanlılarda apt komutu kullanılır.

Yazıyı oku →Şu anki yazı

Linux · Paketler

Linux snapd | Rocky Linux'ta snapd kurulumu

Snapcraft veya Snap, Canonical'ın Ubuntu akıllı telefon işletim sistemi için yazılım dağıtım ve paketleme aracı olarak geliştirdiği bir paket yönetim sistemidir. snap adlı paketler ve snapd kullanan araçlar, üst akış yazılımlarının paketlenmesini kolaylaştırarak çeşitli Linux dağıtımlarında kullanılmalarını sağlar.

Yazıyı oku →Şu anki yazı

Linux · Paketler

Node.js kurulumu

Node.js kurulumu, sunucuda JavaScript çalıştırmanın ilk adımıdır.

Yazıyı oku →Şu anki yazı

Linux · Web sunucusu

CentOS 7 Nginx kurulumu | PHP & MariaDB kurulumu

VirtualBox'ta CentOS 7'ye Nginx kuralım.

Yazıyı oku →Şu anki yazı

Linux · Web sunucusu

phpMyAdmin kurulumu [Alma Linux 9.4]

Veritabanlarını tarayıcıdan yönetmenizi sağlayan web tabanlı bir MySQL/MariaDB veritabanı yönetim aracıdır.

Yazıyı oku →Şu anki yazı

Linux · Web sunucusu

PHP-FPM nedir | PHP-FPM kurulumu ve ayarları

PHP-FPM ile başlamadan önce CGI hakkında bilgi sahibi olmak gerekir.

Yazıyı oku →Şu anki yazı

Dış · DNF resmî belgeleri

DNF Command Reference: Module Command

DNF resmî belgelerindeki module komutu bölümü; list · info · install · enable gibi modül akışı komutlarını ve profilleri açıklar.

Yazıyı oku →Şu anki yazı

Dış · Node.js resmî sitesi

Node.js Previous Releases

Node.js resmî sitesindeki sürüm listesi; her sürümün LTS olup olmadığını ve destek süresini gösterir.

Yazıyı oku →Şu anki yazı

ℹ️ Satış ortaklığı bildirimi
Bu sitenin içeriklerinde satış ortaklığı bağlantıları bulunur. Bir ziyaretçi bu bağlantılar üzerinden ürün veya hizmet satın alırsa bu site satıcıdan komisyon alır. Bu süreçte alıcının ödediği tutar ^{(kampanya indirimlerinde tutar düşer↓)} artmaz. Yayımlanan fiyat, indirim ve stok bilgileri yazının yazıldığı zamana aittir ve gerçek durumdan farklı olabilir; bu yüzden satın almadan önce son bilgiyi satıcıdan kontrol etmenizi rica ederiz. Ürünler kendi ölçütlerimize göre seçilir ve değerlendirilir; komisyon alınıp alınmaması tanıtım sırasını veya değerlendirme içeriğini etkilemez.