LoginSignup
2

More than 1 year has passed since last update.

posted at

NuxtJSでgenerate時のみmicroCMSのAPIキーを隠す

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

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

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

スクリーンショット 2020-07-28 20.46.40.png

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

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を隠蔽出来た。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2