Astroは、高速かつ効率的な静的サイトを構築できるフロントエンドフレームワークです。Astroを利用することで、React、Vue.js、Svelteのような定番JavaScriptフレームワークの性能を活用し、ビルドプロセスを経て静的なHTML、CSS、JavaScriptファイルを生成しながら、動的なユーザーインターフェースを確保することができます。

人気のコンテンツ管理システム（CMS）であるWordPressをヘッドレス化することで、AstroがバックエンドAPIとフロントエンドコードをシームレスに統合できるようになり、動的コンテンツを持つ静的サイトを効率的に開発できます。これには、いくつもの利点があります。

AstroとWordPressバックエンドで構築する静的サイトでは、高いパフォーマンスが期待できます。また、コンテンツデリバリネットワーク（CDN）から直接配信できるため、サーバーサイドの処理が不要になり、読み込みの高速化とユーザーエクスペリエンスの改善が可能です。

今回は、Kinstaの静的サイトホスティングとAstroを使って静的サイトを設定し、バックエンドにはWordPressを利用する方法をご紹介します。

ヘッドレスCMSとしてのWordPressの役割

WordPressのようなヘッドレスCMSは、コンテンツ管理レイヤーと配信レイヤーを分離する役割を果たします。バックエンドがコンテンツを管理し、Astroのような別のシステムがフロントエンドでの処理を担います。

WordPressはコンテンツリポジトリとして機能し、フロントエンドにデータを供給し、フロントエンドはAPIを介してサイト訪問者にコンテンツを表示します。コンテンツを柔軟に複数の出力先に利用でき、WordPressという多くの人が慣れ親しんだ画面でのコンテンツ管理も可能です。

また、フロントエンドをバックエンドから切り離すことで、フロントエンドのデザインやコンテンツ移行の柔軟性が高まります。さらに、APIを通じてアクセシビリティを実現することで、コンテンツの将来性も確保できます。

開発環境のセットアップ

環境をセットアップするには、3つのステップを踏む必要があります。

  1. Astroをインストールする
  2. WordPressサイトをセットアップする
  3. WordPressステージング環境を作成する

前提条件

この説明に従うには、以下が必要です。

  • HTML、CSS、JavaScriptの基本的な理解
  • Node.jsとnpm（Node Package Manager）またはyarnがコンピュータにインストールされていること
  • Kinstaアカウント（無料で静的サイトをホストするにはまずアカウントを作成し、コントロールパネルであるMyKinstaにアクセスしてください）

Astroをインストールする

  1. プロジェクト用にディレクトリを作成し、そこに移動します。
  2. ターミナルで以下のコマンドを実行して、プロジェクトのスキャフォールディングを行います。 
    npm create astro@latest

    このステップで設定プロンプトが表示されます。実際の要件に応じてこれの調整を行なってください。

    ターミナルウィンドウに、新規Astroプロジェクトを設定する指示が表示されている（プロンプト：新しいプロジェクトをどこに作成しますか？新しいプロジェクトをどのように開始しますか？TypeScriptを利用しますか？）
    Astroプロジェクトの設定手順の説明

  3. プロジェクトが作成できたら、npm run devを実行して、http://localhost:4321/上のローカル開発サーバーを起動します。

    Astroのウェルカムページ（ドキュメント、統合、テーマ、コミュニティのリンクが表示されている）
    Astroのインストールが完了

KinstaでWordPressサイトをセットアップする

Kinstaは、直感的なインターフェースと高性能なインフラストラクチャを誇るハイエンドWordPressホスティングです。KinstaでWordPressサイトを作成するには以下の手順に従ってください。

  1. MyKinstaで「WordPressサイト」＞「サイトの作成」をクリック
  2. 「WordPressをインストール」を選択し「続行」をクリック
  3. 「サイト名」を入力し、「データセンターの所在地」を選択し「続行」をクリック
  4. その他すべての情報を入力し、「続行」をクリック
  5. サイトが作成されると「サイトの作成が完了しました」というメッセージが表示されます。

WordPressステージング環境を作成する

KinstaのすべてのWordPressサイトに実際の本番サイトとは別に無料のステージング環境が付帯します。WordPressのバージョン、プラグイン、コード、開発作業をテストするのにうってつけです。

KinstaでWordPressステージング環境を作成する手順は以下の通りです。

  1. メニューバーで、「Live（本番）」から「新規環境の作成」をクリックします。

    データセンターの所在地とサイト名が記載されているサイト情報ページ
    WordPressステージング環境を作成する

  2. 「標準環境」を選択し、「続行」をクリックします。
  3. 「既存の環境を複製」をクリックし、「環境名」を指定し、「複製する環境」に「Live（本番）」を選択し「続行」をクリックします。
  4. デプロイしたWordPressステージング環境は、「Live（本番）」メニューに表示されます。

    「Live」メニューのある「サイト情報」ページのスクリーンショット（「Live/本番」「Staging/ステージング」「新規環境の作成」の項目がある）
    ステージング環境の作成が完了

WordPressとAstroの統合

WordPressとAstroの統合には、主にREST APIとGraphQLの2つの方法があります。今回の説明ではGraphQLを使用します。

WordPressとAstroを統合するには、以下が必要になります。

  • WPGraphQLをインストールする
  • AstroをWordPressに接続する

WPGraphQLのインストール

Astroの接続にGraphQLを使用するために、まずWordPressサイトにWPGraphQLプラグインをインストールします。

  1. MyKinstaで、WordPressサイトを選択します。
  2. メニューバーで「ステージング」をクリックし、右上の「WP管理画面を開く」をクリックします。

    Site Information page showing the Staging menu and Push environment, Open WP Admin, and Visit site buttons
    サイト情報ページを開く

  3. WordPressサイトを作成するときに使用した認証情報を入力します。
  4. 左のナビゲーションバーにある「プラグイン」メニューをクリックします。
  5. 「新規追加」をクリックします。
  6. 「WPGraphQL」を検索し、「今すぐインストール」をクリックしてインストールし、「有効化」をクリックします。

    プラグインの追加ページにWPGraphQLプラグインとその他のプラグインが表示されている（その横に新規インストールボタンがある）
    WPGraphQLプラグインのインストール

  7. インストールしたWPGraphQLプラグインが問題なく動作するかテストするには、ナビゲーションバーの「GraphQL」メニューを開き「GraphiQL IDE」をクリックします。
  8. GraphiQL IDEで以下のコードを使用し、左上の「Run」を クリックしてGraphQLクエリを実行します。 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    このGraphQLクエリにより、WordPressサイトから投稿のslugs、excerpts、titlesを効率的に取得できます。

    GraphQLページ（GraphQLクエリコードと実行ボタンが表示されている）
    GraphQLクエリを実行する

    GraphiQL IDEの右側で、GraphQLクエリを実行し返された投稿一覧を見ることができます。WordPressのGraphQLエンドポイントは、https://your_wordpress_staging_url/graphql でアクセスできます。

AstroをWordPressに接続する

AstroをWordPressに接続するには、以下の手順に従ってください。

  1. Astroプロジェクトのsrcフォルダ内にgraphqlというフォルダを作成します。
  2. graphqlフォルダ内にwordPressQuery.tsファイルを作成します。
  3. wordPressQuery.tsファイルの中で以下のコードを使用します。https://your_wordpress_staging_url/graphqlをWordPressのステージング環境のURLに置き換えてください。 
    interface gqlParams {
    query: String;
    variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
    const res = await fetch('https://your_wordpress_staging_url/graphql', {
        method: "post",
        headers: {
            "Content-Type": "application/json",

        },

        body: JSON.stringify({
            query,
            variables,
        }),
    });

    if (!res.ok) {
        console.error(res);
        return {};
    }

    const { data } = await res.json();
    return data;
}

    このコードにより、WordPressサイトへのGraphQLクエリを容易にする非同期関数wpqueryとインターフェースgqlParamsが定義されます。

AstroとWordPressでサイトを開発する

  1. Astroで静的ページを新規作成するには、src/pagesディレクトリにblog.astroという名前のファイルを作成します。
  2. 新しく作成したファイルに以下のコードを貼り付けます。 
    ---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";

const data = await wpquery({
	query: `
 	 {
		posts{
			nodes{
				slug
				excerpt
				title
			}
 		 }
	 }  
 	`,
});
---

<Layout title="AstroとWordPressを使ったブログ記事ページ">
	<main>
		<h1><span class="text-gradient">ブログ記事一覧</span></h1>

		{
			data.posts.nodes.map((post: any) => (
				<>
					<h2 set:html={post.title} />
					<p set:html={post.excerpt} />
				</>
			))
		}
	</main>
</Layout>
<style>
	main {
		margin: auto;
		padding: 1rem;
		width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 20px;
		line-height: 1.6;
	}

	h1 {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-bottom: 1em;
	}
</style>

    このコードが、wpquery関数を使用して、GraphQLを介してWordPressサイトからデータをフェッチし、Astro サイトにレンダリングします。

  3. npm run devを使用してローカルの開発サーバーを起動し、http://localhost:4321/blogでAstroサイト上のWordPressのブログページを確認してみましょう。

    WordPressの投稿を表示中のAstroプロジェクトページ
    Astroプロジェクト内のWordPressの投稿を表示する

個々のブログ記事のルートを動的に処理するには、Astroの動的ルーティングとWordPress GraphQLのクエリ変数を組み合わせて使用することができます。クエリ変数として投稿IDまたはスラッグを渡すことで、各ブログ記事のコンテンツを動的に生成します。これにより、ウェブサイト上でのより柔軟なユーザー体験の提供が可能になります。

静的サイトをKinstaにデプロイする

続いては、お好みのGitサービス（Bitbucket、GitHub、またはGitLab）にコードをプッシュします。次に、以下の手順に従って静的サイトをKinstaにデプロイしてください。

  1. MyKinstaで「静的サイト」＞「サイトの追加」の順にクリックします。
  2. GitサービスでKinstaを認証します。
  3. 「GitHubリポジトリ」と「デフォルトのブランチ」を選択します。静的サイトの「表示名」を入力し、「コミットに際し自動でデプロイ」を選択します。これにより、リポジトリに変更が加えられるたびに自動でデプロイが実行されます。「続行」をクリックします。
  4. 「ビルド設定」セクションではKinstaのシステムにより自動ですべてのフィールドに情報が入力されます。そのままの状態で「サイトを作成」をクリックします。
  5. デプロイが完了したら、サイトの概要ページにドメインとして表示されるURLにアクセスしてAstroサイトをチェックしてみましょう。https://your_kinsta_site_url/blogを介してブログページが確認可能です。

まとめ

AstroとWordpressでできることはまだまだあります。WordPressのAPIを使用して、サイトからさまざまなデータにアクセスし、Astro独自のユースケースを構築可能です。

KinstaのWordPress専用マネージドホスティングは、堅牢なインフラストラクチャ、世界規模のCDN、エッジキャッシュ、複数のデータセンター、およびエンタープライズレベルの機能を誇り、WordPressサイトの高速かつセキュアな環境をお届けしています。

さらに、ヘッドレスWordPressでAstroのようなフロントエンドフレームワークを使用する場合、その静的ファイルをKinstaの静的サイトホスティングで無料でホストすることができます。WordPressホスティングにかかる料金のみのお支払いとなり効率化と費用カットに効果的です。

ヘッドレスWordPressとAstroについてどう思われますか？具体的なプロジェクトのアイデアはお持ちでしょうか？以下のコメント欄でお聞かせください。

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。