Sử dụng máy chủ webpack dev với ứng dụng PHP

Question

Có ai có kinh nghiệm cài đặt webpack dev server trên Laravel 5+ (5.1 trong trường hợp của tôi) không?

Tôi sẽ sử dụng trình phụ trợ PHP laravel của tôi với giao diện ReactJS và tôi muốn có máy chủ webpack dev trên env dev của mình.

Nhưng tôi đã nhầm lẫn với rất nhiều cấu hình trong NodeJS (tôi chuyên về chương trình phụ trợ PHP).

Thông thường có thể kết hợp máy chủ webpack dev với ứng dụng PHP không?

Tôi muốn env của mình hoạt động theo cả hai cách: trên máy chủ apache của tôi (để gỡ lỗi/phát triển phụ trợ) và trên máy chủ NodeJS (để gỡ lỗi/phát triển giao diện người dùng).

Tôi có cần phải có một số phần mềm trung gian, giải quyết cổng cụ thể cho webpack không? Làm thế nào trong máy chủ NodeJS nói chung sẽ tải các kịch bản PHP của tôi? ... hoặc máy chủ web apache sẽ tải trang hơn NodeJS sẽ đẩy thông báo đến giao diện người dùng?

Answer 1

- New câu trả lời -

Kể từ lần đầu tiên tôi đã trả lời câu hỏi này, tôi đã bắt đầu sử dụng một giải pháp khác nhau mà tôi thích.

Trong giải pháp này, bạn thực hiện yêu cầu trực tiếp tới máy chủ nginx/apache để ủy quyền các yêu cầu cần thiết cho webpack-dev-server (xem ví dụ bên dưới. localhost:8080 dùng để chỉ gói webpack-dev-server).

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

Nếu bạn đang thiết lập này từ đầu, về cơ bản có 4 bước bạn cần phải thực hiện :

1. (chỉ apache) Thiết lập Máy chủ ảo phụ trợ của bạn hoạt động với các gói sản xuất của bạn (không phải là webpack-dev-server).
2. Thiết lập webpack-dev-server để mọi thứ hoạt động ngoại trừ từ các yêu cầu phụ trợ (thông tin hữu ích có thể có ở cuối câu trả lời cũ).
3. cài đặt proxy của bạn máy chủ ảo (xem cấu hình trên)

---

- Cũ câu trả lời -

Tôi biết bạn đã làm cho nó hoạt động, nhưng tôi đã xem qua bài này khi tôi có vấn đề này và sau khi giải quyết nó, tôi muốn chia sẻ giải pháp của tôi.

Tôi không sử dụng Laravel, nhưng có một chương trình phụ trợ PHP trên máy chủ apache. Tôi chỉ phải thực hiện hai thay đổi trong webpack.config.js để làm cho công việc webpack máy chủ dev:

Thay đổi này

publicPath: __dirname + '<path_to_bundle>' 

Để này (lưu ý: http://localhost:8080 là url vào webpack-dev-server)

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

Và thêm một số cài đặt proxy để chuyển tiếp các yêu cầu tới phần phụ trợ php

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

Lưu ý rằng thuộc tính đường dẫn là một regex khớp với mọi thứ. Điều này sẽ khiến tất cả các yêu cầu được chuyển tiếp đến phần cuối của php. Bạn có thể phải thay đổi regex nếu bạn muốn giao diện người dùng xử lý một số yêu cầu.

Tài liệu máy chủ webpack dev cũng nói rằng bạn phải thay đổi thuộc tính src thẻ script thành http://localhost:8080/<path_to_bundle>/<bundleFilename.js>, nhưng điều này chỉ cần thiết cho tôi nếu tôi muốn truy cập ứng dụng từ url cũ (apache) thay cho localhost : 8080 khi sử dụng cờ --inline.

Để làm cho công việc mô-đun thay thế nóng với phản ứng:

• Install phản ứng nóng-loader: npm install --save-dev react-hot-loader

• Thêm bộ nạp để webpack.config.js của bạn cùng với bộ tải khác của bạn như react-hot

Bây giờ tất cả những gì bạn phải làm là chạy webpack-dev-server --inline --hot và, hy vọng, bạn là vàng.