Cloudflare Pagesなどを使って静的なHTMLをホスティングしているとします。ただし、API KeyなどはHTMLのJavaScriptに直書きするのではなく、別の手段で保持したい場合があるかも知れません。そんな時にはWorkersを使うと幸せになれます。手順は下記の通りです。
- Workersにシンプルな"Hello world"プロジェクトを作成する
- 作成したプロジェクトの「設定」→「変数とシークレット」から「追加」を押し、"タイプ"="テキスト"でAPI Keyなどのキー・バリューを作成する
- コード編集画面を開き、下記のコードに変更してデプロイする
export default { async fetch(request, env, ctx) { let ret = ""; for (var key in env) { ret += "const " + key + " = \"" + env[key] + "\";\r\n"; } return new Response(ret); }, };
デプロイ後、https://[プロジェクト名].[サブドメイン].workers.dev/ にアクセスすると、「変数とシークレット」にある全ての変数(定数)が下記のように表示されます。
const key1 = "value1"; const key2 = "value2";
あとは静的なHTMLに下記のコードを追加すれば、HTML内のJavaScriptで変数(上記の例ではkey1やkey2)を利用できます。
<script src="https://[プロジェクト名].[サブドメイン].workers.dev/"></script>
以上、お役に立てば幸いです。