ReactJS je bezplatná knihovna JavaScript s otevřeným zdrojovým kódem, která se používá k vytváření opakovaně použitelných komponent uživatelského rozhraní. Byl vyvinut společností Facebook v roce 2011 pro rychlé a efektivní vytváření bohatých a poutavých webových aplikací s minimálním kódováním. Umožňuje vytvářet interaktivní prvky na webových stránkách. Využívá virtuální DOM, díky kterému je aplikace rychlá. Nabízí bohatou sadu funkcí včetně virtuálního DOM, jednosměrné vazby dat, komponent, JSX, podmíněných příkazů a mnoha dalších.
V tomto tutoriálu vám ukážeme, jak nainstalovat aplikaci Create Reag a hostovat aplikaci ReactJS s webovým serverem Nginx na Ubuntu 20.04.
Předpoklady
- Server se systémem Ubuntu 20.04 s minimálně 2 GB RAM.
- Platný název domény označený IP adresou vašeho serveru. V tomto tutoriálu použijeme doménu reaktjs.example.com.
- Na serveru je nakonfigurováno heslo uživatele root.
Začínáme
Před spuštěním se vždy doporučuje aktualizovat systémové balíčky na nejnovější verzi. Můžete je aktualizovat spuštěním následujícího příkazu:
apt-get update -y
Po aktualizaci všech balíčků nainstalujte další požadované závislosti spuštěním následujícího příkazu:
apt-get install curl gnupg2 -y
Jakmile jsou všechny závislosti nainstalovány, můžete přejít k dalšímu kroku.
Instalovat Node.js
Dále budete muset nainstalovat Node.js na váš server. Ve výchozím nastavení není nejnovější verze Node.js dostupná ve standardním úložišti Ubuntu 20.04. Budete tedy muset nainstalovat Node.js z oficiálního úložiště Node.js.
Nejprve přidejte úložiště Node.js pomocí následujícího příkazu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Dále spusťte následující příkaz k instalaci souboru Node.js do vašeho systému:
apt-get install nodejs -y
Po instalaci Node.js aktualizujte NPM na nejnovější verzi pomocí následujícího příkazu:
npm install [email protected] -g
Měli byste získat následující výstup:
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js + [email protected] updated 2 packages in 12.78s
Dále ověřte nainstalovanou verzi Node.js pomocí následujícího příkazu:
node -v
Měli byste získat následující výstup:
v14.15.3
Jakmile budete hotovi, můžete přejít k dalšímu kroku.
Instalovat nástroj Create React App Tool
Create React App je nástroj, který šetří váš čas na nastavení a konfiguraci. Stačí spustit jediný příkaz a Create React App nastaví všechny nástroje potřebné ke spuštění vašeho projektu.
Nástroj Create React App můžete nainstalovat pomocí následujícího příkazu:
npm install -g create-react-app
Měli byste získat následující výstup:
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js + [email protected] added 67 packages from 25 contributors in 4.705s
Jakmile budete hotovi, můžete přejít k dalšímu kroku.
Vytvořte si aplikaci First React
V této části vám ukážeme, jak vytvořit aplikaci React pomocí nástroje Create React App.
Nejprve změňte adresář na /opt a vytvořte svůj první projekt pomocí následujícího příkazu:
cd /opt
create-react-app reactproject
Měli byste vidět následující výstup:
Success! Created reactproject at /opt/reactproject
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd reactproject
npm start
Happy hacking!
Dále změňte adresář na svůj projekt a spusťte aplikaci pomocí následujícího příkazu:
cd /opt/reactproject
npm start
Měli byste získat následující výstup:
Compiled successfully! You can now view reactproject in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Stiskněte CTRL+C pro zastavení aplikace.
Vytvoření spouštěcího souboru pro aplikaci React
Pokud chcete aplikaci React spouštět automaticky při restartu systému, budete muset pro svou aplikaci React vytvořit službu systemd. Svou aplikaci tedy můžete snadno spravovat pomocí příkazu systemctl. Soubor služby systemd můžete vytvořit pomocí následujícího příkazu:
nano /lib/systemd/system/react.service
Přidejte následující řádky:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/opt/reactproject ExecStart=npm start -- --port=3000
Uložte a zavřete soubor a poté znovu načtěte démona systemd pomocí následujícího příkazu:
systemctl daemon-reload
Dále spusťte službu React a povolte její spuštění při restartu systému spuštěním následujícího příkazu:
systemctl start react
systemctl enable react
Stav služby React můžete ověřit pomocí následujícího příkazu:
systemctl status react
Měli byste získat následující výstup:
? react.service
Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
Main PID: 30833 (node)
Tasks: 30 (limit: 4691)
Memory: 141.0M
CGroup: /system.slice/react.service
??30833 npm
??30844 sh -c react-scripts start "--port=3000"
??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000
Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...
Jakmile budete hotovi, můžete přejít k dalšímu kroku.
Konfigurace Nginx pro aplikaci React
Je dobré nainstalovat a nakonfigurovat Nginx jako reverzní proxy pro aplikaci React. Ke své aplikaci tedy můžete přistupovat přes port 80.
Nejprve nainstalujte balíček Nginx pomocí následujícího příkazu:
apt-get install nginx -y
Jakmile je Nginx nainstalován, vytvořte nový konfigurační soubor virtuálního hostitele Nginx:
nano /etc/nginx/sites-available/reactjs.conf
Přidejte následující řádky:
upstream backend {
server localhost:3000;
}
server {
listen 80;
server_name reactjs.example.com;
location / {
proxy_pass http://backend/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forward-Proto http;
proxy_set_header X-Nginx-Proxy true;
proxy_redirect off;
}
}
Uložte a zavřete soubor a poté povolte virtuálního hostitele Nginx pomocí následujícího příkazu:
ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/
Dále ověřte, zda Nginx neobsahuje nějakou chybu syntaxe spuštěním následujícího příkazu:
nginx -t
Měli byste získat následující výstup:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
Nakonec restartujte službu Nginx, aby se změny projevily:
systemctl restart nginx
Stav služby Nginx můžete také ověřit pomocí následujícího příkazu:
systemctl status nginx
Měli byste vidět následující výstup:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
Docs: man:nginx(8)
Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 30915 (nginx)
Tasks: 3 (limit: 4691)
Memory: 3.6M
CGroup: /system.slice/nginx.service
??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
??30916 nginx: worker process
??30917 nginx: worker process
Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.
V tomto okamžiku je Nginx nainstalován a nakonfigurován tak, aby sloužil React App. Nyní můžete přejít k dalšímu kroku.
Přístup k webovému rozhraní aplikace React
Nyní otevřete webový prohlížeč a zadejte adresu URL http://reactjs.example.com . Budete přesměrováni na webové rozhraní React.Js na následující obrazovce:
Závěr
Gratulujeme! úspěšně jste nainstalovali a nakonfigurovali React.Js na serveru Ubuntu 20.04. Doufám, že nyní máte dostatek znalostí k nasazení vlastní aplikace React v produkčním prostředí. Neváhejte se mě zeptat, pokud máte nějaké otázky.