Cloudflare Pages へ Astro ブログをデプロイする

2024-03-21

はじめに

Astro は、ブログやマーケティング、e コマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。
Cloudflare に Astro フレームワークを使ったブログをデプロイします。
Astro Docs の Astro サイトを Cloudflare Pages にデプロイするで 3 つの方法が紹介されていましたが、今回は、Cloudflare Pages ダッシュボードからデプロイする方法で行います。

Astro サイトを Cloudflare Pages にデプロイする 3 つの方法
- Cloudflare Pages ダッシュボードからデプロイする
- Cloudflare の CLI である Wrangler を利用しデプロイする
- SSR サイトを@astrojs/cloudflare を使ってデプロイする方法

事前準備

Github に Astro ブログのリポジトリを準備しておくこと

Cloudflere Pages に Git リポジトリを登録する

Cloudflere Pages の設定画面から Astro Blog を登録した Git リポジトリを登録します。

Workers & Pages -> Pages -> Git に接続
GitHub に接続 -> 認証ユーザーを選択(ログインが必要) -> 対象のリポジトリを選択 -> Install & Authorize

Cloudflere Pages のアプリケーションを作成する

Cloudflare Pages の設定画面からアプリケーションの取得元リポジトリやビルド方法を設定します。

リポジトリを選択 -> セットアップの開始
ビルドとデプロイのセットアップの入力
- プロジェクト名: ha1hai-blog
- プロダクションブランチ: main
- ビルド設定
  - フレームワークプリセット: astro
  - ビルドコマンド: rpm run build
  - ビルド出力ディレクトリ: dict
保存してデプロイする

サイトを確認する

ブラウザから有効になったサイトにアクセスできることを確認します。

デプロイ完了後に、プロジェクトに進む
自動生成されたドメインドメインを確認: ha1hai-blog.pages.dev
- ex: {project-name}.pages.dev
URL にアクセスし、サイトが表示されていることを確認する
- https://ha1hai-blog.pages.dev

サイトを更新する

GitHub の修正がサイトに反映されることを確認します。

GitHub リポジトリに変更を追加し、プロジェクションブランチ(今回はmainを指定)を更新し、push
自動で変更を検知した Cloudflare がデプロイを実行
URL にアクセスし、サイトが更新されていることを確認する
- https://ha1hai-blog.pages.dev

まとめ

操作が簡単で、すぐに Cloudflare Pages へのデプロイが完了しました。
実施したのは、GitHub の対象リポジトリを指定し、ビルドコマンドを指定（今回は Astro フレームワークのデフォルト）しただけです。
現在は、自動生成された Cloudflare のドメイン(example.pages.dev)上に構築されているため、次はカスタムドメインを有効にしたいと思います。

haihai Blog