Help us understand the problem. What is going on with this article?

Nuxt.jsにおけるenvファイルの利用(初学者向けハンズオン)

最初に

APIを叩きに行く時にAPI KEYなどを直打ちしてしまっては、第3者に見られてしまう可能性がありますし、Github等にこのままあげると、漏洩のリスクがあります。一体どうすればいいのでしょう?

0-最初に.png

結論

結論から言うと、envファイルを利用します(Github等に上げる際は.gitignoreに注意)。そして、envファイルに記述した変数を読み込むためにdotenv(envファイルに書いた設定を環境変数として簡単に読み込めるパッケージ管理ツール)をインストールし、活用します。

5-0-dotenvについて.png

ひとこと

駆け出しエンジニア向けでハンズオン形式にしております。では、始めて行きましょう!

ここでは、forgeと言う為替情報APIを例に使います。無料で使えますので、興味ある人は登録して独自APIKEYをもらっておいて下さい。

ハンズオン

envファイルの作成

一番上のディレクトリで、新規ファイル作成を行い.envと名前をつけます。これがenvファイル(環境変数記述ファイル)です。 (環境変数のリストを出力したり、現在の環境を変えることなく異なる環境変数の下で他のコマンドを実行するのに使われる、etc。詳しくはWebで)
1-envファイルの作成.png

envファイルへ変数を記述

envファイルを作成したら、中に記述していきましょう。ここでは、'API_KEY'を例に使います。モザイクがかかっている部分は各自のAPI KEYを当ててください。
2-envファイルへ追記.png

まずデータ取得できてるか確認

色々調べてみると、よくprocess.env.***と言う記述を目にします。なるほど、このように書けば環境変数にアクセスできるのだな!と目星がつきますので、一度console.logで確認してみましょう。
3-consoleで確認.png

しかし、

4-undefinedの表示.png

アクセスするにはちょっと設定が必要なんです。そのためにまずdotenvをインストールしましょう。

dotenvのインストール

以下のコマンドをターミナルで打って、インストールしましょう

$npm install @nuxtjs/dotenv

インストールが完了すると、このような表示になります。
5-dotenvのインストール.png

一度、package.jsonを確認してみましょう。

6-packageの確認.png

ちゃんとdependenciesに追記されていますね。

nuxt.config.jsへの追記

次に、nuxt.config.jsに必要な追記をしていきます。
書く位置は、module.exportsの上あたりにしましょう。
7-nuxtconfigの編集.png

まず、nuxt.config.jsdotevrequireで読み込みます。
その次に、分割代入で、.envファイルから必要な変数を読み込みます。

8-env最終行へ追加.png

次に、export.defaultの最終行へ移動し、キー名envそしてバリューを先ほど上の方で分割代入で取り出した変数にします。

これで設定は完了です!

再確認

nuxt.config.jsを編集した時は、再立ち上げしないと変更が反映されません。
ターミナルでctrl + cボタンでサーバーを止めて、再起動してみましょう。

$npm run dev

すると、再びConsoleを確認すると、先ほどまでundefinedだったものが、きちんと自分で設定したAPI_KEYの値になっているはずです。

9-確認.png

API_KEY部分を変数に変更

では、ここでindex.vueで直打ちしていたAPI_KEYを変数に変えてみます。
テンプレートリテラル記法でかけますので、process.env.API_KEYと変更してみましょう。
10-APIKEY部分を変更してみる.png

そして保存して、ブラウザを確認。

11-成功確認.png

すると、見事にAPIを叩いた結果がConsoleに表示されています。これで成功です!

(おまけ)もう一度やってみる

これで本来は終わりですが、復習も兼ねて別の文字列を.envに追記して、確認してみましょう。

envファイルへ記述

ここでは、TESTという変数にこんばんは!元気ですか?と入れてみます。
12-もう一度テスト.png

ここで注意!変数宣言する時は、変数の後にスペースをきちんと入れること!もしTEST=のようにTEST=の間にスペースがないと、いくら他の設定をきちんとしても、undefinedとなってしまいます。

nuxt.config.jsへ追記

次に先ほどと同じように、nuxt.config.jsの上の方で、分割代入を使って、変数を読み込みます。
13-nuxtconfigに追記.png


追記(2020/03/08)

以下のようにmodulesに記述が必要なようです。

nuxt.config.js
modules: [
  '@nuxtjs/dotenv'
],

またrequire(...).config is not a functionのようにエラーが出る方はimport env from 'dotenv'と書き直してみてください


そしてenvキーまで移動して、先ほど上で読み込んだ変数を追記。
14-最終行へも追記.png

またnuxt.config.jsを編集したので、一度サーバーを落として、再立ち上げしておきましょう。

consoleで確認してみる

練習用ですので、ここではmountedの中にconsole.logを書いて確認します。
15-consoleで確認.png

process.env.***でアクセスできるんですよね。

そしてブラウザを確認。

16-成功の確認.png

先ほどの文字列がきちんと表示されてますね!
2回も繰り返せば、もうなれたのではないでしょうか?

最後に

駆け出しエンジニアさんたちの間で、実際にこの辺りの設定の仕方を知っている方はあまり多くはないと思います。今回は簡単に触れた程度で、丁寧な説明は省きました。詳しくは公式サイト等をみて頂く方がいいと思います。Nuxt.jsを触り始めた方々の参考になれば幸いです。

fj_yohei
毎日Nuxt x TypeScriptを用いた開発を行っております。小さな気づきから、大きなまとめまで頻繁に更新しようと思います!
andpad
建築施工管理者向けアプリANDPADを開発、運営するスタートアップ
https://tech.andpad.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした