axios等で外部APIを叩く際に、APIキーを秘匿してもたせる手順を調べたのでメモ(久々の短文エントリ)。
.env
( .gitignore
でリポジトリの管理対象外にしておくこと)
API_KEY=hogehuga
nuxt.js.config
require('dotenv').config(); export default { (中略) buildModules: [ '@nuxtjs/dotenv' ], // key privateRuntimeConfig: { env_api_key: process.env.API_KEY }, (省略)
.vue
上での呼び出し
methods:{ getData: function() { this.api_key = process.env.API_KEY;
補記
所謂dotenv系列はPythonで使ったことがあったのだが、きちんと秘匿するためにはnuxt.js.config
のprivateRuntimeConfig: {}
で受け取る必要があるのがポイントだと思う。というか公式ドキュメントを真面目に読めば分かる話なのだが、そもそもこの辺の管理がVueとNuxtどっちでコントロールされているのか等で変に迷ってしまい、解決に時間がかかってしまった。
以上