Statik sayt, frontend və backend

Ekranda iki sayt var. Birincisi - oyun səhifəsi: meydança, hesab, "yenidən" düyməsi. İkincisi - "sifariş vermək" forması olan emalatxana səhifəsi. Hər ikisi brauzerdə açılır, hər ikisi HTML, CSS və JavaScript-dən yığılıb, hər ikisi hazır görünür. Birincisi bir dəqiqəyə yerləşdirilir: qovluq hostinqə, link hazırdır. İkincisində isə agent çox güman ki, dayanıb server harada olacağını və sifarişlərin harada saxlanacağını soruşacaq.

Fərq mürəkkəblikdə və ya gözəllikdə deyil. O, ziyarətçi düyməni basanda kimin nəsə etməli olduğunda və bundan sonra datanın harada yaşamalı olduğundadır. Üç sözü - statik sayt, frontend və backend - araşdıraq, datanın harada yaşadığını görək və bunun nəşr üsuluna niyə təsir etdiyini anlayaq. Sonda isə siz "yerləşdir" deməzdən əvvəl agentin özünün nə soruşacağına və ondan nə soruşmağa dəyər olduğuna baxaq.

1. Statik sayt

Statik sayt - hazır fayllardan ibarət saytdır: index.html, style.css, skriptlər, şəkillər, şriftlər. Server onları saxlayır və hər ziyarətçiyə eyni faylları verir, heç nə hesablamadan və ziyarətçilər haqqında heç nə yadda saxlamadan. Bütün işi - göstərmək, hesablamaq, klikə reaksiya vermək - ziyarətçinin öz kompüterindəki brauzeri edir.

Bir səhifəlik portfolio götürək. Qovluqda özünüz haqqında hekayə və işlər siyahısı olan index.html, style.css, təxminən on şəkil və kiçik bir skript var. Ziyarətçi linki açır, brauzer faylları yükləyir və onlardan səhifəni yığır. İşin üzərinə klikləyəndə şəkil böyüyür, qaranlıq tema keçidi rəngləri dəyişir: bunu brauzerdəki skript edir. Server faylları verdikdən sonra baş verənlərdə iştirak etmir: kimin gəldiyi və nəyə kliklədiyi ona fərq etmir. Yeni iş əlavə olundu -index.html-i düzəldirsiniz, yanına şəkil qoyursunuz və qovluğu yenidən yerləşdirirsiniz; burada nəyisə dəyişməyin başqa yolu yoxdur və saytı ziyarətçi yox, siz dəyişirsiniz.

Eyni sxem üzrə qurulub:

• konsertin və ya görüşün afişası: tarix, yer, proqram, yol xəritəsi; "bilet al" düyməsi bilet satıcısının saytına aparır, afişanın özü heç nə satmır;
• məhsulun və ya xidmətin lendinq səhifəsi, əgər orada forma əvəzinə telefon və e-poçt göstərilibsə;
• layihə sənədləşməsi: menyusu və bir-birinə keçidləri olan onlarla səhifə, amma yenə də bunlar fayllardır;
• şərhsiz bloq: hər yazı ayrı fayldır, yenisi də qalanları kimi yerləşdirilir;
• brauzer oyunu. Bəli, oyun da: hərəkətlər, hesab və animasiya brauzerdə hesablanır, serverin bunlara dəxli yoxdur.

Saytın işini iki yarıya - brauzerin gördüyü işə və serverin gördüyü işə - bölsək, statikanın harada bitdiyi görünər. Bu iki yarının öz adları var.

2. Frontend brauzerdə işləyir

Frontend - ziyarətçinin kompüterində icra olunan hər şey: brauzerin aldığı və özündə işə saldığı nişanlama, stillər və skriptlər. "Ön hissə", görünən hissə. (Onu tez-tez "sadəcə tərtibat" adlandırırlar, halbuki bu, saytın insanın bilavasitə işlədiyi bütöv hissəsidir, statikada isə - saytın hamısı.)

Frontend çox şey bacarır: səhifəni göstərmək, oyunda hərəkətləri saymaq, göndərməzdən əvvəl forma sahəsinin boş olmadığını yoxlamaq, növbəti ziyarətə qədər nəyisə yadda saxlamaq - bunun üçün brauzerin öz anbarı var, agent onu localStorage adlandıracaq. Bacarmadığı - paylaşmaq. Anbar məhz bu brauzerdə, məhz bu qurğuda yaşayır, başqa heç yerdə yox. Bu sərhədin harada mane olduğunu, harada olmadığını iki misalda görmək olar.

Oyunda ən yaxşı hesab. Partiya bitdi, skript nəticəni əvvəlki rekordla müqayisə etdi və yenisini brauzer anbarında qeyd etdi. Sabah oyunçu səhifəni eyni noutbukda eyni brauzerdə açacaq - rekord yerindədir. Telefonda açsa - orada boşdur, telefonun öz anbarı var. Siz, oyunun müəllifi, bu rekordu heç vaxt görməyəcəksiniz. Bunda pis heç nə yoxdur: o yalnız oyunçunun özünə lazımdır, sayt isə statik qalır.

Emalatxana sifarişi. Müştəri nə lazım olduğunu təsvir etdi, telefon nömrəsini yazdı, "göndər" düyməsini basdı. Skript sahələrin doldurulduğunu yoxlaya bilər, bundan o yana isə onun əli çatmır: sifarişi brauzer anbarına yazsa, sifariş müştərinin telefonunda qalacaq, usta isə ondan xəbər tutmayacaq. Sifarişi başqa qurğuda başqa insan oxumalıdır, deməli, data müştərinin kompüterindən çıxıb getməli, digər tərəfdə isə onu kimsə qəbul edib saxlamalıdır. Sadəcə fayllardan ibarət saytda belə bir "kimsə" yoxdur.

Bir ziyarətçiyə, bir qurğuya aid olan hər şeyi frontend özü edir. Qalanı - ikinci yarının işi.

3. Backend serverdə işləyir

Backend - serverdə işə salınmış və brauzerlərin sorğularına cavab verən proqramdır. Sifarişi qəbul edib saxlamaq. Loginlə parolu yoxlamaq. Məhsul siyahısını vermək. O, ziyarətçi vərəqi artıq bağlayandan sonra da işləyir və serverin özü kimi - söndürülməyən kompüter kimi - həmişə işə salınmış olmalıdır.

Sxemdə eyni formanın iki yolu var: klik, iş, nəticə. Onlar orta blokla fərqlənir - işi kim edir və dəqiq nəyi. Yuxarıda oyunda hərəkətdən sonra brauzerdəki JavaScript hesabı sayır, rekordu saxlayır və meydançanı yenidən çəkir, və bunların hamısı ziyarətçinin kompüterində baş verir. Aşağıda "göndər" düyməsinə klik sorğuya çevrilir, sorğu serverə gedir, proqram onu qəbul edir, sifarişi öz serverində saxlayır və brauzerə cavab verir, ekrana da məhz onun cavabı çıxır. Sifarişin serverdə dəqiq harada saxlandığı - növbəti bölmədə. "İşi kim edir" sualı iki sayt tipi arasındakı sərhəddir.

Backend olmadan keçinmək mümkün olmadığını göstərən üç tanış əlamət:

• parolla giriş: kimsə parolları saxlamalı və yoxlamalıdır, bu isə ziyarətçinin brauzeri ola bilməz;
• başqalarının görməli olduğu data: şərhlər, sifarişlər, ümumi siyahı;
• sizin adınızdan hərəkət: məktub göndərmək, ödəniş keçirmək, sizin açarınızla yad servisə nəyisə yazmaq.

Backend-in dili istənilən ola bilər: JavaScript (onda bu Node.js olur), Python, Java, onlarla başqası. Bu məqalə üçün vacib olan bu deyil, vacib olan proqramın haradasa daimi işləməli olması və bu "haradasa"-nın brauzer olmamasıdır. Sayt ünvanı statikada olduğu kimi serverdəki yerə aparır, sadəcə həmin yerdə artıq fayl yox, cavabı elə sorğu anında yığan proqram durur.

4. Data harada yaşayır

Klikdən sonra işi kimin etməli olduğunu data həll edir: o harada saxlanır və kim onu görməlidir. Saytın görünüşü yox, onun mürəkkəbliyi də yox. Üç yer var.

Layihə fayllarında. Səhifə mətni, şəkillər, oyun qaydaları. Bütün ziyarətçilər üçün eynidir və yalnız yeni deploylə dəyişir: faylı düzəltdiniz, yenidən yerləşdirdiniz.

Ziyarətçinin brauzerində. Tənzimləmələr, ən yaxşı hesab, səhifə yenidən yüklənəndə itirmək istəmədiyiniz forma qaralaması. Yalnız bu ziyarətçi bu qurğuda görür. Sayt datasını təmizləyəndə yox olur, məxfi pəncərədə yoxdur, başqa brauzerdə və başqa qurğuda da yoxdur, siz isə onlar haqqında heç nə bilmirsiniz.

Serverdəki bazada. Sifarişlər, şərhlər, hesablar. Görməli olan hər kəs görür, siz də daxil olmaqla. Kiminsə vərəqinin açıq olub-olmamasından asılı olmayaraq yaşayır. Ora nəyinsə düşməsi üçün serverdə datanı qəbul edib yazacaq proqram lazımdır.

Sxemdə yuxarıdakı ilə eyni iki dünya var, sadəcə indi orada icraçılar işləmir, data saxlanır. Sayt faylları hər ziyarətçiyə kopiya kimi gedir, ona görə səhifə hamıda eynidir. Brauzer anbarı - oxu olmayan yeganə blok: data orada var, amma qurğudan çıxmır, siz onu görməyəcəksiniz. Bazaya data yalnız proqram vasitəsilə düşür, əvəzində oradan onu görməli olan hər kəs görür.

Nəzəriyyə əvəzinə bir sual verin: birinin daxil etdiyini başqa insan görməlidirmi? "Ən yaxşı hesabı yadda saxla" - yox, deməli, brauzer anbarı, sayt isə statik qalır. "Sifarişi saxla" - bəli, deməli, baza və ora yazan proqram. Sualın bir istisnası var, o isə dataya aid deyil: yad servisin açarı. Açar varsa, "yox" cavabı xilas etmir: o, fayllarda saxlanıla bilməz, deməli, yad servisə sizin adınızdan müraciət edən serverdəki proqram, ya da bunu sizin əvəzinizə edən yad vasitəçi servis lazımdır.

Orta hal da olur. Sifariş formasını sizin əvəzinizə yad servis qəbul edə bilər: ziyarətçi "göndər" düyməsini basır, data sizin serverinizə yox, onlara gedir, oradan da sizə məktubla gəlir. Bu, yenə də backend-dir, sadəcə sizin deyil. Soruşsanız, agent beləsini adlandıracaq; indi isə anlamaq vacibdir ki, forma kiminsə serverdəki proqramı olmadan işləmir.

5. Deploy üsulları niyə fərqlidir

Statika kopyalama ilə nəşr olunur: qovluq hostinqə gedir (sizin fayllarınızı istəyən hər kəsə verən yad server), link hazırdır, yeniləmək üçün - yenidən kopyalamaq. Vəssalam.

Backend-lə isə başqa cür. Serverdə proqramın dili üçün mühit qurulmalıdır - Python və ya Node.js-in özü, onlarsız kodu işə salmağa heç nə yoxdur. Proqram işə salınmalı və çöksə yenidən başladılmalıdır. Yanında baza da işləməlidir. Bazanın və yad servislərin açarları elə saxlanmalıdır ki, proqram onları oxusun, ziyarətçilər isə yox. Bu hissələrin hər biri ayrılıqda yenilənir və özünəməxsus şəkildə xarab olur.

Buna görə də hostinq də başqadır: təkcə faylları verən yox, proqramları işə salan hostinq. Orada adətən proqramın işlədiyi vaxta və bazanın tutduğu yerə görə ödəyirlər. Pulsuz variantlar var, amma şərtlərlə, həm də bu şərtlər bu məqalədən daha tez-tez dəyişir.

Sirlər sətrinə bir dəqiqləşdirmə. Daimi link üçün hostinqdə hesab açmısınızsa, hostinqin açarı statik saytda da var, amma o, sayt qovluğundan ayrı yaşayır və oraya qoyulmur.

Agentin cavabında "server qaldır" ifadəsi "fayl yarat" kimi adi səslənir. Bu ifadənin arxasında cədvəlin bütün sağ sütunu dayanır və sonra demək olar ki, hər sətrinə qulluq etməli olacaqsınız.

6. Statik saytı haraya yerləşdirmək

Statika kopyalama ilə nəşr olunduğundan onun üçün hostinq çoxdur, əksəriyyəti isə kiçik səhifə üçün pulsuzdur. Ən tez-tez rast gəlinən beşi budur. Cədvəldə "repozitoriya" sözü çıxacaq: hələlik onu versiya nəzarəti altında olan layihə qovluğu kimi anlamaq kifayətdir, ətraflısı başqa vaxt.

Necə seçməli. Göstərib müzakirə etmək üçün - qeydiyyatsız link verən. Uzun müddət saxlamaq üçün - hesab açdığınız istənilən. Layihə repozitoriyada yaşayırsa - repozitoriyaya qoşulan və hər dəyişiklikdə özü yenilənən. Seçim nəşr olunmuş səhifənin görünüşünə təsir etmir: fayllar eynidir.

Saytda backend varsa

Proqrama sadəcə faylları verən yox, kodunuzu işə salıb daim işlək saxlamağı bacaran hostinq lazımdır: ona qovluq yox, proqram verilir, mühiti isə o özü qurur. Yuxarıdakı cədvəldəki bəzi servislərdə də belə rejim var, amma adətən məhz proqramlar üçün yaradılmış ikisindən başlanır:

Pulsuz backend-in həmişə öz qiyməti var: bir servisdə proqram yatır, fasilədən sonra ilk ziyarətçi onun oyanmasını gözləyir, digərində isə kredit qurtarır. Ziyarətçilər çoxalanda daimi iş üçün ödəməli olursunuz. Statikada belə problem yoxdur: fayllar yatmır.

Bütün servislərdə şərtlər və limitlər dəyişir, məhsulların adı dəyişdirilir, özləri birləşdirilir: Cloudflare, məsələn, yeni layihələrə Pages-də yox, statik faylların da eyni cür yerləşdirildiyi Workers-də başlamağı təklif edir. Rəqəmləri hər iki cədvələ qəsdən salmadıq: seçimdən əvvəl tarif səhifəsinə baxın.

7. Nəşrdən əvvəl agentdən nə soruşmaq

Agent qovluğa baxır və adətən layihənin tipini özü adlandırır. Proqramsız fayllar - statika üçün hostinq təklif edəcək, hətta fayllar arasında məlumatı göndərməyə yeri olmayan forma olsa belə: bunu agent həmişə sezmir. server.js və ya app.py varsa - server lazım olduğunu deyəcək və onun harada olacağını soruşacaq. Adlandırmayıbsa, ya da tələsik adlandırıbsa, özünüz soruşun:

Layihəyə bax və de, bu statik saytdır, yoxsa ona server lazımdır.
Dəqiq nəyin server tələb etdiyini bənd-bənd sadala.
Hər bənd üçün təklif ver: serversiz keçinmək və ya onu ertələmək olarmı.

Cavab layihədən asılıdır, ona görə onu burada vermirik. Amma istənilən cavabda diqqət yetirməyə dəyən bir neçə şey var.

• "Server lazımdır" ilə baxmadan razılaşmayın. Dəqiq nəyin bunu tələb etdiyini və bunu brauzerdə etmək və ya ertələmək mümkün olub-olmadığını soruşun - məsələn, ilk versiyanı formasız buraxmaq. Brauzer anbarının kifayət edəcəyi yerdə agent həvəslə backend qurur.
• Əksinə də olur: data ümumi olmalıdırsa, agent, çox güman ki, statikanın kifayət etməyəcəyini deyəcək. Bu, çətinləşdirmə deyil, şeylərin öz adı ilə çağırılmasıdır. burada mübahisə ediləcək heç nə yoxdur.
• Yad servisin açarı olanda agent onu haraya qoymağı soruşacaq. "Sayt faylına" cavabı yanlışdır, yaxşı agent bunu özü deyəcək. Belə açarların sayt fayllarından kənarda yeri var və agent bu yeri özü adlandırmalıdır, açarı səhifəyə yazmağı təklif etməməlidir.
• Statikanın deployundan əvvəl agentə qovluq lazımdır. Backend-in deployundan əvvəl isə - həm də baza, mühit və sirlər haqqında cavablar. Heç bir sual verilmədən server "qalxıbsa", agentin dəqiq nə etdiyinə və harada etdiyinə baxın.

"Statika" və "backend" sözləri mürəkkəbliyi yox, yeri təsvir edir: iş harada baş verir və data harada yaşayır. Bu yer məlum olanda nəşr üsulu özü seçilir.

Hosting şərtləri zamanla dəyişir, tarif səhifələrində yoxlayın.