EmDashをCloudflareに立ち上げる手順｜作成からログインまで

連載「WordPressからEmDashへ移行する」の第2回です。今回は、EmDashのサイトを作り、Cloudflareの仮アドレスで管理画面にログインできるところまでを進めます。

コマンドは、筆者がClaude Code（パソコンの中でコマンドを打ってくれるAI）に頼んで実行してもらいました。人が操作したのは、ブラウザでの許可、サブドメインの登録、管理画面の初期設定だけです。

この記事で出てくる言葉

手順1：EmDashのサイトを作る（手元のパソコン）

手順1-1：作成のコマンドを実行する

ターミナル（文字だけでパソコンを操作する画面）で、次のコマンドを実行しました。Node.js（JavaScriptのプログラムを動かす土台）とnpm（部品を取ってくる道具）を使います。

npm create emdash@latest site -- --template cloudflare:blog --pm npm --no-sandboxed-plugins --install --yes

• site：できるフォルダの名前です。
• --template cloudflare:blog：ブログ用・Cloudflare向けのテンプレート（サイトのひな形）です。
• --no-sandboxed-plugins：有料プランが必要な「サンドボックス型プラグイン」を使わない設定です。無料プランで動かすために付けました。

部品（666個）のインストールに、約1分かかりました。

手順1-2：npm 11 のときは2つの部品を許可する

作成のあと、手元でサイトが起動しませんでした。原因はnpm 11の仕様です。

npm install-scripts approve workerd esbuild
npm rebuild workerd esbuild

手順1-3：名前を自分のサイト用に変える

1. wrangler.jsonc（Cloudflare向けの設定ファイル）を開きます。
2. 初期値の名前（my-emdash-site など）を、自分のサイト用に変えます。

筆者は、Workerを manual-chang、D1を manual-chang-db、R2を manual-chang-media にしました。

作成のときに、次のファイルも自動で作られます。

• .env：暗号化キー（秘密の値）が入っています。git（変更の履歴を残す道具）には入らない設定になっています。
• .mcp.json：Claude CodeからEmDashの公式ドキュメントを検索できる設定です。

筆者は、ここでサイトのフォルダをgitで管理し始めました。

手順1-4：手元で起動を確認する

1. npm run dev を実行します。
2. ブラウザで http://localhost:4321 を開きます。
3. テンプレートの「My Blog」が表示されれば成功です。黒い背景で、記事は0件（「No posts yet」）です。

ここまで、作成から起動の確認まで約5分でした。

手順2：WranglerでCloudflareにログインする

1. npx wrangler login を実行します。
2. ブラウザに「Wrangler wants to access your account」の画面が開きます。
3. アカウントを確認して、「Authorize」を押します。
4. 「Authorization granted to Wrangler」と表示されれば完了です。

手順3：Cloudflareにデプロイする

手順3-1：最初のデプロイで止まる

npm run deploy を実行しました。中身は「組み立て（build）」と「wrangler deploy」です。結果は、次のエラーで失敗しました。

You need to register a workers.dev subdomain before publishing to workers.dev

手順3-2：workers.dev のサブドメインを登録する

1. Cloudflareのダッシュボード（管理画面）を開きます。
2. 左のメニューで「Compute」→「Workers & Pages」を開きます。
3. 右下の「Account details」にある「Subdomain」の欄で、鉛筆マークを押します。
4. 名前を決めて登録します。

この時点では、Workerはまだ0個（「No projects found」）です。右上には無料枠が表示されていました。1日10万リクエストまで無料で、請求額は $0.00 です。

決めた名前は、アカウント全体の仮アドレス <名前>.workers.dev になります。サイトの仮アドレスは https://<Worker名>.<名前>.workers.dev です。

手順3-3：もう一度デプロイする

1. もう一度 npm run deploy を実行します。
2. D1・R2・KVが自動で作られてから、アップロードされます。約30秒でした。

Cloudflareの画面でデータベースなどを自分で作る必要はありませんでした。wrangler.jsonc に書いた名前で作られます。

手順3-4：暗号化キーをCloudflareにも登録する

手順1-3で .env に作られた暗号化キーを、Cloudflare側にも登録します。

npx wrangler secret put EMDASH_ENCRYPTION_KEY

入れる値は、.env にあるものです。値は画面にもログにも出さないでください。

手順3-5：HTTPSのエラーが出たら1〜2分待つ

デプロイの直後、サイトを開くとHTTPSの接続エラーになりました。

手順4：データベースの準備を終わらせる

HTTPSのエラーが消えたあと、今度は「Database migrations are required」（503）と表示されました。

手順4-1：原因を知る

• データベースの準備（マイグレーション）は、全部で91段階あります。
• Workerは、最初のアクセスのときに自動で準備を進めます。ただし、重い段階（51段階目以降）は手元のコマンドで実行する仕様です。
• さらに、自動の実行が途中で止まり、「作業中」の印（ロック）が残っていました。

手順4-2：コマンドで残りを実行する

ここはClaude Codeが実行しました。

① wrangler.jsonc に、D1のIDを書き足します。自動で作られたD1は、IDが書かれていないため、コマンドがどのデータベースか特定できないからです。

② 状況を確認します。

npx emdash migrate --status

筆者の場合は、50段階まで完了、41段階が未実行で、ロックが残っていました。

③ 残りを実行します。<…> には、--status の結果に出る値を入れます。

npx emdash migrate --take-over-lock=<ロックのID> --expected-target-fingerprint=<確認用の文字列>

このコマンドには、CloudflareのアカウントIDとAPIトークンが必要です。環境変数 CLOUDFLARE_ACCOUNT_ID と CLOUDFLARE_API_TOKEN に入れて使いました。トークンは新しく発行せず、ログイン済みのWranglerから npx wrangler auth token で取り出しました。

手順4-3：表示を確認する

1. トップページが表示されることを確認します。
2. 管理画面 /_emdash/admin を開きます。
3. 初期設定の画面 /_emdash/admin/setup に移動すれば正常です。

サブドメインの登録から表示の確認まで、データベースのトラブル込みで約15分でした。

手順5：管理画面の初期設定をする

ここだけは人が操作します。

ブラウザで https://<Worker名>.<名前>.workers.dev/_emdash/admin を開きます。「サイトをセットアップ」の画面（日本語表示）が開きます。設定は「サイト」→「アカウント」→「ログイン」の3ステップです。

手順5-1：サイト

1. 「サイトタイトル」を入れます。筆者は「マニュアルちゃん」にしました。
2. 「キャッチフレーズ」を入れます。初期値は英語（Thoughts on building for the web）なので、今のサイトと同じ文に変えました。
3. 「どのように始めますか？」で、「空のサイト」を選びます。
4. 「続行 →」を押します。

手順5-2：アカウント

1. メールアドレスを入れます。

手順5-3：ログイン（パスキーを作る）

1. パスキーを作成します。MacではTouch IDを使いました。
2. 「パスキーを作成しました」と表示されます。
3. 「ダッシュボードを開く」を押します。

パスキーの確認、名前の変更、追加は、あとから「セキュリティ設定」でできると画面に表示されます。

パスキーとドメインの注意

パスキーは、アドレスごとに作られます。workers.devの仮アドレスで作ったパスキーは、本番のドメイン（manual-chang.com）では使えません。

• 最初は「パスキーは本番ドメインで登録しないといけない」と思っていました。
• 公式の「Move to a New Domain」ガイドを読むと、workers.devで作ってから本番に移す方法が用意されていました。
• 本番に切り替えるときに、管理画面の「設定」→「一般」→「ドメインを変更」から、新しいアドレス用のパスキーを登録し直せばよいです（第5回で実際にやりました）。

うまくいかないときは

まとめ

• npm create emdash@latest でサイトを作ります。npm 11では、workerdとesbuildの許可が必要です。
• Workersを初めて使うなら、デプロイの前にworkers.devのサブドメインを登録します。
• D1・R2・KVは、デプロイのときに自動で作られます。
• 「Database migrations are required」が出たら、npx emdash migrate で残りの準備を実行します。
• デプロイしたら、すぐに管理画面の初期設定をします。移行するなら「空のサイト」を選びます。

この回の終わりの時点で、EmDashは仮アドレス（workers.dev）で動き、管理者としてログインできます。記事はまだ0件です。本番のmanual-chang.comは、まだ古いWordPressのままなので、読者からは何も変わって見えません。

次回は、第3回「WordPressの記事をEmDashに移す手順｜無料プランで止まった時の対処」です。ここでCloudflareの無料プランの上限に当たります。

連載の他の回

• 第1回 【図解】WordPressからEmDashへ移行する手順（準備編）
• 第3回 WordPressの記事をEmDashに移す手順｜無料プランで止まった時の対処
• 第4回 EmDashでデザイン・フォーム・SEOを作り直す手順｜移行後の仕上げ
• 第5回 ドメインをCloudflareに切り替える手順｜EmDash移行の仕上げ
• 第6回 ClaudeとEmDashのMCP連携｜記事を下書き保存する手順