APIキーなどの漏洩を防ぐVueでの.env.localの使い方

Vue.js

Vueでの.env.localの使い方です。
.env.localファイルを使うことで、GitHubでソースコードをあげても、APIキーなど大切な情報の漏洩を防ぐことができます。

APIキーなどの漏洩を防ぐVueでの.env.localの使い方

firebaseのapiKayなどを例とします。

  1. .env.localファイルをプロジェクト直下に作成します。
  2. .env.localファイルに秘密にしたいキーなどを記述します。
  3. その内容を読み込みます。
  4. package.jsonを修正します。

.env.localファイルに秘密にしたいキーを記述

まず、firebaseの構成のセッティングを.env.localファイルに記述します。
Vueの場合デフォルトで.env.localファイルは.gitignoreファイルに記述されていますが、念の為記述を確認します。

NODE_ENV='local'
VUE_APP_API_KEY="apiキー"
VUE_APP_AUTH_DOMAIN="認証ドメイン"
VUE_APP_PROJECT_ID="プロジェクトID"
VUE_APP_STORAGE_BUCKET="ストレージバケット"
VUE_APP_MESSAGING_SENDER_ID="センダーID"
VUE_APP_ID="APPのID"

ここの内容はfirebaseの構成からコピペします。
VUE_APP_というプレフィックスが必要になります。
NODE_ENV='local'としておくことで後に開発用や本番用のファイルと区別したいときに役に立ちます。

.env.localファイルの内容を読み込む

const firebaseConfig = {
  apiKey: process.env.VUE_APP_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_ID
};

firebaseのconfig.jsなどを作成して、上のように記述します。
process.env.というプリフィックスが必要になります。

 "scripts": {
    "serve": "vue-cli-service serve --mode local",
  },

最後にpackage.jsonでlocalモードで実行できるようにscriptsの内容を変更します。

Vue.js

Posted by devsakaso