25.06.2021

Frontend-sovellusten hostaus web-palvelimella

Tässä on lyhyt opas frontend-sovelluksen hostaamiseen web-palvelimella — esimerkiksi React Appin tai muun staattisen web-sovelluksen, joka hyödyntää selaimen History APIa.

History API on tapa, jolla frontend-sovellus ohjaa, mikä sivu selaimessa näytetään. Tämä mahdollistaa frontend-sovellukset, jotka näyttävät tavallisilta verkkosivuilta ja joilla on omat URL-osoitteet sovelluksen eri osille.

Jotta uudelleenlataus (F5) toimisi kaikissa näissä frontend-puolen sijainneissa, web-palvelin täytyy konfiguroida palvelemaan frontend-paketin HTML-sivu (index.html) kaikille poluille, joita ei ole palvelimella olemassa.

Apache

Apache on todennäköisesti yleisin HTTP-palvelin jaetuissa hosting-ympäristöissä.

Se on yksinkertainen eikä yleensä vaadi HTTP-palvelimen konfiguraatioiden muuttamista tai edes tuntemista.

Luo vain .htaccess-tiedosto document rootiin, jossa käännetty web-sovelluksesi sijaitsee:

<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
</IfModule>

Tämä määrittää Rewrite-moduulin palvelemaan index.html-tiedoston kaikille pyynnöille, jotka eivät ole oikeita tiedostoja.

Se myös poistaa MultiViews-ominaisuuden käytöstä, joka on Apachen ominaisuus ja käyttää pattern matchingia useista tiedostoista valitsemiseen.

Jos tämä ei toimi, ota yhteyttä palvelimen ylläpitäjään ja pyydä varmistamaan, että Rewrite-moduuli on ladattu ja/tai sinulla on riittävät oikeudet .htaccess-tiedoston käyttöön.

Yksi tapa antaa riittävät oikeudet on sallia document rootille kaikkien asetusten ylikirjoitus AllowOverride All -asetuksella. Tämä vaatii kuitenkin ylläpitotason pääsyn palvelimeen.

Ota Rewrite-moduuli käyttöön Debian-pohjaisessa järjestelmässä ajamalla a2enmod rewrite. Muut järjestelmät voivat vaatia manuaalista konfigurointia.

Nginx

Nginxillä sinun täytyy muokata varsinaisia HTTP-palvelimen konfiguraatioita.

Nginx:n konfigurointi vaatii todennäköisesti ylläpitotason pääsyn palvelimeen. (Ellet käytä kontteja.)

Konfiguraatio voi näyttää tältä:

server {
        listen 80;
        listen [::]:80;
        root /var/www/html;
        index index.html;
        server_name example.com;

        location / {
                try_files $uri $uri/ =404;
        }
}

Kohta, jonka haluat muuttaa, on location / -lohko:

location / {
        try_files $uri $uri/ =404;
}

Alkuperäisessä lohkossa voi olla eri rivit, koska Nginxissä on monia tapoja tehdä konfigurointi.

Rivi, jonka haluat muuttaa, on:

try_files $uri /index.html;

Tämä kertoo Nginxille, että olemattomat tiedostot käsitellään /index.html-tiedoston avulla, ja frontend-pakettisi hoitaa loput.

Lopuksi muista ladata Nginx-konfiguraatiot uudelleen: