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

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...

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;
}

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.

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".

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;'"

17 déc. 2018, 23:55

Bravo

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

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

Qui est en ligne