Kako postaviti React aplikaciju na VPS uz Nginx (2026)

Kako postaviti React aplikaciju na VPS uz Nginx (2026)

Postavljanje React aplikacije na VPS uz Nginx odličan je način da preuzmete potpunu kontrolu nad hostingom, smanjite troškove i poboljšate performanse svoje web aplikacije. Dok servisi poput Vercela, Netlifyja ili Rendera nude jednostavan deployment, VPS vam daje veću fleksibilnost i mogućnost hostanja više projekata na jednom serveru.

Mnogi developeri smatraju deployment najstresnijim dijelom projekta, no uz pravilnu konfiguraciju React aplikaciju možete postaviti na VPS za svega nekoliko minuta.

U ovom vodiču pokazat ćemo vam točno kako deployati React aplikaciju na VPS koristeći Nginx, SSL certifikat i najbolje prakse za 2026. godinu.

Što vam je potrebno?

Prije početka pripremite:

  • VPS server (Ubuntu 24.04 ili noviji)
  • registriranu domenu
  • React aplikaciju
  • SSH pristup serveru
  • instaliran Node.js

Odabir VPS servera

Za ovaj vodič koristit ćemo VPS server, a jedna od najpopularnijih opcija među developerima danas je Hostinger VPS.

Prednosti Hostinger VPS-a:

  • jednostavno kreiranje VPS instance u nekoliko minuta
  • odličan omjer cijene i performansi
  • potpuni root pristup serveru
  • podrška za Node.js, React, Next.js i druge moderne tehnologije
  • mogućnost hostanja više aplikacija na jednom serveru
  • ugrađeni alati za backup i monitoring
  • podatkovni centri na više lokacija diljem svijeta

Za manje React projekte često je dovoljan početni VPS paket, dok za zahtjevnije aplikacije možete jednostavno nadograditi resurse bez migracije na drugi server.

U ovom vodiču koristit ćemo Ubuntu Linux na VPS serveru, no isti postupak vrijedi i za većinu drugih VPS providera.

Prijava na VPS

Prijavite se putem SSH-a:

ssh root@your-server-ip

Ili:

ssh deployer@your-server-ip

Nakon prijave ažurirajte server:

sudo apt update
sudo apt upgrade -y

Instalacija Node.js

Provjerite je li Node.js instaliran:

node -v

Ako nije:

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

sudo apt install -y nodejs

Provjera:

node -vnpm -v

Upload React aplikacije na server

Postoji više načina:

Git Clone

Najčešći način:

git clone https://github.com/username/project.git

Ulazak u direktorij:

cd project

SCP Upload

Ako ne koristite Git:

scp -r ./project deployer@server-ip:/home/deployer/

Instalacija paketa

Unutar projekta:

npm install

ili

pnpm install

Build React aplikacije

Za produkciju napravite build:

npm run build

Nakon builda dobit ćete:

dist/

ili

build/

ovisno o frameworku.

Instalacija Nginxa

Instalirajte Nginx:

sudo apt install nginx -y

Pokrenite servis:

sudo systemctl enable nginxsudo systemctl start nginx

Provjera:

sudo systemctl status nginx

Kreiranje Nginx konfiguracije

Napravite novu konfiguraciju:

sudo nano /etc/nginx/sites-available/myapp

Primjer konfiguracije:

server {
    listen 80;
    server_name example.com www.example.com;

    root /home/deployer/project/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

Spremite datoteku.

Aktiviranje konfiguracije

Kreirajte symbolic link:

sudo ln -s /etc/nginx/sites-available/myapp \
/etc/nginx/sites-enabled/

Provjerite konfiguraciju:

sudo nginx -t

Ako nema grešaka:

sudo systemctl reload nginx

Konfiguracija React Routera

Ako koristite React Router, direktno otvaranje URL-a može vratiti 404 grešku.

Zato koristimo:

location / {
    try_files $uri /index.html;
}

Ovo osigurava da React preuzima routing.

Spajanje domene

Kod svog registrara postavite:

A Record

Primjer:

@123.123.123.123

i

www123.123.123.123

Pričekajte DNS propagaciju.

Instalacija SSL certifikata

Instalirajte Certbot:

sudo apt install certbot \
python3-certbot-nginx -y

Pokrenite:

sudo certbot --nginx

Odaberite domenu.

Certbot će automatski:

  • generirati SSL
  • konfigurirati HTTPS
  • postaviti redirect

Automatsko obnavljanje SSL certifikata

Provjera:

sudo certbot renew --dry-run

Certbot automatski obnavlja certifikate svakih 90 dana.

Gzip kompresija

Dodajte u Nginx:

gzip on;
gzip_types text/plain text/css application/json;
gzip_types application/javascript;

Prednosti:

  • manje datoteke
  • brže učitavanje
  • bolji Core Web Vitals

Cache konfiguracija

Za statičke datoteke:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

To značajno smanjuje broj zahtjeva prema serveru.

Deployment novih verzija

Nakon promjena:

git pull
npm install
npm run build

Zatim:

sudo systemctl reload nginx

Ako koristite CI/CD, ovaj proces može biti potpuno automatiziran.

Bonus: Jednostavan deployment script

Primjer:

#!/bin/bash

git pull

npm install

npm run build

sudo systemctl reload nginx

echo "Deployment uspješno završen."

Pokretanje:

chmod +x deploy.sh

./deploy.sh

Najčešće greške

404 na refresh stranice

Uzrok:

try_files

nije konfiguriran.

SSL ne radi

Provjerite:

sudo certbot certificates

Nginx ne učitava promjene

Pokrenite:

sudo nginx -t

sudo systemctl reload nginx

Build folder ne postoji

Provjerite:

npm run build

i putanju definiranu u Nginx konfiguraciji.

FAQ

Trebam li PM2 za React aplikaciju?

Ako deployate statički React build preko Nginxa, PM2 nije potreban.

Je li VPS brži od Netlifyja ili Vercela?

Ovisi o konfiguraciji, ali VPS vam daje veću kontrolu i mogućnost hostanja više projekata.

Mogu li hostati više React aplikacija na jednom VPS-u?

Da. Dovoljno je kreirati zasebnu Nginx konfiguraciju za svaku domenu ili subdomenu.

Koji VPS je najbolji za React aplikacije?

Za manje projekte dovoljan je VPS s 1–2 GB RAM-a. Za veće aplikacije preporučuje se najmanje 4 GB RAM-a.

Zaključak

Deployanje React aplikacije na VPS uz Nginx možda na prvi pogled djeluje komplicirano, ali jednom kada postavite infrastrukturu, dobivate potpunu kontrolu nad svojim projektom.

Uz pravilnu konfiguraciju:

  • aplikacija će biti brza
  • HTTPS će biti automatski riješen
  • React Router će raditi bez problema
  • hosting troškovi bit će niži

Za developere koji žele veću fleksibilnost i profesionalniji pristup hostanju, VPS i Nginx i dalje su jedno od najboljih rješenja u 2026. godini. 🚀

Povezani članci