web-dev-qa-db-fra.com

Utilisation du serveur de développement Webpack avec une application PHP

Quelqu'un at-il une expérience de l'installation serveur de développement webpack on Laravel 5+ (5.1 dans mon cas)?

Je vais utiliser mon laravel PHP backend avec le frontend ReactJS et je voudrais avoir le serveur de développement webpack sur mon env env.).

Mais je suis confus avec beaucoup de configs dans NodeJS (je suis spécialisé dans PHP backend).

Est-il généralement possible de combiner le serveur de développement webpack avec l'application PHP?

Je veux que mon env fonctionne dans les deux sens: sur mon serveur Apache (pour le débogage/développement backend) et sur le serveur NodeJS (pour le débogage/développement frontend).

Dois-je avoir un middleware, résolvant un port spécifique pour webpack? Comment en général le serveur NodeJS chargera mes PHP? ... ou le serveur web Apache chargerait la page que NodeJS pousserait les notifications vers le frontend?

node.jslaravel-5reactjswebpack-dev-server
17
Black Akula

- Nouvelle réponse -

Depuis que j'ai répondu à cette question pour la première fois, j'ai commencé à utiliser une solution différente.

Avec la nouvelle solution, vous faites des demandes directement à un serveur Web nginx/Apache. Le serveur web fonctionne comme un proxy et redirige les requêtes vers webpack-dev-server ou l'application php. L'application php expose tous ses points de terminaison sous /api/<actual/endpoint> (voir les exemples de configurations non testés ci-dessous, où localhost:8080 fait référence à webpack-dev-server).

Configuration Apache ( http: // application php fait référence à un VirtualHost distinct, non illustré ici) 

<VirtualHost *:80>
    ServerName my-website.dev

    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/

    ProxyPassMatch ^\/api\/.+$ http://php-application/
    ProxyPassReverse / http://php-application/
</VirtualHost>

Configuration Nginx (PHP7.1) 

server {
    listen 80;
    server_name my-website.dev;

    root /path/to/backend/public;
    index index.php index.html;

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://localhost:8080;
    }

    location ~ ^/api/.+$ {
        try_files /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php7.1-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

- Ancienne réponse -

Je sais que vous l'avez fait fonctionner, mais je suis tombé sur ce post quand j'ai eu ce problème moi-même et, après l'avoir résolu, j'ai voulu partager ma solution.

Je n'utilise pas Laravel, mais j'ai un PHP backend sur un serveur Apache. Je n'ai eu qu'à faire deux changements dans webpack.config.js pour faire fonctionner le serveur de développement webpack:

Change ça

publicPath: __dirname + '<path_to_bundle>'

À cela (remarque: http://localhost:8080 est l'url du webpack-dev-server)

publicPath: "http://localhost:8080/<path_to_bundle>/"

Et ajoutez des paramètres de proxy pour transférer les requêtes vers le backend php

devServer: {
    proxy: [
        {
            path: /./,
            target: "http://<php_backend_url>"
        }
    ]
}

Notez que la propriété path est une expression régulière qui correspond à tout. Cela entraînera le transfert de toutes les demandes au backend php. Vous devrez peut-être changer l'expression régulière si vous voulez que le frontend gère certaines requêtes.

La documentation du serveur de développement webpack indique également que vous devez changer l'attribut src de vos balises de script en http://localhost:8080/<path_to_bundle>/<bundleFilename.js>, mais cela n'est nécessaire pour moi que si je veux accéder à l'application à partir de son ancienne URL (Apache) au lieu de localhost: 8080 lorsque vous utilisez l'indicateur --inline.

Pour que le remplacement à chaud du module fonctionne avec react:

  • Installez react-hot-loader: npm install --save-dev react-hot-loader

  • Ajoutez le chargeur à votre webpack.config.js avec vos autres chargeurs en tant que react-hot

Il ne vous reste plus qu'à exécuter webpack-dev-server --inline --hot et, espérons-le, vous êtes en or.

21
hansn

J'ai eu un problème similaire: Sur mon bureau, j'ai PHP serveur fonctionnant avec Open Server et aussi Webpack Vue app. Je voulais avoir accès à l'API avec AJAX from my Vue. C'est donc ma solution:

Créer un domaine local (je n'aime pas 'localhost', j'ai donc créé loc-team.test) avec Open Server (vous pouvez utiliser [~ # ~] xampp [~ # ~], ou par exemple). Maintenant, j'ai accès à http: //loc-team.test/ajax.php depuis le navigateur, mais je n'ai pas AJAX accès à cette URL depuis mon Serveur de développement Webpack ( http: //loc-team.test: 8081 ), en raison de Access-Control-Allow-Origin/CORS.

Ajoutez un proxy à votre devServer Dans la configuration webpack dev la configuration inclut ces accessoires:

devServer: {
  contentBase: 'dist_folder',
  Host: 'loc-team.test',
  port: 8081,
  overlay:{
    warnings: true,
    errors: true,
  },
  proxy: {
    '/api': {
      target: 'http://loc-team.test',
      pathRewrite: {'^/api' : ''}
    }
  },
}

Donc, dans mon application Vue je peux faire AJAX demande à loc-team.test/ api /ajax.php, et à cause de pathRewrite j'obtiendrai une réponse de loc-team.test/ajax.php . De plus, je n'ai aucun problème avec les sessions.

En savoir plus sur le proxy sur webpack.js.org

0
Serg_x