bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
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:28]
enric_mieza_sanchez [Django] 		django_react_produccio [2026/04/14 15:35] (actual)
enric_mieza_sanchez [Posada en producció d'un projecte Django + ReactJS]
Línia 1: Línia 1:
 ====== Posada en producció d'un projecte Django + ReactJS ====== ====== Posada en producció d'un projecte Django + ReactJS ======
 +
 +<WRAP info>
 +Aquest article continua de [[Django React]]. Posarem en producció el projecte creat en aquell article.
 +</WRAP>
  
 Hi ha diverses eines per a poder realitzar aquest desplegament. Les opcions més habituals son: Hi ha diverses eines per a poder realitzar aquest desplegament. Les opcions més habituals son:
Línia 7: Línia 11:
 En aquest article ho farem amb Apache + ''mod_wsgi''. En aquest article ho farem amb Apache + ''mod_wsgi''.
  
-{{ django:django_react_produccio.png }}+{{ django:django_react_produccio.png?400 }}
  
 \\ \\
Línia 17: Línia 21:
 A més d'això, per la part de servidor també caldrà servir els arxius estàtics de la part Django (al menys per l'//admin panel//) i les possibles càrregues (//uploads//) que es solen parlar com d'arxius //media//. A més d'això, per la part de servidor també caldrà servir els arxius estàtics de la part Django (al menys per l'//admin panel//) i les possibles càrregues (//uploads//) que es solen parlar com d'arxius //media//.
  
-{{ django:diagrama_django_produccio.png }}+{{ django:diagrama_django_react_produccio.png }}
  
 Per altra banda, cal fer servir un motor de BD adequat com Postgre, MySQL, MariaDB o Oracle. **SQLite no és una opció per producció**, tot i que va bé per desenvolupament i una part del testing. Per altra banda, cal fer servir un motor de BD adequat com Postgre, MySQL, MariaDB o Oracle. **SQLite no és una opció per producció**, tot i que va bé per desenvolupament i una part del testing.
Línia 38: Línia 42:
  
 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. 
-  * 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.+    * Segueix l'article [[Django React]] per crear una app complerta. 
 +    * Si no en tens cap, també 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**. 
 + 
 +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 73: Línia 81:
  
 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ó. 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ó.
 +
 +Instal·lem les dependències per a MySQL / MariaDB.
 +
 +En Debian 12:
 +  $ sudo apt install default-libmysqlclient-dev python3-dev python3-venv git
 +
 +En Ubuntu LTS:
 +  $ sudo apt install default-libmysqlclient-dev python3-dev python3-venv python3-mysqldb git pkgconf
  
 <code bash> <code bash>
-$ sudo apt install default-libmysqlclient-dev python3-dev python3-venv git 
 $ git clone https://github.com/elmeuusuari/projecte-django-react $ git clone https://github.com/elmeuusuari/projecte-django-react
 $ cd projecte-django-react $ cd projecte-django-react
Línia 90: Línia 105:
  
 <file bash .env> <file bash .env>
-SECRET_KEY=sdjfhisdfg67sdtf78ewhf8w3efheh7uf9iehfj98er+DEBUG=on 
 +SECRET_KEY=poseu-algo-random-per-aqui
 DATABASE_URL=mysql://biblio:[email protected]:3306/biblio DATABASE_URL=mysql://biblio:[email protected]:3306/biblio
 #DATABASE_URL=sqlite:///db.sqlite3 #DATABASE_URL=sqlite:///db.sqlite3
-ALLOWED_HOSTS=elmeudomini.com+ALLOWED_HOSTS=localhost,elmeudomini.com
 CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com CORS_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,https://elmeudomini.com
 +CSRF_TRUSTED_ORIGINS=http://localhost:5173,https://elmeudomini.com
 </file> </file>
  
Línia 154: Línia 171:
  
 ===== 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 161: Línia 182:
 \\ \\
  
 +=== 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:
 +
 +  $ mkdir -p /home/super/django-react/media
 +  $ sudo chown -R www-data /home/super/django-react/media
  
django_react_produccio.1776072523.txt.gz · Darrera modificació: 2026/04/13 09:28 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