bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • django_react_produccio
django_react_produccio

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
django_react_produccio [2026/04/13 09:24]
enric_mieza_sanchez [ReactJS] 		django_react_produccio [2026/04/13 10:58] (actual)
enric_mieza_sanchez [Configurar Apache2] super per isard user
Línia 38: Línia 38:
  
 Abans de començar necessitem disposar de: Abans de començar necessitem disposar de:
-  * Un projecte Django amb React, ja sigui en un sol repo en o en repositoris separats. Si no en tens cap, pots fer servir [[https://github.com/emieza/django-react|aquest repo de minibiblio]]. +  * Un **projecte Django amb React**, ja sigui en un sol repo en o en repositoris separats. Si no en tens cap, pots fer servir [[https://github.com/emieza/django-react|aquest repo de minibiblio]]. 
-  * Un servidor operatiu amb accés SSH i amb un domnini configurat que l'hi apunta elmeudomini.com . L'article es fa amb un Debian o Ubuntu LTS.+  * Un **servidor** operatiu amb accés SSH i amb un domnini configurat que l'hi apunta elmeudomini.com . L'article es fa amb un **Debian o Ubuntu LTS**. 
 + 
 +Assumim que el servidor que disposem és dedicat únicament a aquesta app. És possible configurar diverses aplicacions en un server, però en ares de la simplicitat ho plategem així.
  
 \\ \\
Línia 71: Línia 73:
  
 Assumim que el projecte Django utilitza un plugin com ''django-environ'' o ''django-dotenv'' per a la gestió de les credencials. Si no ho tens, pots fer un cop d'ull a l'article [[Django React#django-environ i el vcs]]. Assumim que el projecte Django utilitza un plugin com ''django-environ'' o ''django-dotenv'' per a la gestió de les credencials. Si no ho tens, pots fer un cop d'ull a l'article [[Django React#django-environ i el vcs]].
 +
 +També assumim que instal·larem l'aplicació Django al //home directory// de l'usuari principal del sistema, com ''super'' o ''isard''. També seria adequat fer-ho en una carpeta de sistema (p.ex. ''/var/www/'') si es tractés d'un entorn multiusuari, situació menys freqüent actualment ja que es sol tenir un contenidor LXC o VM específic per a cada aplicació.
  
 <code bash> <code bash>
Línia 152: Línia 156:
  
 ===== Configurar Apache2 ===== ===== Configurar Apache2 =====
 +
 +\\
 +
 +=== Permisos de carpetes ===
  
 Probablement haureu clonat el repositori del projecte al //home directory// de l'usuari que tingueu, per exemeple ''super'' o ''isard''. Aquesta carpeta del //home directory// com ''/home/super/'' sol tenir permisos restringits per protegir les dades en sistemes multiusuari, però com que no és el nostre cas (assumim un entorn monousuari), podem **obrir els permisos per facilitar que Apache pugui arribar i llegir les carpetes del projecte**: Probablement haureu clonat el repositori del projecte al //home directory// de l'usuari que tingueu, per exemeple ''super'' o ''isard''. Aquesta carpeta del //home directory// com ''/home/super/'' sol tenir permisos restringits per protegir les dades en sistemes multiusuari, però com que no és el nostre cas (assumim un entorn monousuari), podem **obrir els permisos per facilitar que Apache pugui arribar i llegir les carpetes del projecte**:
Línia 159: Línia 167:
 \\ \\
  
 +=== Arxius estàtics Django ===
 +Necessitem recollir tots els arxius estàtics del projecte Django per servir-los a la URL ''/static''. La instrucció ''collectstatic'' ens ho facilitarà, però abans caldrà modificar ''settings.py'' per indicar el nom de la carpeta d'arxius estàtics. Localitzeu la línia amb:
 +  STATIC_URL = 'static/'
 +
 +I afegiu a darrera el nom de la carpeta o vulgueu els arxius estàtics (podeu triar el nom):
 +  STATIC_ROOT = 'static/'
 +
 +Ara ja podeu recollir tots els arxius estàtics de l'app Django i del seu //admin panel//:
 +  (env) $ ./manage.py collectstatic
 +
 +\\
 +
 +=== Instal·lem Apache ===
 +
 +Ara sí! Instal·lem Apache i el mòdul ''mod_wsgi'' que ens permetrà connectar Apache a l'app Python. WSGI és un estàndard de comunicació entre servidors i aplicacions web (Web Server Gateway Interface), tot que es fa servir bàsicament en aquestes apps Python com Django, Flask o FastAPI.
 +
 +  $ sudo apt install apache2 libapache2-mod-wsgi-py3
 +  $ sudo a2enmod rewrite
 +
 +\\
 +
 +=== Configuració Apache ===
 +
 +La configuració, com hem vist al principi, no és senzilla. Recopilem el què anem a fer:
 +  * **Django**:
 +    * Rutes de processament:
 +      * ''/api'' : React necessita interactuar amb l'app per aquesta via.
 +      * ''/admin'' : l'//admin panel// de Django que ens permet tenir un CRUD fàcil de tots els elements de la BD sense haver de realitzar gaire codi.
 +    * ''/static'': arxius estàtics, bàsicament per a l'//admin panel//.
 +    * ''/media'': arxius media (càrregues, uploads).
 +  * **ReactJS**: es compila l'aplicació que queda reduïda a uns pocs arxius estàtics, amb un sol punt d'entrada.
 +    * ''/'': arxius estàtics, únic arxiu a ''index.html''
 +    * ''/assets'': resta d'arxius estàtics
 +
 +
 +Assumim que tenim una configuració monousuari i monoaplicació (una VM o CT dedicat per a aquesta app). En aquest cas podeu implementar directament a la site per defecte d'Apache ''/etc/apache2/sites-available/000-default.conf'':
 +
 +<file apache /etc/apache2/sites-available/000-default.conf>
 +<VirtualHost *:80>
 + # Si només tenim 1 domini, no cal anomenar-lo
 + #ServerName www.example.com
 +
 + WSGIDaemonProcess myapp python-home=/home/super/django-react/env python-path=/home/super/django-react
 + WSGIProcessGroup myapp
 + WSGIScriptAlias / /home/super/django-react/djangoreact/wsgi.py
 +
 + <Directory /home/super/django-react/djangoreact>
 + <Files wsgi.py>
 + Require all granted
 + </Files>
 + </Directory>
 +
 + Alias /static/ /home/super/django-react/static/
 + <Directory /home/super/django-react/static>
 + Require all granted
 + </Directory>
 + Alias /media/ /home/super/django-react/media/
 + <Directory /home/super/django-react/media>
 + Require all granted
 + </Directory>
 +
 + # REACT FRONTEND
 + Alias /assets /home/super/django-react/react/dist/assets/
 + Alias /index.html /home/super/django-react/react/dist/index.html
 + AliasMatch ^/$ /home/super/django-react/react/dist/index.html
 + <Directory /home/super/django-react/react/dist>
 + Require all granted
 + </Directory>
 +
 + # Regla de reescriptura per a React Router
 + # Les rutes conegudes no entren: /admin /api /static /media i /assets
 + # La resta de rutes van a dist/index.html (React Router)
 + RewriteEngine On
 + RewriteCond %{REQUEST_URI} !^/admin
 + RewriteCond %{REQUEST_URI} !^/api
 + RewriteCond %{REQUEST_URI} !^/static
 + RewriteCond %{REQUEST_URI} !^/media
 + RewriteCond %{REQUEST_URI} !^/assets
 + RewriteCond %{REQUEST_FILENAME} !-f
 + RewriteRule ^ /home/super/django-react/react/dist/index.html [L]
 +
 + ServerAdmin webmaster@localhost
 + DocumentRoot /var/www/html
 +
 + ErrorLog ${APACHE_LOG_DIR}/error.log
 + CustomLog ${APACHE_LOG_DIR}/access.log combined
 +</VirtualHost>
 +</file>
 +
 +Reinicia Apache amb:
 +  $ sudo systemctl restart apache2.service
 +
 +\\
 +
 +===== Comprovacions =====
 +
 +Si no et dona errors al reiniciar Apache, prova les següents comprovacions.
 +
 +Django funciona a ''/api'' i ''/admin'':
 +  $ curl https://elmeudomini.com/api/llibres
 +  $ curl https://elmeudomini.com/admin
 +
 +Si no es veu des de fora amb el domini, intenta comprovar que sí que funciona des de dins:
 +  $ curl http://localhost/api/llibres
 +  $ curl http://localhost/admin
 +
 +En particular, comprova que els arxius estàtics es veuen quan anem a ''/admin''.
 +
 +Funciona el //frontend// de React a https://elmeudomini.com (amb el navegador).
 +
 +Si no es veu des de fora, intenta la comprovació interna:
 +  $ curl http://localhost
 +
 +Si apareix la pàgina de React però no carrega les dades de l'API, obre la consola de Javascript del navegador i investiga el problema que estigui succeint (CORS, etc.)
 +
 +\\
 +
 +===== Media Uploads =====
 +Comproveu que es pot accedir a ''/admin'' i que podeu afegir llibres amb imatges.
 +
 +Si us dona problemes, segurament és que necessitareu donar permisos a ''/media'' perquè Apache hi pugui escriure:
 +
 +  $ sudo chown -R www-data /home/super/django-react/media
  
django_react_produccio.1776072261.txt.gz · Darrera modificació: 2026/04/13 09:24 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki