JavaScripti UI raamistikele ehitatud veebirakenduste avaldamine Vue näitel

Sellest on nüüd veidi üle aasta möödas, kui kirjutasin blogiloo sellest, kuidas automatiseerida veebirakenduste avaldamist Zone veebimajutusse läbi Github Actionsi. Jätkates samal lainel, astume täna aga sammu tagasi ning avaldame veebirakenduse käsitsi. Seda seetõttu, et minuni jõudnud info kohaselt pöördutakse meie kliendihaldurite poole tihti küsimustega: “kuidas mõnd raamistikku serverisse üldse installida?” ja “kuidas mõnele raamistikule ehitatud rakendust serverisse deployda?“

Olgu öeldud, et mina ei soovita raamistikku otse serverisse installida ega kogu arendustööga otse serveris tegelda. Seda juba seetõttu, et veebirakenduse konfiguratsioonifailid, kokkupakkimata vaadete-komponentide-routingu jm failid, ja eriti veebirakenduse toimimiseks vajalike pakettide failid (node_modules kaust) võtavad enda alla päris suure portsu majutuspaketis eraldatud ressurssidest.

Seetõttu jätkan vastamisega just teisele küsimusele.

Võib kõlada keeruliselt, kuid tegelikult on see lihtne – tuleb lihtsalt valmis ehitatud ja pakendatud veebirakenduse kaustast kõik failid serverisse veebilehe domeeni juurkausta tõsta.

Veebirakenduse kaustastruktuur

Tuntuimad JavaScripti raamistikud on ilmselt React, Angular ja Vue. Käesolev artikkel on kirjutatud minule koduseks saanud raamistiku (Vue) näitel. Sellegipoolest, kui sina lugejana kasutad hoopis Reacti, Angulari või muud JS raamistikku, siis ära seda vahelehte veel sule, sest kui võimalikud erisused välja jätta, on nende deploymine üsna sarnane.

Alustuseks vaatame, kuidas võib välja näha ühe Vue rakenduse kaustastruktuur.

Oma näites olen ma loonud Vite põhjal Vue rakenduse, mis kasutab Vue Routerit ja TypeScripti.

On projekti juurkaust (minu näites nimega vue-project). Selles on eelmainitud node_modules kaust, mis tekib pärast projekti loomist ja esmakordset npm install käsu jooksutamist. Lisaks on seal public ja src kaustad ning hulk rakenduse konfiguratsioonifaile.

Suurem osa rakenduse arendamisest toimub src kaustas – sealt leiab veebirakenduse vaated, komponendid, route’d, jne. Veebirakenduse buildimisel need optimeeritakse ja pakitakse kokku.
Kaustas public asuvaid faile ei optimeerita ega pakita kokku – need kopeeritakse builditud kausta nii nagu on.

Vue Routeriga kaasnev viga

Kui Vue projekti loomise käigus lisada rakendusele Vue Router, seadistatakse see vaikimisi nii, et see kasutab HTML5 history mode. See on Vue Routeri pakutavatest ajaloorežiimidest kõige SEO-sõbralikum, silmale ilusam ja lihtsamini arusaadavam ning seetõttu ka soovitatud ajaloorežiim.

Küll aga kaasneb sellega üks viga – kui minna otse mõne oma veebirakenduse vaate URLile (nt https://misiganesdomeen.ee/alamleht), vaatab vastu Error 404 (Lehte ei leitud). Sama juhtub ka siis, kui minna pealehelt nupu või lingi kaudu alamlehele ja seejärel lehte värskendada (refresh).

Õnneks on aga selle vea vältimine lihtne. Meie (Apache-põhiste) veebimajutusserverite puhul on tarvis, et veebilehe juurkaustas oleks fail nimega .htaccess. Selle faili sisu peab aga olema järgnev:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>Code language: JavaScript (javascript)

Mina soovitan selle faili luua oma veebirakenduse projekti public kausta, sel juhul on see alati builditud rakenduse kaustas olemas.

Rakenduse buildimine

Nüüd kui rakendus tundub avaldamiseks valmis, jooksutame käsu npm run build ja meie kaustastruktuuri tekib uus kaust dist (võib teiste raamistike puhul olla teisitinimetatud).

Selles kaustas näeme rakenduse indeksfaili, ikooni, Vue Routeri erisuse lõigus loodud .htaccess faili ja assets kausta, kust leiab veebilehe loogika- ja stiilifailid JS ning CSS formaadis.

Veebirakenduse avaldamiseks tuleb meil dist kausta sisu serverisse domeeni juurkausta tõsta.

Failide tõstmine serverisse

Failide tõstmiseks serverisse on mitu erinevat viisi (FTP, SFTP, SSH) – neist kõige on lihtsam ilmselt üle FTP (näiteks on meil Minu Zones olemas veebipõhine FTP rakendus). Kõigil kolmel viisil serveriga ühenduse saamiseks on meil olemas ka abiartiklid lehel https://help.zone.eu/

Ükskõik, millisel viisil seda teha, tuleb failid laadida veebilehe domeeni juurkausta. Kui soovid, et arendatud veebirakendus vaataks vastu peadomeeni külastades (nt https://misiganesdomeen.ee/) ja sa pole Minu Zone haldusest juurkausta muutnud, tuleb dist kausta sisu üles laadida htdocs-nimelisse kausta.

Kui soovid, et veebirakendus avaneks alamdomeenilt (nt https://alamdomeen.misiganesdomeen.ee) ja sa pole alamdomeenile erinimelist juurkausta loonud, tuleb dist kausta sisu üleslaadida alamdomeeni nimelisse kausta.

Kas ma pean iga muudatuse pärast käima vanu faile kustutamas ja uusi üles laadimas?

Jah.

Aga saab ka lihtsamini, kui kasutada versioonihaldustarkvara Git, versioonihalduskeskkonda Github ja viimase Actions funktsionaalsust. Loe sellest siit: https://www.zone.ee/blogi/2023/10/31/veebilehe-muudatuste-automaatne-avaldamine-labi-github-actionsi/