Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Nuxt.js 2019.09.24

Nuxt.jsのgenerateで環境変数を切り分ける時に使えるdotenvモジュール

Tags: ,,,,

Nuxt.jsでは本番での運用方式によって、アプリケーションをビルドする際にいくつかコマンドが用意されていますが、大きくは、サーバーサイドレンダリング(SSR)をするかしないかに分かれます。その際にSSRをしない場合に「generate」という形で全て静的HTMLで生成されることになります。

 

この時にローカルでビルドしたアプリケーションで、axiosを使ってプロジェクト内のstaticフォルダにあるリソースを読み込んでいると、APIのURL先がlocalhostとなり、ビルドされたファイルをそのまま本番環境にあげるとCORS(オリジン間リソース共有)の問題でブラウザ上ではデータを取得することができなくなってしまいます。

 

SSRありの場合には本番のNode.js環境下で「nuxt start」とサーバーを起動することができ、それにあわせて環境変数も切り分けられますが「generate」の場合、そのようなことができません。そこで、Nuxt.jsで環境変数を管理する時に使える「dotenv」モジュールで環境変数を管理していきます。

 

まずは「dotenv」モジュールをプロジェクトに追加していきます。node_modulesフォルダがあるプロジェクト内で下記のコマンドを実行します。

$ yarn add @nuxtjs/dotenv
 or 
$ npm install @nuxtjs/dotenv

 

インストールが完了すると「package.json」のdependenciesにモジュールが追加されているのが確認できます。

【package.json】※一部抜粋

{
 "dependencies": {
  .......
  "@nuxtjs/dotenv": "^1.4.0",
  .......
 }
}

 

モジュールとして使うには「nuxt.config.js」の「modules」セクションに追記する必要があります。そして、下記のようにファイル先頭にrequire()も追加しておきます。

【nuxt.config.js】

require('dotenv').config()

export default {
 .......
 modules: [
  '@nuxtjs/dotenv'
 ],
 .......
}

 

また、環境変数を情報として取得する場合にはNode.js環境下以外だと、同じく「nuxt.config.js」に下記のような設定が必要になるようです。こうすることで、「process.env.*******」の形で、環境変数を参照することができるようになります。

【nuxt.config.js】

export default {
 .......
 env: {
  BASE_URL: process.env.FRONT_API_URL
 },
 .......
}

 

次に、dotenvで使う環境変数を記録するファイルを作成します。この時ファイル名は「.env」という名前でプロジェクトルート直下に保存しておきます。下記コマンドでサクッと作ってしまいましょう。

$ cd [Nuxt.jsプロジェクトディレクトリ]
$ touch .env

 

「.env」ファイルができたら、そのファイル内に各環境変数として設定するURLを入れていきます。ここでは「開発環境」「ステージング環境」「本番環境」と分けています。.envファイル内では#をつけることでコメントアウトできます。不要なものはコメントアウトしておきます。

【.env】

# 本番環境用API
BASE_URL = https://example.com/api/
# ステージング環境用API
# BASE_URL = https://staging.example.com/api/
# 開発環境用API
# BASE_URL = http://localhost:3000

 

上記の例では、本番環境のURLが環境変数として設定される形になります。これでアプリケーションをgenerateコマンドを使ってローカル環境でビルドしても、「.env」で指定した環境変数が適用されるようになります。

 


 

ベストプラクティスあるいは本来の正しい使い方かどうかわかりませんが、、とりあえず解決したので良かったです。忘れないように備忘録として残しておきたいと思います。

 

(参考にさせて頂いたサイト)
Nuxt.js で dotenv を活用する

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?