Nuxtでdockerを利用した際に環境変数が反映されない問題をnuxt-envで解決する

はじめに

Nuxtはnuxt-communityが提供するdotenvモジュールを利用すると、他のフレームワークと同様に環境変数をアプリ内に取り込むことができます。dotenvモジュールであれば、process.env.VALUEといった形でアクセス可能です。

しかしながら、こちらの方法ではdocker-composeなどを利用してコンテナベースのデプロイを行った際に、環境変数が反映されません。それはdockerのイメージをbuildした時点で、環境変数へのアクセスが固定化されてしまうためです。

実装

これを避けるためには、nuxt-envというモジュールを利用します。

yarn add nuxt-env

こちらのモジュールは、this.$envやapp.$envでアクセス可能な環境変数を提供します。process.envの代わりにこれを利用することで、表題のとおり問題を解決することが可能です。

上記の例は、Nuxtのapollo-moduleのconfigにおいて、リクエスト先のURLをnuxt-env経由で環境変数から取得するコードとなります。

コンテナ全盛の昨今、Nuxtを利用する上では必須と思しきこちらのモジュールです。もう少し多めにスターが付いていても良いと思うのですが、意外とそうでもない事実に鑑みると、実はまだNuxtをproductionで利用している方は少ないのかも知れません。

Vue.js

Posted by poison