← ブログ一覧
📖 約4分

jinbei-lab.dev 公開まで — Astro + Cloudflare Pages 構築備忘録

ドメイン取得からAstroサイト構築、Cloudflare Pagesデプロイ、カスタムドメイン設定まで、つまずいたポイントも含めた全記録

AstroCloudflare

登場人物

  • リナ社長 … 高校生なのに会社経営するやり手ギャル。テックにも強くてAI活用が得意。
  • タクヤ … 入社3年目の男性社員。真面目で少しだけコードが書ける。

「サイト作りたいんだけど」

リナ社長「タクヤ、jinbei-labって名前でサイト作りたいんだけど。ジンベエザメっぽい感じで、実験所みたいな雰囲気で」

タクヤ「どんな技術スタックで行きますか？」

リナ社長「Astroでしょ。ブログテンプレートあるから早いし、Cloudflare Pagesで無料でホスティングできるじゃん。ドメインもCloudflareで取ればDNS設定楽だし」

構成はこうなった。

要素選択
フレームワークAstro（blog テンプレート）
ホスティングCloudflare Pages（無料）
ドメインCloudflare Registrar（jinbei-lab.dev）
デプロイGitHub push → 自動ビルド

Astroプロジェクト作成

npm create astro@latest

テンプレートは blog を選択。タクヤが最初、日本語パスのフォルダで作業しようとしたら問題が起きた。

タクヤ「なんか同名のディレクトリが2個できてるんですけど」

リナ社長「あー、Windowsの文字コード正規化（NFC/NFD）の問題ね。日本語パスでnpmのプロジェクト作るとそうなることあるよ。ASCII パスに作り直して」

C:\Users\...\jinbei-lab のようにASCIIのみのパスに移したら問題なく動いた。

最初の設定変更

src/consts.ts のサイト名と説明を書き換え：

export const SITE_TITLE = 'jinbei-lab';
export const SITE_DESCRIPTION = 'AI・ロト解析・ダイビングなど、個人の実験と遊び場';

astro.config.mjs に本番URLを設定：

export default defineConfig({
  site: 'https://jinbei-lab.dev',
  integrations: [mdx(), sitemap()],
});

package.json の name も変更が必要だった。

リナ社長「デフォルトの @example/blog のままにしといたらCloudflare Pagesのビルドがエラーになるから、必ず変えておいて」

{ "name": "jinbei-lab" }

GitHubにプッシュ

リポジトリを作成してpush。このとき使う認証は Personal Access Token（PAT）で repo スコープを付与したものを使った。

git remote set-url origin https://<token>@github.com/jinbei-lab/jinbei-lab.git
git push -u origin master
# push後はトークンをURLから外す
git remote set-url origin https://github.com/jinbei-lab/jinbei-lab.git

Cloudflare Pagesの設定でハマった

ここが一番時間を食った。

タクヤ「リナ社長、エラーが出て繋がらないんですが。Error 1014: CNAME Cross-User Banned って」

リナ社長「アカウントどこで作った？」

タクヤ「えっと……admin@xxxxx.dev のアカウントで Pages プロジェクト作りました」

リナ社長「それが原因。ドメイン（jinbei-lab.dev）は xxxxxx@gmail.com のアカウントで登録してるじゃん。Cloudflareはアカウントをまたいだ CNAME を禁止してるから繋がらないんだよ」

ドメインと同じアカウント（xxxxxx@gmail.com）でPagesプロジェクトを作り直して解決した。

GitHub App 連携のトラブル

Cloudflare PagesからGitHubを連携しようとしたとき、もう一つ詰まった。

タクヤ「「Connect GitHub」を押したらGitHubのApp設定ページに飛んで、そのままCloudflareに戻ってこないんですが」

リナ社長「一回 GitHub 側で Uninstall してからやり直してみて」

GitHub → Settings → Applications → Cloudflare Pages を「Uninstall」→ Cloudflareから再度「Connect GitHub」。

新規インストールとして正常にOAuthリダイレクトが動いて、連携できた。

ビルド設定は以下の通り：

項目値
Framework presetAstro
Build commandnpm run build
Build output directorydist

カスタムドメイン設定

PagesプロジェクトのCustom Domainsタブで jinbei-lab.dev を追加。ドメインが同じCloudflareアカウントにあるため、DNS設定は自動で完了した。

タクヤ「あっさり繋がった」

リナ社長「最初からアカウント合わせてれば半日かからなかったな」

つまずきポイントまとめ

  1. Windowsの日本語パス問題 — npmプロジェクトはASCIIパスで作る
  2. package.json の name — @example/blog のままだとCloudflare Pagesがビルドエラー
  3. Cloudflareアカウントの統一 — ドメインとPagesプロジェクトは同じアカウントで管理する（Error 1014の原因）
  4. GitHub App連携 — 繋がらないときはUninstall→再インストールで解決

ドメイン取得からサイト公開まで半日かかったが、一度動けばGitHub pushだけで自動デプロイされる。

コメント