Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
| Ambdós costats versió prèvia Revisió prèvia Següent revisió | Revisió prèvia | ||
|
django_react_produccio [2026/04/13 10:03] enric_mieza_sanchez [Comprovacions] |
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. | ||
| + | </ | ||
| 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 + '' | En aquest article ho farem amb Apache + '' | ||
| - | {{ django: | + | {{ django: |
| \\ | \\ | ||
| Línia 17: | Línia 21: | ||
| A més d' | A més d' | ||
| - | {{ 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ó**, | Per altra banda, cal fer servir un motor de BD adequat com Postgre, MySQL, MariaDB o Oracle. **SQLite no és una opció per producció**, | ||
| 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:// | + | * 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' | + | * Segueix l' |
| + | * Si no en tens cap, també | ||
| + | * Un **servidor** operatiu amb accés SSH i amb un domnini configurat que l'hi apunta elmeudomini.com . L' | ||
| + | |||
| + | 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' | També assumim que instal·larem l' | ||
| + | |||
| + | 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:// | $ git clone https:// | ||
| $ 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:// | DATABASE_URL=mysql:// | ||
| # | # | ||
| - | ALLOWED_HOSTS=elmeudomini.com | + | ALLOWED_HOSTS=localhost,elmeudomini.com |
| CORS_ALLOWED_ORIGINS=http:// | CORS_ALLOWED_ORIGINS=http:// | ||
| + | CSRF_TRUSTED_ORIGINS=http:// | ||
| </ | </ | ||
| Línia 189: | Línia 206: | ||
| La configuració, | La configuració, | ||
| + | * **Django**: | ||
| + | * Rutes de processament: | ||
| + | * ''/ | ||
| + | * ''/ | ||
| + | * ''/ | ||
| + | * ''/ | ||
| + | * **ReactJS**: | ||
| + | * ''/'': | ||
| + | * ''/ | ||
| Línia 196: | Línia 221: | ||
| <file apache / | <file apache / | ||
| < | < | ||
| + | # Si només tenim 1 domini, no cal anomenar-lo | ||
| # | # | ||
| - | WSGIDaemonProcess | + | WSGIDaemonProcess |
| - | WSGIProcessGroup | + | WSGIProcessGroup |
| - | WSGIScriptAlias / /home/isard/ | + | WSGIScriptAlias / /home/super/ |
| - | < | + | < |
| <Files wsgi.py> | <Files wsgi.py> | ||
| Require all granted | Require all granted | ||
| Línia 208: | Línia 234: | ||
| </ | </ | ||
| - | Alias /static/ /home/isard/ | + | Alias /static/ /home/super/ |
| - | < | + | < |
| Require all granted | Require all granted | ||
| </ | </ | ||
| - | Alias /media/ /home/isard/ | + | Alias /media/ /home/super/ |
| - | < | + | < |
| Require all granted | Require all granted | ||
| </ | </ | ||
| # REACT FRONTEND | # REACT FRONTEND | ||
| - | Alias /assets /home/isard/ | + | Alias /assets /home/super/ |
| - | Alias /index.html /home/isard/ | + | Alias /index.html /home/super/ |
| - | AliasMatch ^/$ /home/isard/ | + | AliasMatch ^/$ /home/super/ |
| - | < | + | < |
| Require all granted | Require all granted | ||
| </ | </ | ||
| - | + | # Regla de reescriptura per a React Router | |
| - | # CAL? | + | # Les rutes conegudes |
| - | # 4. Regla de reescriptura per a React Router | + | # La resta de rutes van a dist/ |
| RewriteEngine On | RewriteEngine On | ||
| RewriteCond %{REQUEST_URI} !^/admin | RewriteCond %{REQUEST_URI} !^/admin | ||
| Línia 233: | 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/ | + | RewriteRule ^ /home/super/ |
| ServerAdmin webmaster@localhost | ServerAdmin webmaster@localhost | ||
| Línia 242: | Línia 268: | ||
| ErrorLog ${APACHE_LOG_DIR}/ | ErrorLog ${APACHE_LOG_DIR}/ | ||
| CustomLog ${APACHE_LOG_DIR}/ | CustomLog ${APACHE_LOG_DIR}/ | ||
| - | |||
| - | #Include conf-available/ | ||
| </ | </ | ||
| - | |||
| </ | </ | ||
| + | |||
| + | Reinicia Apache amb: | ||
| + | $ sudo systemctl restart apache2.service | ||
| \\ | \\ | ||
| Línia 273: | Línia 299: | ||
| \\ | \\ | ||
| + | ===== Media Uploads ===== | ||
| + | Comproveu que es pot accedir a ''/ | ||
| + | |||
| + | Si us dona problemes, segurament és que necessitareu donar permisos a ''/ | ||
| + | |||
| + | $ mkdir -p / | ||
| + | $ sudo chown -R www-data / | ||