【Astro】Astroを導入した場合のWordPressの投稿記事が反映されるまでの流れ

今お使いのWordPressをそのままにAstroを導入した場合、具体的に何が変わるのかというのは導入前ではイメージがつきにくいかと思います。

実際WordPress自体はそのまま使えますし、投稿の仕方が変わるとかそういったことは基本的にありません。

ただ、投稿したものが反映されるまでにAstroでの自動処理が発生するために、反映までに数分かかります。

この処理のブラックボックスの部分について説明したいと思います。

WordPress投稿からの全体像

通常WordPressをインストールするとサーバーには、wp-contetやw-adminといったWordPressを動かすためのPHPファイルがサーバー上に配置されます。

ページ個々のファイルではなく、WordPressの管理画面だとか、データベースから取得するためのプログラムファイルが並んでいるイメージです。

その点、もしAstroを導入した場合は、WordPressで公開されているすべてのページのHTML/CSSのファイルがサーバーにアップロードされます。

ここに基本的にはPHPというようなプログラムを走らせるためのファイルは存在しません。

このイメージを図にするとこんな感じです。

流れを説明していくと

1. WordPress：最初にWordPressで記事を投稿または更新をします。（wp.などのサブドメインにあるWordPress）
2. Github Actions：投稿の通知を受け取ったGithub ActionsがAstroにビルドを指示します。※
3. Astro：指示を受け取ったAstroがWordPressに存在するページすべてをHTML/CSSに生成します。※
4. Github Actions：生成したHTML/CSSを指定のサーバーにアップロードします。※
5. サーバー：サーバーにアップロードが完了次第ホームページに反映されます。

※正確に言うと2～4まではGithub Actions上で処理されます。

このように、いつものようにWordPressで投稿するだけで、サーバーには自動で最新の状態がアップロードするような仕組みになっています。（仕組みにします。）

WordPressのAstro静的化に必要なツール

この流れからわかるように、Githubというコード管理ツールの登録が必要になります。

Githubはプログラマーなら使っていない人がいないくらい開発には必ずと言って良いほど使われるツールですが、今回のようにymlファイルに自動処理のトリガーから自動処理が出来る機能を備えています。

その機能をGithub Actionsといいます。

このGithub Actionsは無料枠というのがあり1か月間に実行時間2,000分、容量500MBという制限はありますが、通常使う分には無料の範囲で十分足ります。

WordPressの投稿とWebhook

WordPressで記事を投稿したり、更新した場合にGithubに自動処理をするためのトリガー（合図）を送ります。

これはWordPressのWebhookという機能を使うことでGithubにトリガー通知を送ることができます。

やり方としては、functions.phpにプログラムを追加する場合や、プラグインでも可能です。（この設定については基本的にAstro導入時の作業に含まれます。）

全体の処理にかかる時間

この全体の処理にかかる時間は、ページ数にもよりますが、数分から十数分程度かかります。

また、変更が入る部分だけ処理する場合もあるので、処理時間はまちまちだったりします。

ビルド中、Astroは何をしているのか？

この数分間、Astroは厳密にいうとただHTML/CSSを生成しているわけではありません。

• 画像の最適化: 大きすぎる画像を自動でリサイズし、次世代形式（WebP）に一括変換します。
• コードの圧縮: 余計な改行やスペースを削り、データ量を極限までダイエットさせます。また、ビルド時に利用していないCSSを削除するという、プラグインのような機能を使うことで必要最小限のCSSにすることもできます。
• エラーチェック: リンク切れがないかなどを、全ページくまなくチェックします。

WordPress単体では表示のたびに行っていたこれらの重い処理を、「公開前にすべて終わらせておく」。

だからこそ、閲覧者がアクセスした瞬間に高速ででページが開くようになります。

まとめ

WordPressとAstroってどういう位置関係で、導入するとどういう構成になるかについてまとめてみました。

WordPressとAstroの間には必ずGithubという自動処理を行ってくれるツールが必要になります。

このGithubのお陰で、WordPressを投稿するだけで自動的にサーバーにアップロードまでしてくれるわけです。

一見、間にGitHubを挟むことで複雑になったように感じるかもしれません。

しかし、一度この『自動化のパイプライン』を組んでしまえば、運用者はGitHubの存在すら意識することなく、ただWordPressの投稿ボタンを押すだけで良くなります。

この次世代の高速表示の仕組みを、あなたのサイトにも取り入れてみませんか？