CloudflareとXserverドメインでAstroブログをデプロイした

import { Image } from ‘astro’;

タイトルの通りですが、 Astro を使って構築したブログを Cloudflare でホスティングして、 Xserver でドメイン名を取得して、Google Search Console でインデックス登録して Google さんに自分のブログが表示されるようにしました。

ここまでくればやっとブログを持ってるよ！と言えると思います。

あくまでも自分のためのメモというところで下記については触れません。

ブログの作成方法
ブログの作るに当たっての技術的なお話

目次#

Cloudflareに作ったブログをデプロイする
Xserverでドメインを取得する
CloudflareにXserverで取得したドメインを設定する
Google Search Consoleに登録する
おわり
- ポエム

Cloudflareに作ったブログをデプロイする#

Cloudflareに作成したAstroブログをデプロイする手順はめちゃくちゃ簡単で、公式ドキュメントに従うだけでデプロイできます。

Deploy your Astro Site to Cloudflare Pages 🚀 Astroドキュメント

もしかしたらCloudflareの公式(Deploy an Astro site · Cloudflare Pages docs)の方が詳細に説明してくれているのでそちらのほうがいいかもしれないです。

事前準備としてCloudflareのアカウントを作成しておきます。

また、作成したAstroブログはgitlabかgithubのリポジトリで管理するようにしておきます。

Cloudflare PagesからGit リポジトリに接続する
CloudflareのダッシュボードからPagesにいってAstroブログのGit レポジトリに接続します。
github or gitlabに接続完了したら、デプロイするastroブログのリポジトリを選択します。自分はgithubのリポジトリを使っていますが、プライベートリポジトリで作っています。
astroブログのビルド設定
公式ドキュメントに従って下記をビルド・デプロイ設定します。
注意するポイントとしては、Cloudflare PagesではNode.js 12.18.0を使用してビルドされるので、astroブログのビルドに対応できるようにビルド時のNode.jsのバージョンを上げる必要があります。
astroの公式では上記の設定でNODE_VERSIONをEnvironment variablesに設定するか、.nvmrcファイルをプロジェクトに作成するかみたいな感じで対応すると書いてありますが、自分はnvm使っていないので、.node-versionを作成してastroブログのプロジェクトに置いています。(.node-versionの書き方にも色々あるんですね)
デプロイして最低限のアクセス制限をする
2のビルド設定して、Save and Deployでデプロイします。いい感じに成功すればmainブランチの内容がそのままデプロイされるようになるので管理画面から確認します。 site-name.pages.devでアクセスできるはず。
Xserverでドメインを取得して設定するためにも、今の時点で最低限のアクセス制限をしておきます。
例えば間違ってリポジトリに投げたものはビルドしてほしくないし、一時的に動作確認のためのページは特定の人しかアクセスできないようにしたくなると思います。
Cloudflare Pagesではビルド・デプロイごとにUUIDが振られる(6f7as71.site-name.pages.devみたいな)ので、特定のブランチ以外はビルドが実行されないように、かつ*.site-name.pages.devへのアクセスは特定の人のみしかできないようにします。
はじめにビルドの設定ですが、Pages -> Settings -> Build & deploymentsのBranch deploymentsで自分は下記の設定をしています。 mainにpushされたらproduction 環境でデプロイして、ブログの内容の最終確認とかはdevにpushされたらpreviewとして見るようにしています。
続いてアクセス制限ですが、Pages -> Settings -> General の Access PolicyでEnable access policyを有効化してあげると、*.site-name.pages.devへのアクセスにメールアドレス入力とOTP入力が求められるようになります。簡単ですね。