Cloudflare Pagesにウェブサイトを公開する

今回は、Astro で作成をした Web サイトを Cloudflare Pages に展開します。これにより、CDN を利用した Web サイトのホスティングが実現でき、かつ小さな規模なので無料で利用できます。

前提条件

今回展開をする Web サイトは以下のような構成をしています。

基本的には静的サイトを展開する形でシンプルな形です。これまで Netlify で立ち上げていた haramizu.jp のサイトを展開します。

まず最初に Cloudflare に GitHub で管理しているサイトを展開します。Cloudflare にログインをして、右上にある + Add のボタンをクリックして、Pages を選択します。

Import an existing Git repository をクリックします。

対象となる GitHub リポジトリを選択します。

次の画面では Astro を Framework preset として選択して、環境変数を設定します。

Deploy が開始します。Build をしばらく眺めてください。

完了すると以下の画面が表示されて、サイトの参照ができるようになります。

サイトにアクセスをすると、無事サイトの展開が完了していることを確認できます。

Cloudfrare Pages で独自ドメインで無料でホスティングする際には、DNS サーバーを Cloudflare に切り替える必要があります。

作成をしたプロジェクトを開いて、Custom Domains のメニューを開きます。

利用したいドメインを指定します。

次の画面で、DNS 管理を移管の手順を開始する画面が表示されます。

今回は Quick scan for DNS reccords を選択します。また、AI のクローラー対策に関する設定も表示されます。それほど大したコンテンツがあるわけではないので、AI に渡してもよしということで、以下のように設定しました。

続いてプランに関しての情報が出てきます。今回は Free を選択します。

既存の DNS からレコードを引っ張ってきて、レコード一覧が作成されます。念のため全て含まれているか確認をしましょう。

レコードに問題ない形となった際には、DNS サーバーのレコードを変更します。私の場合はドメインのレジストラは GoDaddy を利用しているため、DNS サーバーの変更の項目から指定された DNS に変更しました。

24時間ぐらい変更が反映されるのに時間がかかるというメッセージが表示されます。

実際には 30 分ぐらいで DNS サーバー自体は切り替わりました。証明書なども自動的に発行されて、以下のように証明書も新しくなってサイトが立ち上がりました。