Astro + microCMS をビルドしてホスティング先にデプロイするまでの流れ
Webサイト開発で目にする「ビルド」「デプロイ」「ホスティング」。これらの用語は開発初心者には難しく感じるかもしれません。（私もその1人でした！笑）
この記事では実際のAstroとmicroCMSを使用した当サイトを例に、それぞれの意味と一連の流れを分かりやすく解説していきます。
ビルド、デプロイ、ホスティングの用語解説
カタカナで聞くと一気に難しく感じる技術用語。実は意外にも、普段から行っている作業かもしれません。
ビルドとは？
ビルドとは、開発環境で作成したコードを本番環境で動作する形に変換する処理です。
例えば、Astroで作成したサイトをHTMLに変換し、ブラウザが直接理解できる形に変換することをビルドと呼びます。
デプロイとは？
デプロイとは、ビルドされたWebサイトをインターネット上で公開できる状態にすることです。
HTMLファイルをFTPでサーバーにアップロードして公開することも、立派な「デプロイ」作業の一つです。（読者の皆さまの中には、普段からやっている方も多いのではないでしょうか！）
ホスティングとは？
ホスティングは、「Webサイトを置いておくためのスペースを借りること」を指します。
Xserver Static、Vercel、Netlify、Cloudflare Pagesなどのホスティングサービスは、Webサイトを置いておくためのスペースを貸してくれるサービスということです。
呪文の正体に迫る
この記事のタイトルにもある呪文、「Astro + microCMS をビルドしてホスティング先にデプロイする」を紐解きましょう。
それぞれの用語の意味を踏まえると、以下のような意味になります：
Astro + microCMSを、HTMLなどのブラウザが直接理解できる形に変換して（ビルドして）、Webサイトを置いておくために借りているスペースに（ホスティング先に）、公開（デプロイ）する
当サイトの公開までの流れ
当サイトもAstro + microCMSで作成しており、GitHub Actionsを使ってホスティング先（Xserver Static）へ自動デプロイする仕組みを構築して公開しています。
ざっくりとしたイメージを掴んでいきましょう。
抽象的な流れ（初期設定は省略）：
- ローカルでコーディング
- GitHubのリポジトリにプッシュ
- GitHub Actionsが自動的にビルド
- GitHub Actionsが自動的にホスティング先へデプロイ
- ホスティング先はビルドされたファイルを受け取って公開
具体的な流れ（初期設定は省略）：
- ローカル（自分のPC）でコーディングし、Astro + microCMSのサイトを作成
- GitHubのリポジトリにプッシュ
- GitHub Actionsが自動的に、AstroをHTML等のブラウザが直接理解できる形に変換（このとき、microCMSのコンテンツも取得されてHTMLへ変換）
- GitHub Actionsが自動的に、Xserver Staticへ転送
- Xserver Staticはビルドされたファイルを受け取って公開
以下の図はあくまでイメージです。
ここまでで、自分が手を動かしているのは手順1だけです。最初の設定さえ完了すれば、サイトの公開作業が非常に簡単になります。
詳細の設定方法は、microCMSの公式ブログでとても丁寧に解説されているので、こちらをご覧ください。
microCMSを使用した静的サイトをXserver Staticへデプロイしてみる（microCMS公式ブログ）
まとめ
このように、Astro + microCMSを使用したサイト構築では、GitHub Actionsによる自動化によって、コーディング以外の作業を自動化することができます。
最初の設定は少し手間がかかりますが、一度設定してしまえば、その後のサイト更新作業が格段に効率化されます。
ビルド、デプロイ、ホスティングという技術用語も、実際の開発フローの中で理解することで、より身近なものとして感じていただけたのではないでしょうか。