0%

Programmingプログラミングナレッジ

Posted:2019.09.24

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

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 を活用する

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】