Nuxtで.envを使用する

APIキーなど、第三者に知られたくない情報は.envファイルを使用して隠すことができます。設定が必要なので何も見ずにマスターしたいところです！

Contents

手順

.envファイルを使用するためにはdotenvが必要になる。

Nuxtプロジェクト内で下記のコマンドを実行する。

$ npm install @nuxtjs/dotenv

package.jsonを開いて追加されていればOK

nuxt.config.jsに.envファイルが使えるように設定を追加する。

require('dotenv').config();
const { API_KEY } = process.env;

export default {
  // 中略

  env: {
    API_KEY
  }
}

サーバを立ち上げている場合は再起動をしておく。

.envファイルを作成してAPIキーを変数に格納します。作成場所はプロジェクト直下(/.env)です。

API_KEY = 'xxxx-xxxx-xxxx-xxxx';

これでAPI_KEYがグローバルで使用できるようになりました！

使用方法は下記のようにprocess.env.のあとに変数をつけるだけ。

console.log(process.env.API_KEY)

こちらが大変分かりやすかったです！ありがとうございます。