NITS TIPS

~微塵集合知巧~

Astroで環境変数を使用する

最終更新日: 2024-04-07記事投稿日: 2024-04-07

nobumitsu-1995のgithubトップ

Frontend developer

nobumitsu-1995

Astroで環境変数を使用する方法

Astro uses Vite’s built-in support for environment variables, and lets you use any of its methods to work with them.

Astroの環境変数は、viteの組み込み環境変数を使用しているようで、viteを使用したプロジェクトと同様に使用できそうです。

サーバー側コードで環境変数を使用する

基本的にはプロジェクトルートに配置された.envファイルに定義された環境変数をimport.meta.env.SAMPLE_ENV_VARという形で使用できるようです。

サーバー側で環境変数を使用する場合は特に命名のルールはなさそうです。

SAMPLE_ENV_VAR=sample-env.env

クライアント側のコードで環境変数を使用する

クライアント側では、以下のようにPUBLIC_から始まる環境変数しか利用できないようなので注意が必要です👀

PUBLIC_SAMPLE_ENV_VAR=sample-env.env

Defaultで用意されている環境変数

  • import.meta.env.MODE: サイトが実行されているモード。astro dev実行時はdevelopment、astro build実行時はproductionが入るようです。
  • import.meta.env.PROD:サイトがproduction環境で実行されている場合trueになる。
  • import.meta.env.DEV:サイトがdev環境で実行されている場合trueになる。
  • import.meta.env.BASE_URL:astro.configのbaseに設定されている値が入るようです。特に設定していなければ/になる。
  • import.meta.env.SITE:astro.configのsiteに設定されている値が入るようです。特に設定していなければ値は何も入らない。
  • import.meta.env.ASSETS_PREFIX:astro.configのbuild.assetsPrefixに設定されている値が入るようです。特に設定していなければ値は何も入らない。

その他の環境変数に関わるルール

環境変数を定義する.envファイルは.env.productionや.env.developmentのようにファイル名にモードを付けることもできるようです。これにより、環境変数がそのモードでのみ有効になります。

参考文献

関連記事

  • 最終更新日: 2024-05-06記事投稿日: 2024-05-06

    初回レンダリング時のみ、useEffect内の処理を実行しないようにする方法

    コンポーネントの初回レンダリング時のみ、useEffect内の処理を実行したくないという場面で、どのような処理を加えれば実現できるかを紹介します。

    コンポーネントの初回レンダリング時のみ、useEffect内の処理を実行したくないという場面で、どのような処理を加えれば実現できるかを紹介します。

  • 最終更新日: 2025-06-28記事投稿日: 2025-06-28

    画像スライダーのクラッシュから学ぶ、「仮想化」で実現するパフォーマンス改善

    大量の画像を扱うSwiperスライダーが特定のデバイスでクラッシュする問題が発生。解決策としてSwiperの「Virtual」オプションを導入し、表示領域内のスライドのみをレンダリングする「仮想化」を実現。これによりDOM要素とメモリ使用量が劇的に削減され、クラッシュが解消し、スライダーの動作が安定しました。この仮想化技術は、無限スクロールなど大量のコンテンツを扱うウェブアプリケーション全般のパフォーマンス改善に極めて有効です。

    大量の画像を扱うSwiperスライダーが特定のデバイスでクラッシュする問題が発生。解決策としてSwiperの「Virtual」オプションを導入し、表示領域内のスライドのみをレンダリングする「仮想化」を実現。これによりDOM要素とメモリ使用量が劇的に削減され、クラッシュが解消し、スライダーの動作が安定しました。この仮想化技術は、無限スクロールなど大量のコンテンツを扱うウェブアプリケーション全般のパフォーマンス改善に極めて有効です。

  • 最終更新日: 2025-01-11記事投稿日: 2025-01-11

    TypeScriptにおける「hoge?: string」と「hoge: string | undefined」 の違い

    TypeScriptの型システムで「プロパティがundefinedを取りうる」のを表現する方法としてオプショナルプロパティを使用した書き方とユニオン型を使用した書き方の二通りが考えられます。この二つの違いについてまとめてみました。

    TypeScriptの型システムで「プロパティがundefinedを取りうる」のを表現する方法としてオプショナルプロパティを使用した書き方とユニオン型を使用した書き方の二通りが考えられます。この二つの違いについてまとめてみました。

  • 最終更新日: 2024-08-06記事投稿日: 2024-08-06

    ARIA属性を活用したアクセシブルなモーダル実装

    アクセシブルなmodalを実装するために必要なaria属性が意外と多い。参考となるコードをメモとして残しておきたい。

    アクセシブルなmodalを実装するために必要なaria属性が意外と多い。参考となるコードをメモとして残しておきたい。
© 2024. nobumitsu-1995