EmDash日本語ガイド
記事一覧

EmDashを公開前に手元で確かめる｜wrangler devでのローカル表示

EmDashのサイトは、Cloudflareにログインしなくても自分のパソコンの中で本番と同じ形で動かせます。編集部が astro build と wrangler dev で記事の表示まで確かめた手順をまとめます。

EmDash日本語ガイド 編集部

約2分で読めます

EmDashを公開前に手元で確かめる｜wrangler devでのローカル表示
書いた人
  • EmDash日本語ガイド 編集部
公開日
読む時間
約2分

EmDash のサイトを Cloudflare へ公開する前に、自分のパソコンの中で本番と同じ形で動かして確かめられます。この確認には Cloudflare へのログインは要りません。編集部はこの方法で、記事・固定ページ・お問い合わせ・RSS が表示されることを公開前に確かめました。

1. ビルドする

雛形のフォルダで次を打ちます。

npx astro build

最後に Complete! と出れば成功です。dist フォルダができ、その中の dist/server/wrangler.json が「本番で動かすときの設定」になります。雛形の wrangler.jsonc を元に、ビルドが自動で作るファイルです。

2. 手元で動かす

続けて次を打ちます。

npx wrangler dev --port 8799 --ip 127.0.0.1

Ready on http://127.0.0.1:8799 と出たら、ブラウザでそのアドレスを開けます。データベース（D1）や画像の置き場（R2）は、パソコンの中の作り物で代わりに動きます。.wrangler フォルダに保存されるので、止めて動かし直しても中身は残ります。

なお wrangler dev は、ビルドが残した .wrangler/deploy/config.json を見て dist/server/wrangler.json の設定を使います。設定やページを直したら、先に `npx astro build` をやり直してください。ビルドし直さないと、古いままの画面が出ます。

3. 最初は「初期設定がまだ」の状態

起動した直後のサイトは、データベースが空です。/_emdash/api/setup/status を開くと、次のような返事が返ってきました（一部）。

{"success":true,"data":{"needsSetup":true,"step":"start", ...}}

needsSetup: true は「初期設定がまだ」という意味です。初期設定を済ませると、seed/seed.json に入れておいた記事がデータベースへ入ります。初期設定の流れと、その間の守り方は「EmDashの初期設定は公開直後が危ない」に書きました。

4. 表示を確かめる

編集部は、初期設定のあとで次のページが表示されること（返事の番号が 200 であること）を確かめました。

  • トップ /
  • 記事一覧 /posts と、各記事 /posts/<スラッグ>
  • 固定ページ /pages/about・/pages/privacy
  • お問い合わせ /contact
  • /rss.xml・/sitemap.xml

ページの言語も <html lang="ja"> になっていました（設定は「日本語フォントの記事」）。

止めるとき

wrangler dev を動かしている画面で Ctrl + C を押すと止まります。

関連記事

続けて読む

記事一覧