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どっちでコントロールされているのか等で変に迷ってしまい、解決に時間がかかってしまった。
以上
