Używanie serwera deweloperskiego Webpack z aplikacją PHP

Question

Czy ktoś miał doświadczenie z instalacją webpack dev server na Laravel 5+ (5.1 w moim przypadku)?

Mam zamiar użyć mojego zaplecza PHP w języku laravel z interfejsem ReactJS i chciałbym mieć serwer devware na moim dev env.

Ale jestem zdezorientowany z wieloma konfiguracjami w NodeJS (specjalizuję się w backendach PHP).

Czy ogólnie możliwe jest połączenie serwera webpack z aplikacją PHP?

Chcę, aby mój env działał w obie strony: na moim serwerze apache (do debugowania/rozwoju backendu) i na serwerze NodeJS (do debugowania/rozwoju frontendu).

Czy muszę mieć jakieś oprogramowanie pośrednie, rozwiązujące konkretny port dla webpacka? Jak ogólnie serwer NodeJS załaduje moje skrypty PHP? ... czy serwer WWW Apache ładowałby stronę, niż NodeJS wysyłałby powiadomienia do frontendu?

Answer 1

- Nowa odpowiedź -

Odkąd pierwszy odpowiedział na to pytanie zacząłem używając innego rozwiązania, które wolę.

W tym rozwiązaniu wysyłasz żądania bezpośrednio do serwera nginx/apache, który przesyła wymagane żądania do pakietu Webpack-dev-server (zobacz przykłady poniżej: localhost:8080 odnosi się do serwera webpack-dev).

Apache config

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

Jeśli ten utworzenie od podstaw, istnieją zasadniczo 4 kroki trzeba podjąć :

1. (tylko apache) Skonfiguruj swój wirtualny host zaplecza, który działa z pakietami produkcyjnymi (a nie z pakietem webpack-dev-server).
2. Skonfiguruj webpack-dev-server tak, aby wszystko działało z wyjątkiem z żądań backendu (możliwe użyteczne informacje w dolnej części starej odpowiedzi).
3. Skonfiguruj proxy wirtualnego hosta (patrz config powyżej)

---

- Stare odpowiedź -

wiem, sprawiły, że działa, ale natknąłem się na to stanowisko, gdy miałem ten problem siebie i, po rozwiązaniu, chciałem podzielić się moim rozwiązaniem.

Nie używam Laravel, ale mam backend PHP na serwerze apache. Musiałem tylko wprowadzić dwie zmiany w webpack.config.js, aby prace WebPack serwera dev:

Zmiana ta

publicPath: __dirname + '<path_to_bundle>' 

Do tego (uwaga: http://localhost:8080 jest adres URL do WebPACK-dev-serwer)

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

i dodać kilka ustawień proxy aby przesłać żądania do zaplecza PHP

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

Zwróć uwagę, że właściwość ścieżki to wyrażenie regularne, które pasuje do wszystkiego. Spowoduje to, że wszystkie żądania zostaną przekazane do zaplecza PHP. Może zajść potrzeba zmiany wyrażenia regularnego, jeśli chcesz, aby frontend obsługiwał niektóre żądania.

Dokumentacja serwera dev WebPack również mówi, że trzeba zmienić swoje tagi skryptu atrybut src do http://localhost:8080/<path_to_bundle>/<bundleFilename.js>, ale jest to konieczne tylko dla mnie, czy chcę, aby uzyskać dostęp do aplikacji ze swojego starego (Apache) URL zamiast z localhost : 8080 przy użyciu flagi --inline.

Aby gorącą pracę zastępczą Moduł z zareagować:

• Install reagować-hot-ładowarka: npm install --save-dev react-hot-loader

• dodać ładowarka do webpack.config.js wraz z innymi ładowarki jako react-hot

Teraz wszystko, co musisz zrobić, to uruchomić webpack-dev-server --inline --hot i, miejmy nadzieję, jesteś złoty.