Implementacija vaše React aplikacije na server predstavlja ključan korak u procesu razvoja. Nginx se ističe kao izuzetno efikasan i široko rasprostranjen veb server koji se često bira za hostovanje React aplikacija, dok je Ubuntu popularan operativni sistem za veb servere. Ovaj vodič će vam detaljno objasniti proces postavljanja vaše React aplikacije sa Nginx-om na Ubuntu serveru, uz primenu najboljih praksi.
1. Preduslovi
Pre nego što započnemo, uverite se da ispunjavate sledeće uslove:
- Ubuntu server: Možete koristiti virtuelno okruženje ili fizički server.
- Node.js i npm: React aplikacija zahteva Node.js i npm za izradu i pokretanje.
- Git: Neophodan je za preuzimanje vašeg koda iz Git repozitorijuma.
- Nginx: Nginx veb server je potreban za hostovanje vaše React aplikacije.
2. Instalacija Node.js i npm
Na Ubuntu sistemu, Node.js i npm se jednostavno instaliraju pomoću menadžera paketa apt:
sudo apt update
sudo apt install nodejs
Proverite da li je instalacija uspešno obavljena:
node -v
npm -v
3. Instalacija Nginx-a
Instalirajte Nginx pomoću apt komande:
sudo apt update
sudo apt install nginx
Proverite da li je Nginx pokrenut:
sudo systemctl status nginx
Ako Nginx nije pokrenut, startujte ga:
sudo systemctl start nginx
4. Kreiranje React aplikacije
Možete kreirati novu React aplikaciju koristeći create-react-app:
npx create-react-app my-react-app
Zatim se prebacite u direktorijum vaše aplikacije:
cd my-react-app
5. Instaliranje zavisnosti
Pre nego što napravite build vaše aplikacije, uverite se da su instalirane sve potrebne zavisnosti:
npm install
6. Izrada build-a React aplikacije
Izradite build vaše React aplikacije za produkciju:
npm run build
Ovo će kreirati direktorijum build koji sadrži vaš optimizovani kod za produkciju.
7. Konfigurisanje Nginx-a
Konfigurišite Nginx da služi vašu React aplikaciju. Otvorite konfiguracioni fajl nginx.conf:
sudo nano /etc/nginx/sites-available/default
Zamenite sadržaj fajla sa sledećim:
server {
listen 80;
server_name your-domain.com;
root /path/to/your/react/app/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
Zamenite your-domain.com sa vašim domenskim imenom i /path/to/your/react/app/build sa putanjom do direktorijuma build vaše React aplikacije.
8. Ponovno pokretanje Nginx-a
Ponovo pokrenite Nginx da biste primenili promene konfiguracije:
sudo systemctl reload nginx
9. Provera
Otvorite vaš veb pretraživač i unesite vaš domen your-domain.com. Trebalo bi da vidite vašu React aplikaciju koja radi.
Zaključak
Implementacija React aplikacije sa Nginx-om na Ubuntu-u je relativno jednostavan proces. Prateći ove korake, možete postaviti vašu React aplikaciju na veb server i učiniti je dostupnom korisnicima širom sveta.
Često postavljana pitanja
- Kako da konfigurišem Nginx za SSL sertifikate?
Možete koristiti ssl_certificate i ssl_certificate_key direktive u vašem nginx.conf fajlu.
server {
listen 443 ssl;
server_name your-domain.com;
ssl_certificate /path/to/your/certificate.crt;
ssl_certificate_key /path/to/your/key.key;
root /path/to/your/react/app/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
Zamenite /path/to/your/certificate.crt i /path/to/your/key.key sa putanjama do vaših SSL sertifikata.
Možete kreirati odvojene server blokove u vašem nginx.conf fajlu za svaku React aplikaciju, koristeći server_name direktivu za različite domene.
server {
listen 80;
server_name app1.your-domain.com;
root /path/to/app1/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
server {
listen 80;
server_name app2.your-domain.com;
root /path/to/app2/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
Za React Router, Nginx ne mora da radi ništa posebno. React Router rutira zahteve na klijentskoj strani, a Nginx samo služi statički sadržaj.
Možete koristiti platforme za postavljanje kao što su Heroku, Netlify, Vercel, AWS, Google Cloud Platform, Azure za jednostavno postavljanje vaše React aplikacije. Ove platforme nude automatsko postavljanje, skaliranje, nadgledanje, sigurnost i bezbednost.
Nginx ima ugrađenu funkcionalnost za nadgledanje. Možete koristiti fajl access.log da biste pratili pristup veb serveru.
Postoji mnogo načina da optimizujete Nginx, uključujući optimizaciju konfiguracije, keširanje, kompresiju, korišćenje CDN-a i optimizaciju React aplikacije.
Kada ažurirate vašu React aplikaciju, samo ponovo napravite build aplikacije, kopirajte build fajl na server i ponovo pokrenite Nginx.
Možete pristupiti Nginx konzoli pomoću ssh (Secure Shell) klijenta. Kroz SSH možete koristiti sudo komande za upravljanje Nginx-om.
Postoje mnogi alati za debagovanje Nginx-a, uključujući nginx -t komandu za proveru konfiguracije, nginx -V komandu za proveru verzije, nginx -s reload komandu za ponovno pokretanje Nginx-a, kao i korišćenje fajla error.log za greške.
Možete obezbediti Nginx koristeći HTTPS, koristeći zaštitni zid, uključivanje ngx_http_auth_basic_module za osnovnu autentifikaciju i korišćenje ngx_http_access_module za upravljanje pristupom.
Tagovi: React, Nginx, Ubuntu, Postavljanje, Veb Aplikacije, Server, Veb Razvoj, Konfiguracija, Debagovanje, HTTPS, SSL, Veb Sigurnost, CDN