Utilizzo del server di sviluppo Webpack con un'applicazione PHP

Question

Qualcuno ha avuto un'esperienza con l'installazione webpack dev server su Laravel 5+ (5.1 nel mio caso)?

Ho intenzione di utilizzare il mio backend PHP laravel con il frontend ReactJS e mi piacerebbe avere un server di sviluppo web server sul mio dev env.

Ma sono confuso con molte configurazioni in NodeJS (sono specializzato nel backend PHP).

È in genere possibile combinare il server di sviluppo webpack con l'applicazione PHP?

Desidero che il mio ambiente operativo funzioni in entrambi i modi: sul mio server Apache (per il debug/lo sviluppo del backend) e sul server NodeJS (per il debug/lo sviluppo del frontend).

Devo avere qualche middleware, risoluzione di una porta specifica per il webpack? Come in generale il server NodeJS caricherà i miei script PHP? ... o il server Web Apache caricherà la pagina di quanto NodeJS invierebbe le notifiche al frontend?

Answer 1

- Nuova risposta -

Da quando ho risposto a questa domanda ho iniziato ad usare una soluzione diversa che preferisco.

In questa soluzione si effettuano richieste direttamente a un server nginx/apache che inoltra le richieste necessarie a webpack-dev-server (vedere esempi di seguito. localhost:8080 fa riferimento a webpack-dev-server).

configurazione di Apache

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

    ProxyPassMatch ^(\/$)|(\/.+\.(png|css|js|json)$)|(sockjs-node) http://localhost:8080/ 
    ProxyPassReverse/http://localhost:8080/ 

    ProxyPass/http://my-website-backend/ 
    ProxyPassReverse/http://my-website-backend/ 
</VirtualHost> 

Nginx config (PHP7.1)

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

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

    location ~ ^(.*\.(jpe?g|png|gif|svg|js|css|html|woff2?)|/sockjs-node/.*|/)$ { 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection "upgrade"; 
     proxy_pass http://localhost:8080; 
    } 

    location ~ ^/.+$ { 
     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; 
    } 
} 

Se stai impostando questo da zero, ci sono fondamentalmente 4 passi è necessario prendere :

1. (solo apache) Imposta il tuo host back-end che funziona con i tuoi bundle di produzione (non webpack-dev-server).
2. Setup webpack-dev-server in modo che tutto funzioni eccetto dalle richieste di back-end (possibili informazioni utili in fondo alla vecchia risposta).
3. Imposta il tuo proxy host virtuale (vedi config sopra)

---

- Old risposta -

So che ha reso il lavoro, ma mi sono imbattuto in questo post, quando ho avuto questo problema me stesso e, dopo averlo risolto, volevo condividere la mia soluzione.

Non sto utilizzando Laravel, ma ho un backend PHP su un server Apache. Ho solo dovuto fare due modifiche in webpack.config.js per rendere il lavoro del server dev webpack:

Modificare questa

publicPath: __dirname + '<path_to_bundle>' 

Per questo (nota: http://localhost:8080 è l'URL al webpack-dev-Server)

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

e aggiungere un po impostazioni proxy per inoltrare richieste al backend php

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

Si noti che la proprietà path è un'espressione regolare che corrisponde a a tutto. Ciò causerà l'inoltro di tutte le richieste al back-end di php. Potrebbe essere necessario modificare la regex se si desidera che il frontend gestisca alcune richieste.

La documentazione del server dev webpack dice anche che è necessario modificare l'attributo src tag script per http://localhost:8080/<path_to_bundle>/<bundleFilename.js>, ma questo è solo necessario per me se voglio accedere all'applicazione dal suo vecchio (apache) URL al posto di localhost : 8080 quando si utilizza il flag --inline.

per far funzionare la sostituzione del modulo caldo con reagire:

• Installare reagire-hot-loader: npm install --save-dev react-hot-loader

• Aggiungere il caricatore ai vostri webpack.config.js insieme agli altri caricatori come react-hot

Ora tutto ciò che dovete fare è eseguire webpack-dev-server --inline --hot e, si spera, sei d'oro.