2
Help us understand the problem. What are the problem?

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?