bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


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 10:27]
enric_mieza_sanchez [Prerequisits]
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. 
 +    * 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**.   * 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**.
  
Línia 75: 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 92: 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 206: Línia 221:
 <file apache /etc/apache2/sites-available/000-default.conf> <file apache /etc/apache2/sites-available/000-default.conf>
 <VirtualHost *:80> <VirtualHost *:80>
 + # Si només tenim 1 domini, no cal anomenar-lo
  #ServerName www.example.com  #ServerName www.example.com
  
- WSGIDaemonProcess example.com python-home=/home/isard/django-react/env python-path=/home/isard/django-react + WSGIDaemonProcess myapp python-home=/home/super/django-react/env python-path=/home/super/django-react 
- WSGIProcessGroup example.com + WSGIProcessGroup myapp 
- WSGIScriptAlias / /home/isard/django-react/djangoreact/wsgi.py+ WSGIScriptAlias / /home/super/django-react/djangoreact/wsgi.py
  
- <Directory /home/isard/django-react/djangoreact>+ <Directory /home/super/django-react/djangoreact>
  <Files wsgi.py>  <Files wsgi.py>
  Require all granted  Require all granted
Línia 218: Línia 234:
  </Directory>  </Directory>
  
- Alias /static/ /home/isard/django-react/static/ + Alias /static/ /home/super/django-react/static/ 
- <Directory /home/isard/django-react/static>+ <Directory /home/super/django-react/static>
  Require all granted  Require all granted
  </Directory>  </Directory>
- Alias /media/ /home/isard/django-react/media/ + Alias /media/ /home/super/django-react/media/ 
- <Directory /home/isard/django-react/media>+ <Directory /home/super/django-react/media>
  Require all granted  Require all granted
  </Directory>  </Directory>
  
  # REACT FRONTEND  # REACT FRONTEND
- Alias /assets /home/isard/django-react/react/dist/assets/ + Alias /assets /home/super/django-react/react/dist/assets/ 
- Alias /index.html /home/isard/django-react/react/dist/index.html + Alias /index.html /home/super/django-react/react/dist/index.html 
- AliasMatch ^/$ /home/isard/django-react/react/dist/index.html + AliasMatch ^/$ /home/super/django-react/react/dist/index.html 
- <Directory /home/isard/django-react/react/dist>+ <Directory /home/super/django-react/react/dist>
  Require all granted  Require all granted
  </Directory>  </Directory>
  
- + # Regla de reescriptura per a React Router 
- CAL?  + # Les rutes conegudes no entren: /admin /api /static /media i /assets 
- # 4. Regla de reescriptura per a React Router (només quan no sigui /admin /api)+ # La resta de rutes van a dist/index.html (React Router)
  RewriteEngine On  RewriteEngine On
  RewriteCond %{REQUEST_URI} !^/admin  RewriteCond %{REQUEST_URI} !^/admin
Línia 243: Línia 259:
  RewriteCond %{REQUEST_URI} !^/static  RewriteCond %{REQUEST_URI} !^/static
  RewriteCond %{REQUEST_URI} !^/media  RewriteCond %{REQUEST_URI} !^/media
 + RewriteCond %{REQUEST_URI} !^/assets
  RewriteCond %{REQUEST_FILENAME} !-f  RewriteCond %{REQUEST_FILENAME} !-f
- RewriteRule ^ /home/isard/django-react/react/dist/index.html [L] + RewriteRule ^ /home/super/django-react/react/dist/index.html [L]
  
  ServerAdmin webmaster@localhost  ServerAdmin webmaster@localhost
Línia 252: Línia 268:
  ErrorLog ${APACHE_LOG_DIR}/error.log  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined  CustomLog ${APACHE_LOG_DIR}/access.log combined
- 
- #Include conf-available/serve-cgi-bin.conf 
 </VirtualHost> </VirtualHost>
 </file> </file>
Línia 290: Línia 304:
 Si us dona problemes, segurament és que necessitareu donar permisos a ''/media'' perquè Apache hi pugui escriure: 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   $ sudo chown -R www-data /home/super/django-react/media
  
django_react_produccio.1776076049.txt.gz · Darrera modificació: 2026/04/13 10:27 per enric_mieza_sanchez