web-dev-qa-db-ja.com

PHPアプリケーションでWebpack開発サーバーを使用する

誰かがインストールの経験はありましたか webpack dev server on Laravel 5+（私の場合は5.1））？

私は自分のlaravel PHP ReactJSフロントエンドでバックエンドを使用し、開発環境にwebpack開発サーバーを配置したいと考えています。

しかし、私はNodeJSの多くの設定と混同しています（PHPバックエンド）に特化しています）。

一般に、webpack開発サーバーをPHPアプリケーションと組み合わせることができますか？

私の環境は、Apacheサーバー（バックエンドのデバッグ/開発用）とNodeJSサーバー（フロントエンドのデバッグ/開発用）の両方で動作するようにします。

Webpackの特定のポートを解決するミドルウェアが必要ですか？一般に、NodeJSサーバーはどのようにして私のPHPスクリプトをロードしますか？...またはApache WebサーバーがNodeJSが通知をフロントエンドにプッシュするよりもページをロードしますか？

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

-新しい答え-

私が最初にこの質問に回答してから、私は別のソリューションを使い始めました。

新しいソリューションでは、nginx/Apache Webサーバーに直接リクエストを送信します。 Webサーバーはプロキシとして機能し、リクエストをwebpack-dev-serverまたはphpアプリケーションにリダイレクトします。 phpアプリケーションは、/api/<actual/endpoint>の下にあるすべてのエンドポイントを公開します（以下のテストされていない構成例を参照してください。ここで、localhost:8080はwebpack-dev-serverを指します）。

Apache設定（ http：// php-application は、ここには示されていない別のVirtualHostを指します）

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

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

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

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

-古い答え-

私はあなたがそれをうまく動かしたことを知っています、しかし私がこの問題を私自身が抱えていたときにこの投稿に出くわし、それを解決した後、私の解決策を共有したいと思いました。

私はLaravelを使用していませんが、ApacheサーバーにPHPバックエンドがあります。webpackdevサーバーを機能させるために、webpack.config.jsに2つの変更を加えるだけで済みます。

これを変える

publicPath: __dirname + '<path_to_bundle>'

これに（注：http://localhost:8080はwebpack-dev-serverへのURLです）

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

リクエストをphpバックエンドに転送するためのプロキシ設定をいくつか追加します

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

Pathプロパティがeverythingに一致する正規表現であることに注意してください。これにより、すべてのリクエストがphpバックエンドに転送されます。 フロントエンドで一部のリクエストを処理する場合は、正規表現を変更する必要がある場合があります。

Webpack開発サーバーのドキュメントには、スクリプトタグのsrc属性をhttp://localhost:8080/<path_to_bundle>/<bundleFilename.js>に変更する必要があるとも記載されていますが、これは私がlocalhostではなく古い（Apache）URLからアプリにアクセスする場合にのみ必要です。 --inlineフラグを使用すると8080。

reactでホットモジュールの置換を機能させるには：

  • 反応ホットローダーをインストールします：npm install --save-dev react-hot-loader

  • ローダーを他のローダーと一緒にreact-hotとしてwebpack.config.jsに追加します

あとはwebpack-dev-server --inline --hotを実行するだけです。うまくいけば、あなたは金色です。

21
hansn

同様の問題がありました：デスクトップにPHPOpen Serverで実行されているサーバーがありますとWebpackVue app。私はAJAX私のVue appから。つまり、私の解決策はwhisです。

ローカルドメインを作成します（「localhost」が好きではないため、loc-team.test）withOpen Server（[〜＃〜] xampp [〜＃〜]などを使用できます）。これで、ブラウザから http：//loc-team.test/ajax.php にアクセスできますが、AJAXからこのURLにアクセスできませんAccess-Control-Allow-Origin/CORSのため、Webpack開発サーバー（ http：//loc-team.test：8081 ）。

devServerにプロキシを追加しますwebpackdev構成に次の小道具を含めます：

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

したがって、私のVue app i make make make AJAX request toloc-team.test /api/ ajax.php、そしてpathRewriteのため、loc-team.test/ajaxから回答が得られます。 php。また、セッションに問題はありません。

webpack.js.org でプロキシの詳細をご覧ください

0
Serg_x