microCMSが来てるとのことで、
NuxtJS + microCMS で、 Jamstackなサイトを作っていたら気になるツイートが。。

NuxtのJamstack構成においてAPIキーの扱い方について書きました。
process.env.API_KEYではブラウザからソースコード上で見えてしまうのでご注意ください。
privateRuntimeConfigを用いる方法を紹介しています。https://t.co/0eNZgJSWLW #microcms
— 柴田和祈｜microCMS (@shibe97) July 20, 2020

おお、やばい、、ほんとにむき出しになってる。。悪戯されるやん。。

上記の記事のおかげで事なきを得ましたが、１点問題があり、上記のみの設定だと、
開発中にAPIの認証が出来なくなってしまうんですよね。

とりあえず公式のブログ見る

privateRuntimeConfig

サーバーサイドで公開される、publicRuntimeConfigを上書きする。

publicRuntimeConfig

フロントエンドで公開される

「publicRuntimeConfig」を使えばいいんじゃない、、？

設定してみる

.env

MICROCMS_API_KEY=@@@@@@@@@@@@@@@@@@@@@@

nuxt.config.js

require('dotenv').config()
const { MICROCMS_API_KEY } = process.env
const isDev = process.env.NODE_ENV === 'development'

module.exports = {
  mode: 'universal',
  target: 'static',
  [isDev ? 'publicRuntimeConfig':'privateRuntimeConfig'] : {'apikey': MICROCMS_API_KEY },
  // 以下省略
}

とりあえずこれで、
ローカルで開発中=> 無事にAPIにアクセス出来て、
公開時（generate）=> APIkeyを隠蔽出来た。

みんなどうしているのだろうか。
教えてください。