Kako namestiti Angular aplikacijo na cPanel spletno gostovanje

Sodobne aplikacije v ogrodju Angular delujejo kot enostranske spletne aplikacije (Single Page Applications oz. SPA). Čeprav med razvojem tečejo na lokalnem strežniku Node.js (preko ukaza ng serve), za produkcijo posebnega Node.js okolja ne potrebujemo. Angular kodo prevede v standardne statične datoteke (HTML, JS, CSS), ki jih zlahka gosti vsako klasično cPanel gostovanje na strežnikih Apache ali Nginx. V tem vodniku si bomo ogledali postopek priprave, prevajanja ter pravilno konfiguracijo datoteke .htaccess.

Prevajanje projekta za produkcijo (Production Build)

Pred prenosom datotek na strežnik kodo prevedemo z orodjem Angular CLI. Ključen je parameter --base-href, ki določa pot do statičnih virov.

Struktura izvoznih datotek v mapi dist

Po uspešnem prevajanju Angular ustvari mapo dist/ime-projekta/browser/. Na strežnik prenesemo izključno vsebino mape browser, tako da datoteka index.html leži neposredno v korenski mapi gostovanja.

1. index.html: Glavna vstopna točka celotne aplikacije.
2. main-[hash].js: Glavna zgoščena programska logika v JavaScriptu.
3. styles-[hash].css: Združeni in optimizirani CSS slogi.
4. assets/: Mapa s statičnimi viri (slike, pisave, ikone).

Konfiguracija strežnika: Datoteka .htaccess

Ker Angular uporablja usmerjanje na strani odjemalca (Client-side Routing), bo ob neposrednem obisku podstrani ali ob pritisku tipke F5 strežnik Apache vrnil napako 404 Not Found, saj fizična datoteka ne obstaja. Vse zahteve moramo preusmeriti na index.html.

# Konfiguracija za korensko domeno ali poddomeno (.htaccess)
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Pogoste težave in rešitve pri namestitvi

Pri prvi namestitvi na produkcijsko okolje se pogosto srečamo s tremi tipičnimi izzivi:

1. Bela stran po odprtju: V orodjih za razvijalce (F12 -> Console) preverite morebitne napake 404 za datoteke JS/CSS. Te pomenijo, da je bil parameter --base-href napačno nastavljen ob ukazu za gradnjo.
2. Napaka 404 ob osvežitvi: Preverite, ali je datoteka .htaccess naložena v isto mapo kot index.html. V cPanel File Managerju v nastavitvah (Settings) obvezno vklopite možnost Show Hidden Files (dotfiles).
3. CORS težave z zaledjem: Če PHP API teče na drugi domeni ali poddomeni, mora PHP skripta vsebovati glavo header("Access-Control-Allow-Origin: *");, klici pa morajo potekati preko varnega HTTPS protokola.