BETA

【Nuxt.js】nuxt-envを少し使いやすくする

投稿日:2018-10-15
最終更新:2018-10-24

Nuxtと環境変数について

Nuxtの難点として、サーバサイドの環境変数を実行時に埋め込むことができません。 ※envプロパティはビルド時に評価されます

Docker環境などでURLを差し替えたい、といった場合に自前で対策をする必要があります。

nuxt-env

すでにnuxt-envというライブラリを作られてた方がいらっしゃるのでそちらを使いましょう https://github.com/samtgarson/nuxt-env

こちらを使うと、SSR時に環境変数を読み取りセットし以下のように読み取ることが可能です

app.$env.FOO

ただ、このままだたnuxtサイクル外で利用することはできません (そもそもの設計上そうならないほうがきれいかもしれませんがとりあえず置いといて)

対策

サーバサイド、フロントサイド意識せず使えるようにするプラグインを定義します

// plugins/injectEnv.js
export default (ctx) => {
  for (let k in ctx.app.$env) {
    if (!process.env[k]) {
      process.env[k] = ctx.app.$env[k]
    }
  }
}

そしてあとは読み込むだけ

plugins: [
  { src: '~/plugins/injectEnv.js' },
}

サーバ・クライアント関係なくprocess.env経由で参照できます

process.env.FOO



以上
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@dapontinusの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!