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 にアクセスし、サイトが表示されていることを確認する
サイトを更新する
GitHub の修正がサイトに反映されることを確認します。
- GitHub リポジトリに変更を追加し、プロジェクションブランチ(今回は
main
を指定)を更新し、push - 自動で変更を検知した Cloudflare がデプロイを実行
- URL にアクセスし、サイトが更新されていることを確認する
まとめ
操作が簡単で、すぐに Cloudflare Pages へのデプロイが完了しました。
実施したのは、GitHub の対象リポジトリを指定し、ビルドコマンドを指定(今回は Astro フレームワークのデフォルト)しただけです。
現在は、自動生成された Cloudflare のドメイン(example.pages.dev
)上に構築されているため、次はカスタムドメインを有効にしたいと思います。