このページはコミュニティによって翻訳されたもので、最新ではない可能性があります。参照用のバージョンをご覧ください。

このページはコミュニティによって翻訳されたもので、最新ではない可能性があります。参照用のバージョンをご覧ください。

このページはコミュニティによって翻訳されたもので、最新ではない可能性があります。参照用のバージョンをご覧ください。

提供
ホットリロード

ホットリロード

FrankenPHPには、開発者のエクスペリエンスを大幅に向上させるために設計された組み込みのホットリロード機能が含まれています。

Hot Reload

この機能は、ViteやwebpackなどのモダンなJavaScriptツールにおけるホットモジュールリプレースメント (HMR) に似たワークフローを提供します。 ファイルの変更（PHPコード、テンプレート、JavaScript、CSSファイルなど）のたびに手動でブラウザをリフレッシュする代わりに、 FrankenPHPはページの内容をリアルタイムで更新します。

ホットリロードは、WordPress、Laravel、Symfony、その他すべてのPHPアプリケーションやフレームワークでネイティブに動作します。

有効にすると、FrankenPHPは現在の作業ディレクトリにおけるファイルシステムの変更を監視します。 ファイルが変更されると、Mercureの更新をブラウザにプッシュします。

設定に応じて、ブラウザは以下のいずれかを実行します。

  • Idiomorphがロードされている場合、DOMをモーフィングします（スクロール位置と入力状態を保持）。
  • Idiomorphが存在しない場合、ページをリロードします（標準のライブリロード）。

# 設定

ホットリロードを有効にするには、Mercureを有効にしてから、Caddyfileのphp_serverディレクティブにhot_reloadサブディレクティブを追加します。

Warning

この機能は開発環境のみを対象としています。 hot_reloadを本番環境で有効にしないでください。この機能は安全ではなく（機密性の高い内部詳細を公開します）、アプリケーションの速度を低下させます。

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload
}

デフォルトでは、FrankenPHPは現在の作業ディレクトリ内の以下のグロブパターンに一致するすべてのファイルを監視します: ./**/*.{css,env,gif,htm,html,jpg,jpeg,js,mjs,php,png,svg,twig,webp,xml,yaml,yml}

グロブ構文を使用して、監視するファイルを明示的に設定することも可能です。

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload src/**/*{.php,.js} config/**/*.yaml
}

使用するMercureトピック、および監視するディレクトリまたはファイルを指定するには、hot_reloadのロングフォームを使用します。

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload {
        topic hot-reload-topic
        watch src/**/*.php
        watch assets/**/*.{ts,json}
        watch templates/
        watch public/css/
    }
}

# クライアントサイドの統合

サーバーは変更を検出しますが、ブラウザはこれらのイベントを購読してページを更新する必要があります。 FrankenPHPは、ファイル変更を購読するために使用するMercure HubのURLを、$_SERVER['FRANKENPHP_HOT_RELOAD']環境変数を通じて公開します。

クライアントサイドのロジックを処理するための便利なJavaScriptライブラリ、frankenphp-hot-reloadも利用可能です。 これを使用するには、メインレイアウトに以下を追加します。

<!DOCTYPE html>
<title>FrankenPHP Hot Reload</title>
<?php if (isset($_SERVER['FRANKENPHP_HOT_RELOAD'])): ?>
<meta name="frankenphp-hot-reload:url" content="<?=$_SERVER['FRANKENPHP_HOT_RELOAD']?>">
<script src="https://cdn.jsdelivr.net/npm/idiomorph"></script>
<script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
<?php endif ?>

このライブラリは自動的にMercureハブを購読し、ファイル変更が検出されるとバックグラウンドで現在のURLをフェッチし、DOMをモーフィングします。 npmパッケージとして、またGitHubで利用できます。

または、EventSourceネイティブJavaScriptクラスを使用してMercureハブに直接購読することで、独自のクライアントサイドロジックを実装することもできます。

# 既存のDOMノードを保持する

まれに、Symfonyのウェブデバッグツールバーなどの開発ツールを使用している場合など、特定のDOMノードを保持したいことがあります。 そのためには、関連するHTML要素にdata-frankenphp-hot-reload-preserve属性を追加します。

<div data-frankenphp-hot-reload-preserve><!-- My debug bar --></div>

# ワーカーモード

アプリケーションをワーカーモードで実行している場合、アプリケーションスクリプトはメモリに常駐します。 これは、ブラウザがリロードされても、PHPコードの変更がすぐに反映されないことを意味します。

最高の開発者エクスペリエンスのためには、hot_reloadをワーカーディレクティブ内のwatchサブディレクティブと組み合わせるべきです。

  • hot_reload: ファイルが変更されたときにブラウザをリフレッシュします
  • worker.watch: ファイルが変更されたときにワーカーを再起動します
localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload
    worker {
        file /path/to/my_worker.php
        watch
    }
}

# 仕組み

  1. 監視: FrankenPHPは、内部でe-dant/watcherライブラリを使用してファイルシステムの変更を監視します（私たちはGoバインディングに貢献しました）。

  2. 再起動 (ワーカーモード): ワーカー設定でwatchが有効になっている場合、新しいコードをロードするためにPHPワーカーが再起動されます。

  3. プッシュ: 変更されたファイルのリストを含むJSONペイロードが、組み込みのMercureハブに送信されます。

  4. 受信: JavaScriptライブラリを介してリッスンしているブラウザがMercureイベントを受信します。

  5. 更新:

    • Idiomorphが検出された場合、更新されたコンテンツをフェッチし、現在のHTMLを新しい状態に合わせてモーフィングし、状態を失うことなく即座に変更を適用します。
    • それ以外の場合、window.location.reload()が呼び出されてページがリフレッシュされます。
このページを編集