「読むだけでは、よく分からない」。新しい道具は、触ってみるのが一番早いです。シリーズ「WordPressからEmDash移行」の第5回は、EmDash導入の実践として、EmDashを実際にCloudflareへデプロイしてみます。
今回の記事は、2026年10月22日に、テスト用のCloudflareアカウントの画面で実際に操作した記録です。コマンドの出力と、Cloudflareの管理画面の様子を、順番に紹介します。EmDashのデプロイの流れをつかんで、移行の前に試す練習にしてください。
EmDash導入の結論：コマンド3つで、公開用のサイトができる
先に結論です。実際に使ったコマンドは、この3つだけでした。
| 順番 | コマンド | やること |
|---|---|---|
| 1 | npm create emdash@latest |
プロジェクトを作る |
| 2 | npm run build |
サイトをビルドする |
| 3 | npx wrangler deploy |
Cloudflareへデプロイする |
デプロイすると、データベース（D1）や画像の置き場（R2）などは、Wranglerが自動で作ってくれます。自分でCloudflareの管理画面を開いて、1つずつ作る必要はありません。
EmDash導入の準備：プロジェクトを作る
第4回で確認した準備（Cloudflareのアカウント、Node.js 22.22以降）がそろったら、プロジェクトを作ります。今回は、Cloudflare向けのブログのテンプレートを、コマンドの引数で指定しました。
npm create emdash@latest my-emdash-test -- --template cloudflare:blog --pm npm --install --no-sandboxed-plugins --yes
主な引数の意味は、次のとおりです。
| 引数 | 意味 |
|---|---|
--template cloudflare:blog |
Cloudflare向けのブログのテンプレート |
--pm npm |
パッケージ管理にnpmを使う |
--install |
作成のあとに、依存関係をインストールする |
--no-sandboxed-plugins |
サンドボックス化したプラグインを無効にする（初期値）。有効にするには、Workers Paidが必要 |
--yes |
質問をスキップして、初期値で進める |
実行すると、665個のパッケージがインストールされ、1分ほどでプロジェクトができました。引数を付けずにnpm create emdash@latestだけを実行すれば、対話式に選べます。
EmDash導入の設定：wrangler.jsoncを確認する
プロジェクトのwrangler.jsoncには、Cloudflareで使うサービスの設定が書かれています。今回は、あとで見つけやすいように、名前だけを変えました。
{
"name": "emdash-demo",
"main": "./src/worker.ts",
"compatibility_flags": ["nodejs_compat"],
"d1_databases": [{ "binding": "DB", "database_name": "emdash-demo-db" }],
"r2_buckets": [{ "binding": "MEDIA", "bucket_name": "emdash-demo-media" }],
"triggers": { "crons": ["* * * * *"] }
}
公式のドキュメントでは、DBやMEDIAといったバインディング名は、EmDashのアダプターと一致させる必要がある、とされています。また、一度デプロイしたあとは、リソースの名前を変えないよう注意されています。名前を変えると、別のリソースとして扱われるためです。
triggersのCron式は、予約公開やバックアップ、メンテナンスを、毎分実行するための設定です。
EmDashデプロイの手順：ビルドとデプロイ
ログインとビルド
Cloudflareへのデプロイには、Wranglerでの認証が必要です。npx wrangler loginを実行すると、ブラウザでCloudflareの許可画面が開きます。「Wranglerがアカウントにアクセスしようとしています」と表示されるので、内容を確認して許可します。許可の範囲には、WorkersやD1などの書き込み権限が含まれています。
ビルドは、次のコマンドです。今回は、約27秒で終わりました。
npm run build
デプロイ
最後に、デプロイです。
npx wrangler deploy
初めてのデプロイでは、Wranglerが、設定に書かれたリソースを、次の順番で作りました。
| 作られたもの | 名前 |
|---|---|
| KVの名前空間（ログインのセッション用） | emdash-demo-session |
| D1データベース | emdash-demo-db |
| R2バケット | emdash-demo-media |
そのあと、Workerがアップロードされ、公開用のURLが表示されます。Workerの起動時間は19 msでした。Cron Triggerも、「schedule: * * * * *」として登録されています。
EmDashデプロイの結果：Cloudflareの画面で確かめる
デプロイが終わったら、Cloudflareの管理画面で、何が作られたかを確かめます。
Workerの概要
Workerの概要の画面では、バインディング（Workerが使うサービスとのつなぎ）が5つ表示されています。アセット、D1データベース、画像変換（Images）、R2バケット、KVです。トリガーも1つ（Cron）あります。
D1データベース
D1の一覧に、emdash-demo-dbが増えています。画面の使用量には、読み取られた行数と書き込まれた行数が表示されていて、無料枠の上限（読み取り1日500万行、書き込み1日10万行）に対する使用量が確認できます。
R2バケット
R2にも、emdash-demo-mediaのバケットが作られました。
EmDashの初期設定：サイトを開いて、セットアップする
公開用のURLを開くと、サンプルのブログが表示されました。
テンプレートのままなので、タイトルは「My Blog」、投稿は「No posts yet（まだ投稿がありません）」です。
管理画面は、/_emdash/admin/にあります。最初にアクセスすると、サイトのセットアップの画面が開きます。
1つ目の画面では、サイトタイトルとキャッチフレーズを決めます。始め方は、3つから選びます。
| 選択肢 | 中身 |
|---|---|
| Sample content | テンプレートのサンプルの投稿とページを入れて始める（新しいサイト向け） |
| Empty site | コンテンツの種類だけを用意して、中身は空で始める |
| Import an existing EmDash site | セットアップのあとに、ほかのEmDashのサイトから書き出した.emdashのパッケージを取り込む |
次の画面では、管理者のアカウントを作ります。
メールアドレスと名前を入れて進むと、3つ目の画面でログイン（パスキーの登録）になります。パスキーは、パスワードの代わりに、端末の指紋認証などで本人確認をする仕組みです。
あるある：セットアップを、後回しにしてしまう
ここで、1つ注意があります。公式のデプロイの案内には、プレビュー用のデータベースが空の場合、最初に訪れた人が、セットアップを完了して管理者になれるため、すぐに完了するか、Cloudflare Accessで保護するよう書かれています。
本番のサイトも、セットアップが終わるまでは、管理者がまだいない状態です。デプロイしたまま後回しにすると、URLを知っている誰かが、先に管理者になる可能性があります。ごはんにたとえるなら、お店を開けたまま、「準備中」の札を出し忘れて、誰でも厨房に入れる状態です。デプロイしたら、すぐにセットアップを済ませるのが安全です。パスキーは、登録したホスト名でしか使えないので、本番に使うドメインで初期設定をするのがおすすめです。
EmDashデプロイのあと片づけ：テスト用のリソースを消す
今回のように試しで作ったものは、使い終わったら削除します。作ったものは、Worker、D1、R2、KVの4つです。放っておくと、管理画面に不要なものが残ります。
# Workerを削除する
npx wrangler delete emdash-demo
# D1データベースを削除する
npx wrangler d1 delete emdash-demo-db
# R2バケットを削除する
npx wrangler r2 bucket delete emdash-demo-media
KVの名前空間は、管理画面の「Workers KV」から削除します。削除は取り消せないので、名前をよく確かめてから実行してください。
今回のまとめと次回予告
| 項目 | 内容 |
|---|---|
| EmDash導入の手順 | 作る（create）、ビルド（build）、デプロイ（wrangler deploy） |
| 自動で作られるもの | KV（セッション）、D1（データ）、R2（画像） |
| 設定 | wrangler.jsonc。バインディング名は変えない |
| 注意 | セットアップが終わるまで、最初のアクセス者が管理者になれる |
| あと片づけ | 試しで作ったものは、名前を確かめて削除する |
次回は、WordPressの記事を、EmDashへ移す方法を整理します。
ほかのCloudflare関連の記事は、当ブログの技術ネタからどうぞ。
参考
ITもごはんも、腹八分目が長続きのコツ！
コメント