[RESOLU] [Symfony 4] CSS et JS en 404

Eléphant du PHP | 397 Messages

14 déc. 2018, 17:36

Je viens de commencer un projet en Symfony 4 et j'ai un soucis avec les fichiers compilés par webpack.encore : ils sont en 404.
Mes pages sont donc toute vide de style.
Ma configuration de webpack.encore :

Code : Tout sélectionner

var Encore = require('@symfony/webpack-encore'); var CopyWebpackPlugin = require('copy-webpack-plugin'); Encore // directory where compiled assets will be stored .setOutputPath('public/build/') // public path used by the web server to access the output path .setPublicPath('/build') .cleanupOutputBeforeBuild() .enableSourceMaps(!Encore.isProduction()) /* * ENTRY CONFIG * * Add 1 entry for each "page" of your app * (including one that's included on every page - e.g. "app") * * Each entry will result in one JavaScript file (e.g. app.js) * and one CSS file (e.g. app.css) if you JavaScript imports CSS. */ .addEntry('app', './assets/js/app.js') // will require an extra script tag for runtime.js // but, you probably want this, unless you're building a single-page app .enableSingleRuntimeChunk() // enables Sass/SCSS support .enableSassLoader() .addPlugin(new CopyWebpackPlugin([ { from: './assets/images', to: 'images' } ])) .enableVueLoader(); ; module.exports = Encore.getWebpackConfig();
Mes fichiers sources sont bien présent dans le dossiers assets et lors de la compilation avec
yarn encore dev
les fichiers compilés apparaissent bien dans le dossier
public\build\
.
Mon base.html.twig :

Code : Tout sélectionner

{% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %}
et

Code : Tout sélectionner

{% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %}
Générant dans le DOM
<link rel="stylesheet" href="/build/app.css">
et
<script src="/build/runtime.js"></script><script src="/build/app.js"></script>
. Suivant les différentes doc et tutos trouvés je n'arrive pas à voir ce que je fais de mal...
----------------------------------------------------------------------------------
www.april.org - Promouvoir et défendre le logiciel libre

Eléphant du PHP | 397 Messages

14 déc. 2018, 17:45

Précision : mon instance de dev est monté via une stack Docker avec container nginx/php-fpm.
Voici la configuration du vhost de nginx :

Code : Tout sélectionner

server { listen 80; listen [::]:80; server_name ${NGINX_HOST}; client_max_body_size 20M; root /var/www/my-sf-project/public; location / { try_files $uri /index.php$is_args$args; } location ~* \.(jpg|jpeg|gif|css|png|js|ico|html|eof|woff|ttf)$ { if (-f $request_filename) { expires 30d; access_log off; } } location ~ ^/(index)\.php(/|$) { fastcgi_pass php:9000; fastcgi_split_path_info ^(.+\.php)(/.*)$; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param HTTPS off; internal; } location ~ \.php$ { return 404; } error_log /var/log/nginx/symfony_error.log; access_log /var/log/nginx/symfony_access.log; }
----------------------------------------------------------------------------------
www.april.org - Promouvoir et défendre le logiciel libre

Avatar du membre
Mammouth du PHP | 951 Messages

16 déc. 2018, 23:18

Salut, si les fichiers sont bien dans le dossier public/build mais que, quand tu essaies de les ouvrir dans le navigateur, tu as une erreur 404, alors le problème vient très probablement de la configuration nginx.
J'édite souvent mon message après avoir répondu pour le corriger où y apporter des informations complémentaires alors n'hésitez pas à y jeter un nouveau coup d'oeil ^^

Eléphant du PHP | 397 Messages

17 déc. 2018, 12:23

Hello,
Tu penses que le problème serait plutôt dans la configuration de nginx ou la configuration du vhost (comme décrit dans mon deuxième message) ?
Sachant que la configuration je ne l'ai pas touchée ou montée une configuration custom : j'utilise l'image docker "nginx:latest".
Voici comment je monte le container docker dans mon docker-compose.yml :

Code : Tout sélectionner

nginx: image: nginx:latest container_name: dso_nginx hostname: nginx ports: - 80:80 - 443:443 depends_on: - php volumes: - ./docker/nginx/default.template:/etc/nginx/conf.d/default.template - ./logs/nginx/:/var/log/nginx env_file: - .env environment: - NGINX_HOST=${NGINX_HOST} command: /bin/sh -c "envsubst '$$NGINX_HOST' < /etc/nginx/conf.d/default.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
"./docker/nginx/default.template" est le fichier de configuration montré dans mon deuxième message dans lequel j'injecte la variable NGINX_HOST définie dans mon .env : il s'agit de mon nom d'alias : "symfony.local".
----------------------------------------------------------------------------------
www.april.org - Promouvoir et défendre le logiciel libre

Eléphant du PHP | 397 Messages

17 déc. 2018, 12:27

Ho, je viens d'avoir une idée : je ne monte pas dans mon container nginx le path de l'application, je fais ça uniquement dans le container PHP-FPM, le problème viendrait peut-être de là !!

EDIT : ça venait bien de là, merci de m'avoir mis sur la piste :), le container nginx :

Code : Tout sélectionner

nginx: image: nginx:latest container_name: dso_nginx hostname: nginx ports: - 80:80 - 443:443 depends_on: - php volumes: - ./docker/nginx/default.template:/etc/nginx/conf.d/default.template - ".:/var/www/deep-space-objects:ro" - ./logs/nginx/:/var/log/nginx env_file: - .env environment: - NGINX_HOST=${NGINX_HOST} command: /bin/sh -c "envsubst '$$NGINX_HOST' < /etc/nginx/conf.d/default.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
----------------------------------------------------------------------------------
www.april.org - Promouvoir et défendre le logiciel libre

Avatar du membre
Mammouth du PHP | 951 Messages

17 déc. 2018, 23:55

Bravo =D>
J'édite souvent mon message après avoir répondu pour le corriger où y apporter des informations complémentaires alors n'hésitez pas à y jeter un nouveau coup d'oeil ^^

Petit nouveau ! | 2 Messages

21 juin 2019, 16:39

Merci pour le sujet, je ne pensais pas que le container nginx pouvait être source de ce genre de problèmes
Développeur PHP @JobPhoning