Tīmekļa lietotņu izvietošana, kas balstītas uz JavaScript UI ietvariem

Ir pagājis nedaudz vairāk nekā gads, kopš uzrakstīju rakstu par to, kā automātiski publicēt mājaslapas izmaiņas, izmantojot Github Actions. Lai gan turpinām runāt par līdzīgu tēmu, šoreiz paskatīsimies soli atpakaļ un publicēsim mājaslapu manuāli. Iemesls tam ir tas, ka esmu informēts, ka mūsu klientu atbalsts bieži saņem jautājumus par to, kā instalēt JS ietvarus mūsu tīmekļa serveros vai kā izvietot uz šiem ietvariem balstītas tīmekļa lietotnes mūsu serveros.

Jāuzsver, ka neiesaku instalēt JS ietvarus vai veikt visu izstrādes darbu tieši serverī. Tas ir tāpēc, ka tīmekļa lietotnes konfigurācijas faili, skatu-komponentu-maršrutēšanas faili, kas vēl nav apvienoti, un īpaši node modules mape aizņem ievērojamu daļu no hostinga paketē piešķirtajiem resursiem.

Tāpēc turpināšu par izvietošanu serverī, nevis instalēšanu un izstrādi.

Varētu šķist sarežģīti, bet patiesībā tas ir pavisam vienkārši – viss, kas jādara, ir jāpārvieto visi faili no izveidotās tīmekļa lietotnes mapes uz jūsu vietnes domēna saknes mapi tīmekļa serverī.

Tīmekļa lietotnes mapes struktūra

Jau ilgāku laiku populārākie JavaScript ietvari ir React, Angular un Vue. Šajā rakstā kā piemēru izmantošu Vue. Tomēr, ja izmantojat React, Angular vai kādu citu JS ietvaru, nav nepieciešams šo lapu uzreiz aizvērt. Ja izslēdzam iespējamas atšķirības starp šiem ietvariem, izvietošanas loģika ir diezgan līdzīga.

Vispirms apskatīsim, kā varētu izskatīties Vue lietotnes mapes struktūra.
Manā piemērā esmu izveidojis Vue lietotni, izmantojot Vite, un pievienojis Vue Router un TypeScript atbalstu.

Projekta saknes mapē (vue-project manā piemērā) ir iepriekš minētā node_modules mape, kas tiek izveidota pēc npm install palaišanas pirmo reizi. Papildus tam ir public un src mapes, kā arī vairāki lietotnes konfigurācijas faili.

Lielākā daļa lietotnes izstrādes notiek src mapē – tur atrodas lietotnes skati, komponentes, maršruti u.c. Veidojot tīmekļa lietotni, šie faili tiek optimizēti un apvienoti. public mapes saturs netiek optimizēts vai apvienots, tas tiek nokopēts izveidotajā mapē tāds, kāds ir.

Kļūda saistībā ar Vue Router

Ja, veidojot jaunu Vue projektu, pievienojat Vue Router, tas pēc noklusējuma tiks konfigurēts izmantot HTML5 vēstures režīmu. Tas ir visdraudzīgākais SEO, izskatās labi un ir viegli saprotams, tāpēc arī ieteicamais Vue Router vēstures režīms.

Tomēr ar šo vēstures režīmu rodas problēma, ja lietotni izveidojat un izvietojat tādu, kāda tā ir. Proti, ja tieši mēģināt apmeklēt kādas savas lietotnes lapas URL (piemēram, https://randomexample.eu/somepage), jūs nonākat uz 404. kļūdas (Lapa nav atrasta). Tas pats notiks, ja pārvietosieties no galvenās lapas uz citu lapu un pārlādēsiet.

Par laimi šo problēmu ir viegli novērst. Mūsu (uz Apache balstītos) tīmekļa hostinga serveros jums savas vietnes saknes mapē jāiekļauj .htaccess fails. Šī faila saturs ir šāds:

<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)

Iesaku šo failu izveidot savas tīmekļa lietotnes ”public” mapē, lai tas vienmēr tiktu iekļauts izveidotajā lietotnes mapē.

Tīmekļa lietotnes izveide

Tagad, kad lietotne šķiet gatava izvietošanai, palaižam npm run build komandu un mūsu mapju struktūrā parādās jauna dist mape. (Citās ietvaros šai mapei var būt cits nosaukums)

Šajā mapē redzam lietotnes index failu, favicon, .htaccess failu, ko izveidojām Vue Router kļūdas dēļ, un assets mapi, kurā atrodas lietotnes loģikas un stila faili .js un .css formātos.

Lai publicētu / izvietotu tīmekļa lietotni, būs jāpārvieto viss ”dist” mapes saturs uz jūsu vietnes domēna saknes mapi tīmekļa serverī.

Failu pārvietošana uz serveri

Ir vairāki dažādi veidi, kā pārvietot failus uz serveri (FTP, SFTP, SSH) – vienkāršākais no tiem ir FTP (My Zone ir pieejama tīmekļa FTP lietotne). Ir arī noderīgas pamācības par pieslēgšanos serverim ar visiem šiem veidiem mūsu atbalsta zināšanu bāzē: https://support.www.zone.lv/

Neatkarīgi no tā, kuru veidu izvēlaties, jums būs jāaugšupielādē lietotnes faili savas vietnes domēna saknes mapē.
Ja lietotnei jāatveras no galvenā domēna (piem., https://randomexample.eu/) un neesat mainījuši saknes mapi My Zone iestatījumos, dist mapes saturs jāpārvieto uz htdocs mapi serverī.

Ja tīmekļa lietotnei jāatveras no apakšdomēna (piem., https://subdomain.randomexample.eu/), lietotnes faili jāpārvieto uz mapi, kas nosaukta pēc apakšdomēna.

Vai katru reizi, kad veicu izmaiņas lietotnē, man būs jādzēš un jāpārlādē faili no jauna?

Jā.

Taču šo procesu var padarīt ērtāku, ja izmantojat versiju kontroles programmatūru Git kopā ar Github vidi un tās Actions funkcionalitāti: https://www.zone.lv/blog/2023/12/21/automatic-publication-of-website-changes-through-github-actions/