Како распоредити React апликацију са Nginx-ом на Ubuntu-у

Преглед садржаја

Како распоредити React апликацију са Nginx-ом на Ubuntu-у

Размештање ваше React апликације на сервер је важан корак у процесу развоја. Nginx је моћан и популаран веб сервер који се често користи за сервис React апликација, а Ubuntu је популаран оперативни систем за веб сервере. Овај водич ће вас провести кроз процес размештања ваше React апликације са Nginx-ом на Ubuntu-у, користећи се најбољим праксама.

1. Предпоставки

Пре него што почнемо, уверите се да имате следеће:

* Ubuntu сервер: Можете користити виртуелно окружење или физички сервер.
* Node.js и npm: React апликација захтева Node.js и npm за изградњу и покретање.
* Git: Потребан је за преузимање вашег кода из Git репозиторијума.
* Nginx: Nginx веб сервер је потребан за сервис ваше React апликације.

2. Инсталирајте Node.js и npm

На Ubuntu-у, Node.js и npm се лако инсталирају помоћу менеџера пакета apt:

bash sudo apt update sudo apt install nodejs

Проверите да ли је инсталација успешна:

bash node -v npm -v

3. Инсталирајте Nginx

Инсталирајте Nginx помоћу apt:

bash sudo apt update sudo apt install nginx

Проверите да ли је Nginx покренут:

bash sudo systemctl status nginx

Ако Nginx није покренут, покрените га:

bash sudo systemctl start nginx

4. Креирајте React апликацију

Можете креирати нову React апликацију користећи create-react-app:

bash npx create-react-app my-react-app

Затим се пребаците у директоријум ваше апликације:

bash cd my-react-app

5. Уградите ваша React зависности

Пре него што изградите вашу апликацију, уверите се да су инсталиране све потребне зависности:

bash npm install

6. Изградите вашу React апликацију

Изградите вашу React апликацију за производњу:

bash npm run build

Ово ће креирати директоријум build који садржи ваш оптимизовани код за производњу.

7. Конфигуришите Nginx

Конфигуришите Nginx да служи вашу React апликацију. Отворите конфигурациони фајл nginx.conf:

bash sudo nano /etc/nginx/sites-available/default

Замените садржај фајла са следећим:

nginx 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; } }

Замените your-domain.com са вашим доменским именом и /path/to/your/react/app/build са путањом до директоријума build ваше React апликације.

8. Поново покрените Nginx

Поново покрените Nginx да бисте применили промене конфигурације:

bash sudo systemctl reload nginx

9. Провера

Отворите ваш веб прегледач и унесите ваш домен your-domain.com. Требало би да видите вашу React апликацију која ради.

Закључак

Размештање React апликације са Nginx-ом на Ubuntu-у је релативно једноставан процес. Користећи ове кораке, можете да поставите вашу React апликацију на веб сервер и направите је доступном целом свету.

Честа питања

* Како да конфигуришем Nginx за SSL сертификате?

Можете користити ssl_certificate и ssl_certificate_key директиве у вашем nginx.conf фајлу.

nginx 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; } }

Замените /path/to/your/certificate.crt и /path/to/your/key.key са путањама до ваших SSL сертификата.

* Како да конфигуришем Nginx за више React апликација?

Можете креирати одвојене блокове сервера у вашем nginx.conf фајлу за сваку React апликацију, користећи server_name директиву за различите домене.

nginx 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; } }

* Како да конфигуришем Nginx за React Router?

За React Router, Nginx не треба да ради ништа посебно. React Router рутира захтеве на клијентској страни, а Nginx само служи статички садржај.

* Како да постављам React апликацију на производни сервер?

Можете да користите платформе за размештање као што су Heroku, Netlify, Vercel, AWS, Google Cloud Platform, Azure, за једноставно размештање ваше React апликације. Ове платформе нуде аутоматско размештање, скалирање, надгледање, сигурност и безбедност.

* Како да надгледам Nginx?

Nginx има уграђену функционалност за надгледање. Можете да користите фајл access.log да бисте надгледали приступ веб серверу.

* Како да оптимизујем Nginx?

Постоје многи начини да оптимизујте Nginx, укључујући оптимизацију конфигурације, кеширање, компресију, коришћење CDN-а, и оптимизацију React апликације.

* Како да ажурирам React апликацију након размештања?

Када ажурирате вашу React апликацију, само поново изградите апликацију, копирајте build фајл на сервер и поново покрените Nginx.

* Како да приступим Nginx консоли?

Можете да приступите Nginx консоли помоћу ssh (Secure Shell) клијента. Кроз SSH можете да користите sudo команде за управљање Nginx-ом.

* Како да дебагујем Nginx?

Постоје многи алати за дебаговање Nginx-а, укључујући nginx -t команду за проверу конфигурације, nginx -V команду за проверу верзије, nginx -s reload команду за перезапуштање Nginx-а, као и коришћење фајла error.log за грешке.

* Како да обезбедим Nginx?

Можете да обезбедите Nginx користећи HTTPS, користећи фајлвал, укључивање ngx_http_auth_basic_module за основну аутентификацију, и коришћење ngx_http_access_module за управљање приступом.

Тагови: React, Nginx, Ubuntu, Размештање, Веб Апликације, Сервер, Веб Развој, Конфигурација, Дебаговање, HTTPS, SSL, Веб Сигурност, CDN