Table of contents
Open Table of contents
はじめに
Astro は、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。 Cloudflare に Astro フレームワークを使ったブログをデプロイします。
Astro Docs の AstroサイトをCloudflare Pagesにデプロイする に以下3つの方法が紹介されていましたが、今回は、Cloudflare Pagesダッシュボードからデプロイする方法で行います。
- 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)上に構築されているため、次はカスタムドメインを有効にしたいと思います。