Astroのscriptタグ内で環境変数を使う方法

Google AnalyticsやPosthogなどのアナリティクスツールのように、クライアント側に公開されることが前提のAPIキーをハードコードすることは、通常問題視されません。しかし、外部サービスのAPIキーは管理しやすくするために環境変数に入れておきたいと考えました。キーが漏洩してアナリティクスが荒らされた場合に、すぐに変更できるようにするためでもあります。

AstroでのPosthogのセットアップのドキュメントに従うと、以下のようにscriptタグをコピー＆ペーストすることが推奨されています：

<!-- Won't work -->
<script is:inline>
    !function(t,e){var o,n,p,r;e.__SV...;
    posthog.init('your_project_api_key',{api_host:'https://us.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
        })
</script>

環境変数を使いたい場合、2つのコードフェンスの間でインポートし、script内で参照するようにしてみるかもしれません：

<!-- Won't work -->
---
const API_KEY = import.meta.env.API_KEY
---
<script is:inline>
    !function(t,e){var o,n,p,r;e.__SV...;
    posthog.init(API_KEY,{api_host:'https://us.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
        })
</script>

しかし、これは動作しません。is:inlineディレクティブがある場合、scriptタグはAstroによって処理されないためです。プロジェクトのビルド時に環境変数をscriptタグに渡すには、define:varsディレクティブを使用する必要があります。以下のAstroコンポーネントで動作するはずです：

<!-- Works! -->
---
const API_KEY = import.meta.env.API_KEY
---
<script is:inline define:vars={{API_KEY}}>
    !function(t,e){var o,n,p,r;e.__SV...;
    posthog.init(API_KEY,{api_host:'https://us.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
        })
</script>