はじめかた

Deploy to Cloudflare ボタンを押す見出しのリンクをコピー

ボタンは、スターターキットの README にあります。押すと Cloudflare の設定フォームが開き、GitHub との連携を求められます。同じフォームで次の手順のシークレットも入力するので、入力してから先へ進んでください。そのあとは、Cloudflare が次の作業を自動で進めます（Cloudflare: Deploy buttons）。

• starter を、あなたのアカウントの新しいリポジトリにコピーする
• D1 データベースを作る
• Workers Builds で Worker をビルドしてデプロイする

設定フォームでは 「Create private Git repository」にチェックを入れてください。リポジトリは private にする必要があります。理由は配布と更新のしくみにあります。

public で作られてしまったら、GitHub で Settings > General > Danger Zone > Change visibility を開き、private を選びます。private にするまで、starter の公開範囲チェックのワークフローは push のたびに失敗します。

設定フォームに入力する見出しのリンクをコピー

前の手順と同じ設定フォームで、次の値を入力します。必須の値は APP_SECRET と ADMIN_EMAILS の 2 つです。シークレットは、Worker に保存する秘密の値です。後から Cloudflare のダッシュボードで、Worker の設定の変数とシークレットから設定や変更もできます。

次の表は、各項目をいつ入れるか、失くしたとき・消したときに何が起きるかをまとめたものです。

設定フォームは、これらの値を作りません。32 文字より短い値は、設定していないのと同じ扱いです。その値を使う機能は止まります。同じ文字や短い文字列の繰り返しのように、明らかにランダムでない値も同じ扱いで、セットアップの画面に置き換えるべきシークレットの名前が表示されます。

手元のパソコンのターミナルで次のコマンドを実行すると、条件を満たす 44 文字のランダムな文字列を作れます。

openssl rand -base64 32

1 つの値を 2 つのシークレットに使い回さないでください。シークレットはリポジトリにコミットしないでください。

Worker は、Web Crypto の HKDF を使って APP_SECRET から 2 つの鍵を作ります。1 つは管理画面のログインセッションの署名に、もう 1 つは IP アドレスのハッシュに使います。用途ごとに決まったラベルを使うので、一方の鍵がわかっても APP_SECRET やもう一方の鍵はわかりません。鍵をご自身で設定したい場合は、鍵を個別に設定するを参照してください。

最初のデプロイを確かめる見出しのリンクをコピー

Workers Builds に表示されるアドレスでサイトを開き、ページが表示されることを確かめます。

データベースのテーブルもできています。deploy スクリプトが、デプロイの前に D1 のマイグレーションを適用するからです。

Passkey を登録する前にドメインを追加する見出しのリンクをコピー

Passkey は、登録したときのドメインでしか使えません。workers.dev のアドレスで登録した Passkey は、管理画面を独自ドメインに移すと使えなくなります。

セットアップは最初の Passkey を登録した時点で閉じるので、新しいドメインで登録し直すこともできません。セットアップを開き直すには、データベースを手で書き換える必要があります（Passkey が使えないとき、失くしたとき）。そのため、最初の管理者を作る前に独自ドメインを追加してください。

1. Cloudflare のダッシュボードで、Worker にカスタムドメインを追加します。
2. wrangler.jsonc の "workers_dev": true を "workers_dev": false に変えて、コミットします。その後のデプロイで workers.dev のアドレスが無効になり、管理画面には独自ドメインからしか入れなくなります。ダッシュボードの切り替えは使わないでください。デプロイのたびに wrangler.jsonc が適用され、workers.dev がまた有効になります。プレビュー URL は starter で最初から無効です（"preview_urls": false）。

Turnstile を設定する見出しのリンクをコピー

Turnstile のウィジェットを作ります。ウィジェットのホスト名には、サイトを公開するドメインを入れます。サイトキーは wrangler.jsonc の TURNSTILE_SITE_KEY に、シークレットキーはシークレット TURNSTILE_SECRET に入れます。

設定するまで、問い合わせフォームは「お問い合わせフォームは準備中です」と表示し、送信を受け付けません。手順は Turnstile を設定するを見てください。

最初の管理者を作る見出しのリンクをコピー

管理画面は https:// でだけ動きます。

1. https://<独自ドメイン>/admin/ を開きます。管理者がまだいないので、セットアップ画面（/admin/setup）が開きます。
2. セットアップトークン に APP_SECRET の値を、メールアドレス に ADMIN_EMAILS に入れたアドレスを入力し、次へ を選びます。
3. Passkeyを登録 を選び、ブラウザやパスワード管理アプリで Passkey を作ります。保存先は、端末の間で同期されるもの（iCloud キーチェーン、Google パスワードマネージャー、パスワード管理アプリなど）を選んでください。2 つ目の Passkey を追加する画面は、まだありません（Passkey でのログイン）。お使いのブラウザやパソコンで Passkey を保存できないときや、失くしたときは、Passkey が使えないとき、失くしたときを見てください。

最初の Passkey を登録するとセットアップは完了し、セットアップ画面はそれ以降使えなくなります。シークレットの APP_SECRET は残してください。サイトはログインと IP アドレスのハッシュにこの値を使い続けます。SETUP_TOKEN を設定していた場合（鍵を個別に設定する）は、ここで削除します。決まりは最初の管理者の作成にあります。

任意: 管理画面の前に Cloudflare Access を置く見出しのリンクをコピー

Cloudflare Access で、ログインをもう 1 段増やせます。たとえば、メールで届くワンタイムコードです。50 ユーザーまで無料です。

推奨しますが、必須ではありません。Access があってもなくても、管理画面には必ず Passkey でのログインが必要です。

Access のアプリケーションは、次のパスに設定します。

• /admin、/admin/*
• /api/admin/*
• /api/setup
• /api/auth/*

/api/contact は公開したままにしてください。訪問者は問い合わせフォームからここに送信します。

Worker にも Access のトークンを確かめさせるには、変数を 2 つ追加します。

• ACCESS_AUD: アプリケーションの Application Audience (AUD) Tag
• ACCESS_TEAM_DOMAIN: たとえば your-team.cloudflareaccess.com

2 つは両方設定するか、両方とも設定しないでください。片方だけだと、管理用のパスは 503 を返します。詳しくはセキュリティモデルを見てください。

サイトを編集する見出しのリンクをコピー

サイトには日本語と英語のページがあります。両方を編集します。

• 会社の情報とテーマの 3 色: site.config.ts
• ページ: src/pages
• 記事: src/content

問い合わせフォームの項目はコードにはありません。管理画面で変えます（お問い合わせフォームの項目を変える）。

プライバシーポリシーの雛形は、公開する前に専門家に確認してもらってください。雛形の内容はプライバシーについてにまとめています。