とある案件の関係で、AstroプロジェクトでWebサイトを作成しました。
そこで公開する時に「Cloudflare Pages」を利用したので、その手順をまとめておきます。
またGitHubリポジトリにプッシュしている前提で進めます。
事前準備
- Cloudflareアカウントの作成
- Astroプロジェクトの作成
- GitHubリポジトリの作成しAstroプロジェクトをプッシュしておく
Cloudflare Pagesでの設定
- Cloudflareのアカウントを作成してログインを行います。
- ダッシュボードの前に「Create a Worker」の画面に遷移しますが、ここでは下の「Get started」をクリックします。
- ダッシュボード画面に遷移したら、左メニューの「Workers & Pages」の画面を開き、右上の「+」ボタンをクリックすると「Pages」メニューが表示されるので、こちらをクリックします。
- 「Get Started」画面では上の「Import an existing Git repository」の方の「Get started」ボタンをクリックします。
- この画面で「GitHub account」をクリックしてGitHubアカウントとプロジェクトの連携を行います。（プロジェクトはすべて選択か一部だけ選択なのかを選択します。）
- デプロイするプロジェクトに関する情報を入力します。
- Production branch：デプロイするブランチを選択します。（通常はmain）
- Framework preset：Astroを選択します。
- Build command：ビルドコマンドを入力します。（通常はそのまま）
- Build output directory：出力ディレクトリを入力します。（通常はそのまま）
- Root directory：ルートディレクトリを入力します。（私の場合はサブディレクトリ「src」にAstroプロジェクトがあるため「src」と入力しました。）
- 入力が完了したら「Save and Deploy」ボタンをクリックするとデプロイが開始されます。
- デプロイが完了すると、デプロイの詳細画面が表示されます。ここで公開されたWebサイトのURLが確認できます。
これでCloudflare PagesにAstroプロジェクトをデプロイすることができました。
またGitHub Actionsなどで自動デプロイの設定を行うことも可能ですので、別途まとめるようにします。