Kurumsal web sitesi nasıl kurulur: kendi sitemizden notlar

Bir yazılım şirketinin sitesi, şirketin yazdığı ilk yazılımdır. Ziyaretçi onu açtığında kodu görmez ama sonucunu görür. Sayfa geç açılıyorsa, bir dilde Türkçe cümle kalmışsa, iletişim formu sessizce çalışmıyorsa, bunu şirketin işine yorar.

Bu yüzden siteyi bir broşür gibi değil, küçük bir ürün gibi kurduk. Aşağıda hangi kararı neden verdiğimizi ve nerede yanıldığımızı yazıyorum.

Statik üretim

Site Next.js ile yazıldı. İlk sürümde sayfalar her istekte sunucuda yeniden üretiliyordu. Bunun sebebi masum bir satırdı: kök düzen, dili bulmak için istek başlığını okuyordu. Next bunu gören her sayfayı dinamik sayıyor.

Sonuç, Cloudflare'in hiçbir sayfayı önbelleğe alamamasıydı. Her ziyaret Hetzner'deki sunucuya kadar gidiyordu. Yerelde ölçünce ilk bayt süresi birkaç milisaniyeydi, yani kod yavaş değildi. Sorun ölçekte çıkacaktı.

Çözüm, dili istekten değil adresten çıkarmak oldu. Her dilin kendi kök düzeni var ve dil, sayfanın hangi klasörde durduğundan belli. Bugün yaklaşık üç yüz sayfanın tamamı derleme sırasında bir kez üretiliyor.

Yedi dil ve tutarlılık

Site Türkçe, İngilizce, Fransızca, Portekizce, Almanca, İspanyolca ve Arapça yayında. Çevirinin kendisi işin kolay kısmı. Zor olan, bir metin değiştiğinde yedi yerde birden değişmesi.

İlk denetimlerde bulduğumuz hataların çoğu aynı kalıptan çıkıyordu. Dile göre metin seçen uzun bir koşul zinciri, bir dili unuttuğunda sessizce son dala düşüyordu ve son dal genellikle Türkçeydi. Fransızca sayfanın ortasında Türkçe bir cümle böyle çıkıyordu.

Bunu bir yardımcı fonksiyonla kapattık. Metin seçen her yer yedi dilin yedisini birden vermek zorunda. Bir dil eksikse kod derlenmiyor. Hata, yayına çıkmadan önce yakalanıyor.

Akademik unvan da benzer bir sorundu. Bir çeviride "Doç. Dr." unvanı profesöre dönüşmüştü. Unvan artık hiçbir dilde çevrilmiyor, Türkçe kayıttan alınıyor ve bir test bunu her push'ta denetliyor.

Testler

Ağır bir test çatısı kurmadık. Node'un kendi test modülüyle dokuz test yazdık. Her biri daha önce gerçekten yaşadığımız bir hatayı yakalıyor.

Unvanın her dilde aynı kalması, hiçbir metinde uzun tire bulunmaması, marka adının çevrilmemesi, her Türkçe yazının altı dilde karşılığının olması ve hukuki metinlerin çeviride özetlenmemesi bunların arasında. Son test kaba ama işe yarıyor: bir dildeki hukuki sayfa Türkçesinin yüzde altmışından kısaysa, büyük ihtimalle özetlenmiştir.

GitHub'a her push'ta tip denetimi, lint, bu testler ve üretim derlemesi çalışıyor. Biri kırılırsa sürüm yayına çıkmıyor.

Güvenlik

İçerik güvenliği politikası sıkı. Dış bir alan adından betik, yazı tipi ya da görsel yüklenemiyor. Yazı tipleri kendi sunucumuzdan geliyor, bu yüzden ziyaretçinin tarayıcısı sayfayı açarken üçüncü bir tarafa istek göndermiyor. Google Analytics yalnızca ziyaretçi onay verirse yükleniyor.

Ana sayfadaki çalışma protokolü ekranı, ziyaretçinin yazdığı metni bir dil modeline gönderiyor. Bu, sitenin en kolay kötüye kullanılabilecek yeri. Ücretli bir modeli bedava kullanmak isteyen biri ucu doğrudan çağırabilir. Bunu birkaç katmanla engelliyoruz: isteğin bizim sayfamızdan geldiğinin denetimi, kısa ömürlü ve tek kullanımlık imzalı bilet, adres başına saatlik ve günlük sınır, sitenin tamamı için günlük bir tavan ve aynı anda modele gidebilecek istek sayısına bir sınır.

Dağıtım

Kod GitHub'da duruyor. Hetzner'deki sunucuda Coolify çalışıyor ve ana dala her push'ta siteyi Docker imajı olarak yeniden derleyip yayına alıyor. Bir dağıtım yaklaşık iki buçuk dakika sürüyor.

Önünde Cloudflare var. Statik üretime geçince HTML de önbelleğe alınabilir oldu ve sayfalar bir saate kadar orada tutuluyor.

Nerede yanıldık

Önbellek, hızın kaynağı olduğu kadar bir yanılgının da kaynağı oldu. Yeni bir sürümü yayına aldık, Coolify başarılı dedi ama ana sayfa eski hâliyle geliyordu. Sebep basitti. Cloudflare elindeki kopyanın süresi dolmadan yenisini istemiyordu.

Doğru çözüm, her dağıtımın sonunda önbelleği otomatik temizlemek. Yayın süreci yalnızca sunucuda değil, ziyaretçinin gördüğü yerde bittiğinde bitmiş sayılır.

Bir de erişilebilirlik var. Otomatik tarama sayfalarda hata bulmuyordu, ama ana sayfadaki küçük etiketler yarı saydam bir fotoğrafın üstünde duruyordu ve tarama aracı fotoğrafın üstündeki kontrastı ölçemiyor. Etiketlerin arkasındaki pikselleri ayrıca ölçtük, oran 3:1 civarındaydı. Fotoğrafı biraz soldurup etiketleri bir ton koyulaştırınca 5:1'in üstüne çıktı. Araç "hata yok" dediğinde bile bakmak gerekiyor.

Neden anlatıyoruz

Bir müşteriye "çalışan yazılım teslim ediyoruz" demek kolay. Bu sitede ne yaptığımızı açıkça yazınca, o cümlenin neye dayandığını görmek de kolaylaşıyor.