React.js és una biblioteca de Javascript que s'utilitza per crear interfícies d'usuari ràpides i interactives per a aplicacions d'una sola pàgina. A causa de la seva flexibilitat i simplicitat, és la primera opció de qualsevol desenvolupador per al desenvolupament d'aplicacions mòbils i web. Permet compondre interfícies d'usuari complexes a partir de peces de codi petites i aïllades anomenades "components". Actualment, la fan servir moltes empreses, incloses Facebook, Instagram, Twitter, Airbnb i més.
En aquest tutorial, t'ensenyem a implementar una aplicació React.js amb Nginx a Ubuntu 20.04.
Requisits
- Un servidor al núvol Ubuntu 20.04.
- Un nom de domini vàlid que apunti a la IP del teu servidor.
- Un usuari root o amb privilegis sudo.
Instal·la Node.js
Abans de començar, Node.js i NPM han d'estar instal·lats al teu servidor. Si no és així, has d'afegir el repositori Nodesource al teu sistema.
Primer, instal·la les dependències necessàries amb l'ordre següent:
# apt-get update && apt-get upgrade && apt-get install curl gnupg2 gcc g++ make libssl-dev -yA continuació, afegeix el repositori Nodesource amb l'ordre que et mostrem a continuació:
# curl -sL https://deb.nodesource.com/setup_current.x -o nodesource_setup.sh && bash nodesource_setup.shPer continuar, instal·la Node.js i NPM amb l'ordre següent:
# apt-get install nodejs -y && npm install npm@latest -gUn cop instal·lat, pots verificar la versió de Node.js i NPM amb l'ordre següent:
# node --version && npm --versionHauries de veure la versió de Node.js i NPM de la manera següent:
v16.10.0
7.24.2
Instal·la la utilitat create-react-app
create-react-app és una eina de línia d'ordres que s'utilitza per configurar totes les eines necessàries per crear una aplicació React. Pots instal·lar-la amb l'ordre següent:
# npm -g install create-react-appUn cop instal·lada, verifica la versió instal·lada amb l'ordre següent:
# create-react-app --versionHauries de veure el resultat següent:
4.0.3Crea la teva primera aplicació React
En aquest apartat crearàs una aplicació React anomenada reactapp dins del directori /root:
# create-react-app reactappHauries d'obtenir el resultat següent:
Success! Created reactapp at /root/reactapp
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 reactapp
npm start
Happy hacking!
Per iniciar la teva aplicació, has d'anar al directori i executar l'ordre següent:
# cd ~/reactapp && npm startHauries de veure el resultat següent:
Compiled successfully!
You can now view reactapp in the browser.
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build
Prem "CTRL+C" per aturar l'aplicació.
Crea una compilació de producció per a la teva aplicació
En aquest punt, tens un projecte d'aplicació React que s'executa correctament. Ara hauràs de crear una compilació de producció. Pots fer-ho amb l'ordre següent:
# npm run buildAixò compilarà JavaScript i els seus recursos al directori de compilació, tal com es mostra més avall:
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.34 KB build/static/js/2.8d09931e.chunk.js
1.62 KB build/static/js/3.07870480.chunk.js
1.16 KB build/static/js/runtime-main.73bd03cc.js
589 B build/static/js/main.1dd9d4b2.chunk.js
556 B build/static/css/main.a617e044.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deploymentEn aquest punt, ja tens un directori de compilació dins del directori de la teva aplicació React. Ara hauràs de desplegar aquest directori amb Nginx.
Configura Nginx per desplegar l'aplicació React
En primer lloc, instal·la el paquet del servidor Nginx amb l'ordre següent:
# apt-get install nginx python3-certbot-nginx -yUn cop s'hagi instal·lat Nginx, crea un directori per a l'aplicació React amb l'ordre següent:
# mkdir /var/www/html/reactA continuació, copia tot el contingut del directori de compilació al directori React:
# cp -r /root/reactapp/build/* /var/www/html/react/En el pas següent, estableix la propietat adequada del directori React amb l'ordre següent:
# chown -R www-data:www-data /var/www/html/reactPer continuar, crea un fitxer de configuració d'amfitrió virtual de Nginx per allotjar la teva aplicació React:
# nano /etc/nginx/sites-enabled/react.confAfegeix les línies següents:
server {
listen 80;
listen [::]:80;
root /var/www/html/react/;
index index.html index.htm;
# MODIFICA L'EXEMPLE DE SERVER_NAME
server_name react.ejemplo.com;
location / {
try_files $uri $uri/ =404;
}
}Desa i tanca el fitxer i després verifica Nginx per evitar qualsevol error de sintaxi:
# nginx -tSi tot ha anat bé, hauries d'obtenir el resultat següent:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
Reinicia el servei Nginx per aplicar els canvis:
# systemctl restart nginxPer acabar, pots utilitzar certbot per obtenir un certificat per al registre:
# certbot --nginx -d react.ejemplo.com --redirectAccedeix a l'aplicació React.js
Per acabar, obre el navegador web i accedeix a l'aplicació React.js des de l'URL https://react.example.com. Hauries de veure la pantalla següent:
Conclusió
Amb aquesta guia, has instal·lat React.js correctament i has creat una aplicació en React! Ja pots desplegar la teva pròpia aplicació React.js en un entorn de producció.