---
title: "JavaScripti UI raamistikele ehitatud veebirakenduste avaldamine Vue näitel"
canonical_url: "https://www.zone.ee/blogi/javascripti-raamistikele-ehitatud-veebirakenduste-avaldamine-vue-naitel/"
post_type: "post"
published: "2025-01-06T09:38:40+00:00"
modified: "2025-02-26T09:27:08+00:00"
author: "Zone Blogi"
featured_image: "https://www.zone.ee/static/sites/2/2025/01/JavaScripti-raamistikele-ehitatud-veebirakenduste-avaldamine-Vue-naitel-2.webp"
taxonomies:
category:
- name: "Tehniline"
url: "https://www.zone.ee/blogi/category/tehniline/"
post_tag:
- name: "Arendus"
url: "https://www.zone.ee/blogi/tag/arendus/"
- name: "JavaScript"
url: "https://www.zone.ee/blogi/tag/javascript/"
- name: "Veebiarendus"
url: "https://www.zone.ee/blogi/tag/veebiarendus/"
- name: "veebimajutusteenus"
url: "https://www.zone.ee/blogi/tag/veebimajutusteenus/"
- name: "Vue"
url: "https://www.zone.ee/blogi/tag/vue/"
- name: "Vue.js"
url: "https://www.zone.ee/blogi/tag/vue-js/"
skills:
- name: "Edasijõudnule"
url: "https://www.zone.ee/blogi/skill/edasijoudnule/"
- name: "Spetsialistile"
url: "https://www.zone.ee/blogi/skill/spetsialistile/"
---
# 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](https://vuejs.org/guide/introduction.html)) 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](https://vite.dev/guide/)** 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:
```javascript
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
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
Ükskõik, millisel viisil seda teha, tuleb failid laadida veebilehe domeeni juurkausta. Kui soovid, et arendatud veebirakendus vaataks vastu peadomeeni külastades (nt ) 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](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: