https://blog.plzhans.com/ja/tags/build/Recent content in Build on plzhans blogHugojaFri, 11 Sep 2026 13:01:00 +0000https://blog.plzhans.com/ja/posts/126-cloudflare-workers-wrangler-dev-deploy/Fri, 11 Sep 2026 13:01:00 +0000https://blog.plzhans.com/ja/posts/126-cloudflare-workers-wrangler-dev-deploy/<p><picture> <source srcset="https://blog.plzhans.com/posts/126-cloudflare-workers-wrangler-dev-deploy/assets/1_3d822a0f-7e83-81f6-b43f-ee90a3347422_hu_696076b6bfb95313.webp" type="image/webp"> <img src="https://blog.plzhans.com/posts/126-cloudflare-workers-wrangler-dev-deploy/assets/1_3d822a0f-7e83-81f6-b43f-ee90a3347422_hu_5708cb739124f2fe.png" alt="ローカルで動かしたWorkerランタイムがそのままエッジプラットフォームへ上がっていく過程を表した代表画像" width="1200" height="630" loading="lazy"> </picture></p> <h2 id="概要">概要</h2> <blockquote> <p>この記事は <a href="../124-cloudflare-workers-static-site-guide/">Cloudflare Workers 静的サイトガイド - デプロイからSEOまで</a> シリーズの一部です。</p> </blockquote> <p>Cloudflare Workersを扱う仕事は、実質的に<strong><code>wrangler</code> を扱う仕事</strong>です。ローカルで立ち上げるのも、デプロイするのも同じCLIです。</p> <p>ところが名前のせいで誤解が一つ生まれます。<strong><code>wrangler dev</code> はフロントエンドの開発サーバーではありません。</strong> 筆者も最初はここでしばらく悩みました。</p> <h3 id="この記事で扱うこと">この記事で扱うこと</h3> <ul> <li>何をインストールすべきか — そして<strong>ランタイム依存は増えない</strong>ということ</li> <li>Workerコードの<strong>型設定を分離</strong>すべき理由</li> <li><code>wrangler dev</code> が実際に何をするのか · <code>vite dev</code> との違い</li> <li>なぜ<strong>静的サイトのビルドが先</strong>でなければならないのか</li> <li>Workerがレスポンスを直したか確認する方法</li> <li>デプロイ — 環境ごとの値の注入 · CIで動かすときの注意点</li> </ul> <h3 id="扱わないこと">扱わないこと</h3> <p>Workers Static Assetsの構造とリクエストの流れは <a href="../125-cloudflare-workers-static-assets-routing-billing/">Cloudflare Workers 静的サイトホスティング - リクエストの流れと課金基準</a> にあります。</p> <h3 id="前提">前提</h3> <p>Cloudflareのアカウントがあり、静的サイトをビルドできること（<code>npm run build</code> → <code>dist/</code>）以外に必要な事前知識はありません。</p> <hr> <h2 id="wrangler-のインストール">wrangler のインストール</h2> <p>CloudflareのCLIです。ローカル実行とデプロイの両方を担当します。コマンド一覧は <a href="https://developers.cloudflare.com/workers/wrangler/commands/" target="_blank" rel="noopener noreferrer">Commands ドキュメント</a> にあります。</p> <h3 id="インストールしないという選択肢">インストールしないという選択肢</h3> <p><code>wrangler</code> は<strong>デプロイツールであってアプリケーションコードではありません。</strong> そのため依存に入れず、必要なときだけダウンロードして使うこともできます。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl"><span class="c1"># As a devDependency</span> </span></span><span class="line"><span class="ln">2</span><span class="cl">npm i -D wrangler </span></span><span class="line"><span class="ln">3</span><span class="cl">npx wrangler dev </span></span><span class="line"><span class="ln">4</span><span class="cl"> </span></span><span class="line"><span class="ln">5</span><span class="cl"><span class="c1"># Or without installing - pin the major version</span> </span></span><span class="line"><span class="ln">6</span><span class="cl">npx wrangler@4 dev </span></span><span class="line"><span class="ln">7</span><span class="cl">pnpm dlx wrangler@4 dev </span></span></code></pre></div><p>後者の利点は、<strong>ローカルとCIが同じバージョンを使い</strong>、アプリの <code>package.json</code> にデプロイツールが入らないことです。欠点は毎回ダウンロードの時間が少しかかることです。</p>