💡

.envファイルと読込方法 (Vue Nuxt TypeScript)

2024/07/11に公開

Nuxt

.envファイルの読込方法

外部のAPIキーやfirebaseのAPIキーをプロジェクトに保存する際に、普通に公開するとAPIキーが外部に駄々洩れです。そこで.envファイルをよく使っています。

よく使っているのにも関わらず、実際になにしているの？メリットは何？と自分で思ったので今回利用方法含めてまとめてみました。

公式ではこちらに記載あります。

.envファイルとは？

.envファイルは環境変数を保存する為のファイルです。
ローカルではテスト環境用。本番環境では本番用の環境変数が使えます。

またこれらの環境変数の情報をソースコードから分離し、セキュリティを強化することができます。

まずは.envファイルを作成します。作成場所は自身のプロジェク直下です。

project/.env.local
project/.env.develop

ローカルは下記から参照する様に設定します。localhost3000とかで使える感じですね。

.env.local

こちらは本番環境で参照する用ファイルです。

.env.develop

次にファイルの中身を作成

たとえば、.env.localに下記の様な(仮)のAPIキーがあるとします。

// .env.local内
ZENN_API_KYE = "1234567890@zenn"

次にnuxt.config.ts内に下記を作成

// nuxt.config.ts内
  runtimeConfig: {
    public: {
      ZENN_API_KYE: process.env.ZENN_API_KYE,
      }
    }

pacage-jsonを修正

.envファイルを作成したからといっても作成しただけでは読み込まれません。
環境毎に読み込めるようにしなければなりません。
その為にpacage-jsonに環境毎に使う.envファイルを設定します。

// pacage-json

{
  "name": "アプリ名",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "nuxt build --dotenv .env.develop",
    "dev": "nuxt dev --dotenv .env.local",
    "generate": "nuxt generate --dotenv .env.develop",
   // 以下省略
　　　}
}

npm run devの様にしてアプリを立ち上げると、この場合は.env.localのファイルが読込まれます。

.Vueファイルで呼び出すには？

.vueやtsファイルの中で呼び出すには下記の様にすれば大丈夫です。


const config = useRuntimeConfig()
console.log(config.public.ZENN_API_KYE)
// 1234567890@zennと表示される

また、runtimeConfig は public と private の2つのセクションに分けられます。public セクションには、クライアントサイドからアクセス可能な設定を、private セクションには、サーバーサイドからのみアクセス可能な設定を格納します。これにより、公開設定と秘密設定を明確に分離し、セキュリティを強化することができます。

AIに聞きながら調べましたが、まぁ自分自身知らなかったですね。
これからバンバン使える様にします！