<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line">Cloudflare Workers &amp; Pagesを扱う上で、環境変数の指定方法がいくつかあります。<br>
毎回設定する際にこんがらがりそうなので、この記事で要点をまとめます。</p>
<p data-line="4" class="code-line">※公式ドキュメント参照<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e2d1fad2de89f" src="https://embed.zenn.studio/card#zenn-embedded__e2d1fad2de89f" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fworkers%2Fconfiguration%2Fenvironment-variables%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/workers/configuration/environment-variables/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/workers/configuration/environment-variables/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__23a954e5001b5" src="https://embed.zenn.studio/card#zenn-embedded__23a954e5001b5" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fworkers%2Fconfiguration%2Fsecrets%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/workers/configuration/secrets/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/workers/configuration/secrets/</a></p>
<h1 id="%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0" aria-hidden="true"></a> 開発環境における環境変数</h1>
<h2 id=".dev.vars%E3%81%AB%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%82%92%E6%9B%B8%E3%81%8F" data-line="9" class="code-line">
<a class="header-anchor-link" href="#.dev.vars%E3%81%AB%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> .dev.varsに環境変数を書く</h2>
<p data-line="10" class="code-line">プロジェクトに.dev.varsというファイルを作成し、.env.localといった一般的に使われる環境変数管理ファイルと同じノリで環境変数を書く手法です。<br>
<strong>個人的に開発時はこれがいいと思います。</strong></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="14" class="code-line"><strong>注意1："値はダブルクオーテーションで囲うこと"</strong> 💡<br>
ダブルクオーテーションで囲わないと値が認識されないです。<br>
忘れずに囲いましょう。</p>
<p data-line="18" class="code-line"><strong>注意2：gitignoreを忘れずに</strong> 💡<br>
センシティブな値を扱う場合、gitignoreは忘れずに設定しましょう。</p>
</div></aside>
<p data-line="22" class="code-line">ex.</p>
<div class="code-block-container"><pre><code class="code-line" data-line="23">DATABASE_URL="~~~"
SECRET_KEY="~~~"
</code></pre></div><h2 id="wrangler.toml-%7C-wrangler.jsonc%E3%81%AB%E6%9B%B8%E3%81%8F" data-line="28" class="code-line">
<a class="header-anchor-link" href="#wrangler.toml-%7C-wrangler.jsonc%E3%81%AB%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> wrangler.toml | wrangler.jsoncに書く</h2>
<p data-line="29" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0fdfcd9d4e063" src="https://embed.zenn.studio/card#zenn-embedded__0fdfcd9d4e063" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fworkers%2Fconfiguration%2Fenvironment-variables%2F%23add-environment-variables-via-wrangler" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-wrangler" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-wrangler</a></p>
<p data-line="31" class="code-line">表題の通り、cloudflareで使うwrangler.toml | jsoncにも書くことができます。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="34" class="code-line"><strong>注意：センシティブな値は扱わないほうがいい</strong> 💡<br>
wrangler.toml | .jsoncは基本gitに上げると思うので、ここでセンシティブな値を扱うのは避けたほうがいいです。<br>
公開しても問題ない環境変数を置くようにしましょう。<br>
<a href="https://developers.cloudflare.com/workers/configuration/secrets/#compare-secrets-and-environment-variables" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/workers/configuration/secrets/#compare-secrets-and-environment-variables</a></p>
</div></aside>
<p data-line="40" class="code-line">ex.</p>
<div class="code-block-container"><pre><code class="code-line" data-line="41">[vars]
PUBLIC_URL = "~~~"
</code></pre></div><h1 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E7%92%B0%E5%A2%83%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0" data-line="46" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E7%92%B0%E5%A2%83%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0" aria-hidden="true"></a> デプロイ環境における環境変数</h1>
<p data-line="48" class="code-line">開発環境では<code>.dev.vars</code>や、<code>wrangler.toml</code>といったファイル上での管理で環境変数が使えましたが、デプロイ環境では使えないので、下記の方法で設定します。</p>
<h2 id="cloudflare%E3%81%AE%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89gui%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" data-line="50" class="code-line">
<a class="header-anchor-link" href="#cloudflare%E3%81%AE%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89gui%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> CloudflareのダッシュボードからGUIで設定する</h2>
<p data-line="51" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__13b5a87f864e7" src="https://embed.zenn.studio/card#zenn-embedded__13b5a87f864e7" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fworkers%2Fconfiguration%2Fenvironment-variables%2F%23add-environment-variables-via-the-dashboard" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard</a></p>
<p data-line="53" class="code-line"><a href="https://dash.cloudflare.com/" target="_blank" rel="nofollow noopener noreferrer">https://dash.cloudflare.com/</a>　から、Workers &amp; Pages &gt; [プロジェクト] &gt; 設定の画面に行くと、「変数とシークレット」という項目があるので、そこから環境変数を追加、編集、削除といった設定できます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/42c833d3d5f3-20241026.png" loading="lazy" class="md-img"></p>
<p data-line="56" class="code-line">また、「環境を選択」の項目からプロダクション、プレビューと切り替えることができます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/54be152c7bfa-20241026.png" loading="lazy" class="md-img"></p>
<h2 id="wrangler%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%8B%E3%82%89%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" data-line="59" class="code-line">
<a class="header-anchor-link" href="#wrangler%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%8B%E3%82%89%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> wranglerのコマンドから設定する</h2>
<p data-line="60" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__00b1ce39b74bd" src="https://embed.zenn.studio/card#zenn-embedded__00b1ce39b74bd" data-content="https%3A%2F%2Fdevelopers.cloudflare.com%2Fworkers%2Fconfiguration%2Fsecrets%2F%23adding-secrets-to-your-project" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.cloudflare.com/workers/configuration/secrets/#adding-secrets-to-your-project" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.cloudflare.com/workers/configuration/secrets/#adding-secrets-to-your-project</a></p>
<p data-line="62" class="code-line">下記のコマンドで設定ができます。</p>
<div class="code-block-container"><pre class="language-terminal"><code class="language-terminal code-line" data-line="63">npx wrangler secret put &lt;KEY&gt;
</code></pre></div><p data-line="66" class="code-line">この<code>&lt;KEY&gt;</code>のところに環境変数のキーを打ち込みます。（例：<code>DATABASE_URL</code>）<br>
すると下記が表示され、値の入力を求められるので入力してEnterを押しましょう。</p>
<div class="code-block-container"><pre class="language-terminal"><code class="language-terminal code-line" data-line="68"> ⛅️ wrangler 3.83.0
-------------------

? Enter a secret value: ›
</code></pre></div><p data-line="74" class="code-line">これで設定できます。<br>
環境変数が複数ある場合はこれを繰り返して設定していきます。</p>
<p data-line="77" class="code-line">消したい場合は下記のコマンドを実行します。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="78">npx wrangler secret delete &lt;KEY&gt;
</code></pre></div><h1 id="%E7%B5%90%E8%AB%96" data-line="82" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 結論</h1>
<p data-line="83" class="code-line">私個人としては、開発環境では.dev.vars、デプロイ環境ではダッシュボードのGUIから設定するのがやりやすいと感じました。</p>


Cloudflare Workers & Pages　環境変数周りの備忘録

CloudflareのダッシュボードからGUIで設定する

wranglerのコマンドから設定する

デプロイ環境における環境変数

Discussion