Statik site, frontend ve backend

Ekranda iki site var. Birincisi bir oyun sayfası: oyun alanı, skor, "yeniden başlat" düğmesi. İkincisi "sipariş bırak" formu olan bir atölye sayfası. İkisi de tarayıcıda açılıyor, ikisi de HTML, CSS ve JavaScript'ten oluşuyor, ikisi de hazır görünüyor. Birincisi bir dakikada yayınlanır: klasör barındırmaya, bağlantı hazır. İkincisinde ajan büyük olasılıkla duracak ve sunucunun nerede olacağını, siparişlerin nereye kaydedileceğini soracak.

Fark karmaşıklıkta ya da güzellikte değil. Fark, ziyaretçi düğmeye bastığında kimin bir şey yapması gerektiğinde ve verilerin bundan sonra nerede duracağında. Üç kelimeyi ele alalım - statik site, frontend ve backend - verilerin nerede yaşadığına bakalım ve bunun yayınlama yöntemini nasıl belirlediğini görelim. Sonunda, siz "yayınla" demeden önce ajanın kendisinin ne soracağına ve ona ne sorulması gerektiğine bakacağız.

1. Statik site

Statik site - hazır dosyalardan oluşan bir sitedir: index.html, style.css, betikler, görseller, yazı tipleri. Sunucu bunları saklar ve her ziyaretçiye aynılarını gönderir, hiçbir şey hesaplamaz ve ziyaretçiler hakkında hiçbir şey hatırlamaz. Göstermek, hesaplamak, tıklamaya tepki vermek gibi tüm işi ziyaretçinin bilgisayarındaki tarayıcı yapar.

Tek sayfalık bir portföy alalım. Klasörde kendinizi anlatan ve iş listesi olan bir index.html, bir style.css, bir düzine görsel ve küçük bir betik var. Ziyaretçi bağlantıyı açar, tarayıcı dosyaları indirir ve onlardan sayfayı oluşturur. Bir işe tıklamak görseli büyütür, karanlık tema düğmesi renkleri değiştirir: bunu tarayıcıdaki betik yapar. Sunucu dosyaları gönderdikten sonra olan bitene karışmaz: kimin geldiği ve neye tıkladığı umurunda değildir. Yeni bir iş eklendiğinde index.html'i düzenler, yanına görseli koyar ve klasörü yeniden yayınlarsınız; burada bir şeyi değiştirmenin başka yolu yok ve siteyi değiştiren sizsiniz, ziyaretçi değil.

Aynı şemayla kurulmuş olanlar:

• bir konser veya buluşma afişi: tarih, yer, program, ulaşım haritası; "bilet al" düğmesi bilet satıcısının sitesine götürür, afişin kendisi hiçbir şey satmaz;
• form yerine telefon ve e-posta varsa bir ürün veya hizmet landing sayfası;
• proje belgeleri: menülü ve birbirine bağlantı veren onlarca sayfa, yine de bunlar dosyadır;
• yorumsuz bir blog: her yazı bir dosyadır, yenisi de geri kalan her şey gibi yayınlanır;
• tarayıcıda bir oyun. Evet, oyun da: hamleler, skor ve animasyon tarayıcıda hesaplanır, sunucunun bunlarla işi yoktur.

Sitenin işini iki yarıya bölerseniz statiğin nerede bittiği görülür: tarayıcının yaptığı kısım ve sunucunun yaptığı kısım. Bu iki yarının kendi adları var.

2. Frontend tarayıcıda çalışır

Frontend - ziyaretçinin bilgisayarında çalışan her şeydir: tarayıcının aldığı ve kendi tarafında çalıştırdığı işaretleme, stiller ve betikler. "Ön taraf", görünen kısım. (Genellikle "sadece HTML/CSS işi" diye küçümsenir, oysa bu, sitenin kişinin doğrudan muhatap olduğu kısmının tamamıdır, statikte ise sitenin kendisidir.)

Frontend çok şey yapabilir: sayfayı göstermek, oyundaki hamleleri saymak, göndermeden önce form alanının boş olmadığını kontrol etmek, bir sonraki ziyarete kadar bir şeyi hatırlamak - bunun için tarayıcının kendi hafızası var, ajan buna localStorage diyecektir. Yapamadığı şey ise paylaşmak. Hafıza bu tarayıcıda, bu cihazda yaşar, başka hiçbir yerde değil. Bu sınırın nerede engel olduğu, nerede olmadığı iki örnekte görülür.

Oyundaki en iyi skor. Oyun bitti, betik sonucu önceki rekorla karşılaştırdı ve yenisini tarayıcı hafızasına kaydetti. Yarın oyuncu sayfayı aynı dizüstü bilgisayarda aynı tarayıcıda açarsa rekor yerinde. Telefonda açarsa orası boş, telefonun kendi hafızası var. Siz, oyunun yazarı, bu rekoru asla göremezsiniz. Bunda bir sorun da yok: rekor yalnızca oyuncunun kendisine gerekiyor, site de statik kalıyor.

Atölye siparişi. Müşteri ne yapılması gerektiğini yazdı, telefonunu bıraktı, "gönder"e bastı. Betik alanların doldurulduğunu kontrol edebilir, ama sonrasında gidecek yeri yoktur: siparişi tarayıcı hafızasına yazarsa sipariş müşterinin telefonunda kalır ve usta ondan haberdar olmaz. Siparişi başka bir cihazda başka bir kişi okumalı, demek ki veriler müşterinin bilgisayarından ayrılmalı ve diğer uçta birinin onları alıp saklaması gerekir. Yalnızca dosyalardan oluşan bir sitede böyle bir "birisi" yoktur.

Tek bir ziyaretçiyi tek bir cihazda ilgilendiren her şeyi frontend kendisi yapar. Geri kalanı ikinci yarının işidir.

3. Backend sunucuda çalışır

Backend - sunucuda çalışan ve tarayıcıların isteklerine yanıt veren programdır. Siparişi almak ve kaydetmek. Kullanıcı adı ve şifreyi kontrol etmek. Ürün listesini vermek. Ziyaretçi sekmeyi çoktan kapattığında bile çalışır ve sunucunun kendisi gibi - kapatılmayan bir bilgisayar - her zaman çalışır durumda olmak zorundadır.

Şemada aynı biçimde iki yol var: tıklama, iş, sonuç. Aralarındaki fark ortadaki kutuda - işi kim yapıyor ve tam olarak ne yapıyor. Üstte, oyunda bir hamleden sonra tarayıcıdaki JavaScript skoru hesaplar, rekoru kaydeder ve alanı yeniden çizer, hepsi ziyaretçinin bilgisayarında. Altta "gönder" tıklaması bir isteğe dönüşür, istek sunucuya gider, program onu alır, siparişi kendi sunucusuna kaydeder ve tarayıcıya yanıt verir ve ekrana ancak onun yanıtı gelir. Siparişin sunucuda tam olarak nerede durduğu - sıradaki bölümün konusu. "İşi kim yapıyor" sorusu iki site türü arasındaki sınırın ta kendisidir.

Backend olmadan yapılamayacağının üç tanıdık işareti:

• şifreyle giriş: birinin şifreleri saklaması ve kontrol etmesi gerekir ve bu ziyaretçinin tarayıcısı olamaz;
• başkalarının görmesi gereken veriler: yorumlar, siparişler, ortak liste;
• sizin adınıza bir eylem: e-posta göndermek, ödeme yapmak, sizin anahtarınızla başka bir servise bir şey kaydetmek.

Backend herhangi bir dilde yazılabilir: JavaScript (o zaman bu Node.js'tir), Python, Java, bir düzine başkası. Bu makale için önemli olan bu değil, programın bir yerde sürekli çalışması gerektiği ve bu "bir yer"in tarayıcı olmadığı. Site adresi, statikte olduğu gibi sunucudaki bir yere götürür, sadece o yerde artık bir dosya değil, yanıtı anında oluşturan bir program vardır.

4. Veriler nerede yaşar

Tıklamadan sonra işi kimin yapması gerektiğine veriler karar verir: nerede durdukları ve kimin onları görmesi gerektiği. Sitenin görünümü ya da karmaşıklığı değil, veriler. Üç yer var.

Proje dosyalarında. Sayfa metni, görseller, oyun kuralları. Tüm ziyaretçiler için aynıdır ve yalnızca yeni bir deploy ile değişir: dosyayı düzelttiniz, yeniden yayınladınız.

Ziyaretçinin tarayıcısında. Ayarlar, en iyi skor, yeniden yüklemede kaybetmek istemediğiniz form taslağı. Yalnızca bu ziyaretçi bu cihazda görür. Site verileri temizlendiğinde kaybolur, gizli pencerede yoktur, başka bir tarayıcıda ve başka bir cihazda da yoktur ve siz onlar hakkında hiçbir şey bilmezsiniz.

Sunucudaki veritabanında. Siparişler, yorumlar, hesaplar. Görmesi gereken herkes görür, siz de dahil. Birinin sekmesinin açık olup olmamasından bağımsız olarak saklanırlar. Oraya bir şeyin ulaşması için verileri alıp kaydeden bir sunucu programı gerekir.

Şemada yukarıdaki şemayla aynı iki dünya var, sadece bu kez içlerinde işi yapanlar değil, veriler var. Site dosyaları her ziyaretçiye kopya olarak gider, bu yüzden sayfa herkeste aynıdır. Tarayıcı hafızası oku olmayan tek kutu: içinde veriler var ama cihazdan dışarı gitmiyorlar ve siz onları göremezsiniz. Veritabanına veriler yalnızca program üzerinden ulaşır, buna karşılık oradan görmesi gereken herkes görür.

Teori yerine tek bir soru sorun: bu kişinin girdiğini başka biri görmeli mi? "En iyi skoru hatırla" - hayır, demek ki tarayıcı hafızası yeter ve site statik kalır. "Siparişi kaydet" - evet, demek ki veritabanı ve ona yazan program gerekir. Bu sorunun bir istisnası var ve verilerle ilgili değil: başka bir servisin anahtarı. Anahtar varsa "hayır" cevabı işi kurtarmaz: anahtar dosyalarda duramaz, demek ki sizin adınıza başka bir servise giden bir sunucu programı, ya da bunu sizin yerinize yapacak başka bir aracı servis gerekir.

Ara bir durum da olur. Sipariş formunu sizin yerinize başka bir servis alabilir: ziyaretçi "gönder"e basar, veriler sizin sunucunuza değil onlara gider ve oradan size e-posta olarak gelir. Bu yine de backend'dir, sadece sizin değil. Sorarsanız ajan böyle bir servisin adını verir; şimdilik önemli olan, birinin sunucu programı olmadan formun çalışmadığını anlamak.

5. Deploy yöntemleri neden farklı

Statik siteler kopyalanarak yayınlanır: klasör barındırmaya gider (dosyalarınızı herkese dağıtan başkasının sunucusu), bağlantı hazırdır, güncellemek için yeniden kopyalarsınız. Hepsi bu.

Backend'de durum farklıdır. Sunucuda programın dili için bir ortam bulunmalıdır - kodun çalışması için gereken Python'un veya Node.js'in kendisi. Program çalışır durumda olmalı ve çökerse yeniden başlatılmalıdır. Yanında bir veritabanı çalışmalıdır. Veritabanına ve başka servislere ait anahtarlar, programın okuyabileceği ama ziyaretçilerin okuyamayacağı şekilde durmalıdır. Bu parçaların her biri ayrı ayrı güncellenir ve kendi tarzında bozulur.

İşte bu yüzden başka bir barındırma gerekir: yalnızca dosya vermekle kalmayıp programları da çalıştıran türden. Orada genellikle programın çalıştığı süre ve veritabanının kapladığı yer için ödeme yapılır. Ücretsiz seçenekler var, ama bu makaleden daha sık değişen şartlarla.

Sırlar satırına bir açıklama. Kalıcı bir bağlantı için barındırmada hesap açtıysanız, statik sitenin de barındırmaya ait bir anahtarı olur, ama o site klasöründen ayrı durur ve klasöre konmaz.

Ajanın cevabındaki "sunucu kurayım" ifadesi "dosya oluşturayım" kadar sıradan geliyor. Bu cümlenin arkasında tablonun tüm sağ sütunu duruyor ve neredeyse her satırın bakımı sonradan size kalacak.

6. Statik site nereye yayınlanır

Statik siteler kopyalanarak yayınlandığından, bunun için birçok barındırma var ve çoğu küçük bir sayfa için ücretsiz. En sık karşılaşılan beşi burada. Tabloda "depo" kelimesiyle karşılaşacaksınız: şimdilik onu sürüm kontrolü altındaki bir proje klasörü olarak anlamak yeterli, ayrıntısı sonraya.

Nasıl seçilir. Göstermek ve tartışmak için - bağlantıyı kayıt olmadan veren. Uzun süre tutmak için - hesap açtığınız herhangi biri. Proje bir depoda duruyorsa - depoya bağlanan ve her değişiklikte kendini güncelleyen. Seçim, yayınlanan sayfanın görünümünü etkilemez: dosyalar aynıdır.

Sitenin backend'i varsa

Programın, yalnızca dosya vermekle kalmayıp kodunuzu çalıştıran ve çalışır tutan bir barındırmaya ihtiyacı vardır: girdi olarak klasör değil program alır ve onun ortamını kendisi kurar. Yukarıdaki tablodaki servislerin bir kısmında bu mod da var, ama genellikle tam olarak programlar için yapılmış iki tanesiyle başlanır:

Ücretsiz backend'in her zaman kendi bedeli vardır: bir serviste program uykuya dalar ve duraklamadan sonraki ilk ziyaretçi onun uyanmasını bekler, diğerinde kredi biter. Ziyaretçi çoğaldığında sürekli çalışma için ödeme yapılmaya başlanır. Statikte böyle bir sorun yoktur: dosyalar uyumaz.

Tüm servislerin şartları ve limitleri değişiyor, ürünler yeniden adlandırılıp birleştiriliyor: Cloudflare, örneğin, yeni projelere Pages'te değil, statik dosyaların aynı şekilde yayınlandığı Workers'ta başlamayı öneriyor artık. Sayılar bilerek her iki tabloya da konmadı: seçmeden önce tarife sayfasına bakın.

7. Yayınlamadan önce ajana ne sorulmalı

Ajan klasöre bakar ve genellikle proje türünü kendisi adlandırır. Program yok, yalnızca dosyalar varsa statik site için barındırma önerir, dosyalar arasında verisini gönderecek yeri olmayan bir form olsa bile: bunu her zaman fark etmez. server.js veya app.py varsa - sunucu gerektiğini söyler ve onun nerede olacağını sorar. Adlandırmadıysa veya çok hızlı adlandırdıysa, kendiniz sorun:

Projeye bak ve bunun statik bir site mi yoksa sunucuya mı ihtiyacı olduğunu söyle.
Tam olarak neyin sunucu gerektirdiğini madde madde listele.
Her madde için sunucusuz yapılabilir mi, yoksa ertelenebilir mi, önerini yaz.

Cevap projeye bağlı, bu yüzden burada yok. Ama her cevapta dikkat edilmesi gereken birkaç şey var.

• "Sunucu gerekiyor"a bakmadan katılmayın. Tam olarak neyin bunu gerektirdiğini ve tarayıcıda yapılıp yapılamayacağını ya da ertelenip ertelenemeyeceğini sorun - örneğin ilk sürümü formsuz çıkarmak. Ajan, tarayıcı hafızasının yeteceği yerde bile backend kurmaya heveslidir.
• Tam tersi de olur: veriler ortak olmalıysa, ajan büyük olasılıkla statikle idare edilemeyeceğini söyleyecektir. Bu işi zorlaştırmak değil, durumu olduğu gibi söylemektir. burada tartışacak bir şey yok.
• Başka bir servisin anahtarı konusunda ajan onu nereye koyacağınızı soracaktır. "Site dosyasına" cevabı yanlış ve iyi bir ajan bunu kendisi söyler. Bu tür anahtarların site dosyalarının dışında bir yeri vardır ve ajan onu kendisi adlandırmalı, anahtarı sayfaya yazmayı önermemelidir.
• Statik deploydan önce ajana bir klasör yeter. Backend deploydan önce ise bunun yanında veritabanı, ortam ve sırlarla ilgili cevaplar da gerekir. Hiç soru sorulmadan sunucu "kurulduysa", ajanın tam olarak ne yaptığına ve nerede yaptığına bakın.

"Statik" ve "backend" kelimeleri karmaşıklığı değil, yeri tanımlar: işin nerede yapıldığını ve verilerin nerede yaşadığını. Bu yer bilindiğinde, yayınlama yöntemi kendiliğinden seçilir.

Barındırma koşulları zamanla değişir, tarife sayfalarından kontrol edin.