Astroでビルドした静的WebサイトをGitHub経由でCloudflare Pagesに自動デプロイする方法

AstroとCloudflare Pagesを使い、サイトをビルドし、デプロイする方法について説明されています。Cloudflare PagesとGitHubのリポジトリを連携させ、接続するGitリポジトリを選んで、ビルド設定を行い、環境変数をAdvancedメニューから設定しましょう。その後、ビルド・デプロイログを追跡し、デプロイが完了するとサイトにアクセスできるようになります。最後に、定期的にビルドするには、GitHub Actions側からWranglerでデプロイする方法が良さそうです。

広告ここから
広告ここまで

目次

    2022年ごろから話題になっているJSフレームワークのAstroを触ってみました。

    並行してCloudflareについても勉強中なので、ビルドしたサイトをPagesへデプロイする方法を試してみた覚書です。

    Cloudflare PagesとGitHubのリポジトリを連携させる

    Cloudflare Pagesのプロジェクトを作成する際に、[Connect to Git]を選択します。

    接続するGitリポジトリを選びましょう。2023/04時点では、GitHubとGitLabが選べます。

    初めての場合、GitHubへの連携を許可する画面が開きます。Organizationにつなぐ場合などでは、リポジトリを指定する[Only select repositories]の方が良いかもしれません。

    接続の設定が終われば、あとはリポジトリを選択します。

    Astroで構築したアプリのデプロイ設定を行おう

    ブランチとビルドの設定を行いましょう。

    ある程度ユーザーのいる?知名度のある?フレームワークはプリセットがある様子です。

    環境変数は、Environment variables(Advanced)から設定しましょう。

    NODE_VERSIONの設定を行おう(2023/04時点)

    NODE_VERSION16など新しいバージョンを設定する必要があります。デフォルトではNodeのバージョンが12系らしく(2023/04時点)、Astroのビルドがコケるためです。

    error @astrojs/[email protected]: The engine "node" is incompatible with this module. Expected version ">=16.12.0". Got "12.18.0"

    この辺りは、Cloudflare側でアップデートされ次第対応が不要になるとは思います。

    ビルド・デプロイログを見守る

    設定が終われば、ビルドとデプロイが始まります。

    エラーが発生した場合は、ログを確認しましょう。

    ビルドごとの詳細ページでも、Build logから確認できます。

    デプロイしたサイトにアクセスする

    デプロイが完了すれば、Pagesのプロジェクトトップページにドメインなどが表示されます。

    CRONなどで定期的にビルドしたい場合

    SSGモードで運用する場合、毎日特定時間にビルドするなどの運用をしたくなります。

    その場合、自分が調べた範囲では、GitHub Actions側からWranglerでデプロイした方が良さそうかなと思いました。

    方法は「Cloudflare Pagesへのデプロイを、GitHub Actionsから行う方法」で紹介していますので、こちらも参考にしてください。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark