bytes.cat

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ó

--- django_react_produccio [2026/04/13 09:16]
enric_mieza_sanchez [Django]
+++ 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:
-  * 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]].
+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>
@@ Línia 139: / Línia 143: @@
 </code>
-Editeu ''src/config.js'', bàsicament canviar les URLs d'accés amb l'esquema complert de **https://elmeudomini.com** :
+Editeu ''src/config.js'', bàsicament canviar les URLs d'accés amb l'esquema complert de **https://elmeudomini.com** .
+Un cop configurat amb els dominis adequats, podem compilar l'app React.
   $ npm run build
+<WRAP tip>
+El ''npm run build'' crearà una carpeta ''dist/'' on hi haurà els arxius estàtics per al desplegament, en particular el punt d'entrada únic ''index.html''.
+</WRAP>
+\\
+===== 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**:
+  $ chmod 755 ~
+\\
+=== 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

bytes.cat

Eines de l'usuari

Eines del lloc

Eines de la pàgina