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

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

![0-最初に.png](https://qiita-image-store.s3.amazonaws.com/0/252687/715c0fc6-3868-2038-bda5-f288ca8b61f4.png)
## 結論
結論から言うと、`envファイル`を利用します(Github等に上げる際は`.gitignore`に注意)。そして、`envファイル`に記述した変数を読み込むために`dotenv`(envファイルに書いた設定を環境変数として簡単に読み込めるパッケージ管理ツール)をインストールし、活用します。


![5-0-dotenvについて.png](https://qiita-image-store.s3.amazonaws.com/0/252687/7f7298d6-8045-551f-e55a-e8a78e2f1fad.png)

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

ここでは、[forge](https://ja.1forge.com/forex-data-api)と言う為替情報APIを例に使います。無料で使えますので、興味ある人は登録して独自APIKEYをもらっておいて下さい。
# ハンズオン
## envファイルの作成
一番上のディレクトリで、新規ファイル作成を行い`.env`と名前をつけます。これが`envファイル`(環境変数記述ファイル)です。 (環境変数のリストを出力したり、現在の環境を変えることなく異なる環境変数の下で他のコマンドを実行するのに使われる、etc。詳しくはWebで)
![1-envファイルの作成.png](https://qiita-image-store.s3.amazonaws.com/0/252687/4e0c8b1b-51f9-c52d-086a-9db87dbbeb71.png)

## envファイルへ変数を記述
`envファイル`を作成したら、中に記述していきましょう。ここでは、'API_KEY'を例に使います。モザイクがかかっている部分は各自のAPI KEYを当ててください。
![2-envファイルへ追記.png](https://qiita-image-store.s3.amazonaws.com/0/252687/c3460699-6e48-8b9c-bcf5-461407032821.png)

## まずデータ取得できてるか確認
色々調べてみると、よく`process.env.***`と言う記述を目にします。なるほど、このように書けば環境変数にアクセスできるのだな！と目星がつきますので、一度`console.log`で確認してみましょう。
![3-consoleで確認.png](https://qiita-image-store.s3.amazonaws.com/0/252687/b9d43f12-2e16-d93c-1cdc-b979824ccfbb.png)

しかし、

![4-undefinedの表示.png](https://qiita-image-store.s3.amazonaws.com/0/252687/b005e858-c2ba-40db-317c-02e666aca24a.png)

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

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

```terminal
$npm install @nuxtjs/dotenv
```
インストールが完了すると、このような表示になります。
![5-dotenvのインストール.png](https://qiita-image-store.s3.amazonaws.com/0/252687/88ae20bc-3ad0-acde-dc3b-bd1da8ebd285.png)

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

![6-packageの確認.png](https://qiita-image-store.s3.amazonaws.com/0/252687/a0334f4f-73f9-fd54-856c-f2c57a41ae12.png)

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

## nuxt.config.jsへの追記

次に、nuxt.config.jsに必要な追記をしていきます。
書く位置は、`module.exports`の上あたりにしましょう。
![7-nuxtconfigの編集.png](https://qiita-image-store.s3.amazonaws.com/0/252687/c40adb7b-2248-219c-6abf-2dfcce7c9e65.png)

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

![8-env最終行へ追加.png](https://qiita-image-store.s3.amazonaws.com/0/252687/51dac255-abc2-3645-64f4-9da1ae19b230.png)

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

これで設定は完了です！

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

```terminal
$npm run dev
```

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

![9-確認.png](https://qiita-image-store.s3.amazonaws.com/0/252687/2c2cf562-a3e9-c7a2-21f2-64b320d6923f.png)

## API_KEY部分を変数に変更

では、ここで`index.vue`で直打ちしていた`API_KEY`を変数に変えてみます。
`テンプレートリテラル`記法でかけますので、`process.env.API_KEY`と変更してみましょう。
![10-APIKEY部分を変更してみる.png](https://qiita-image-store.s3.amazonaws.com/0/252687/8c941fd5-2fde-ac91-2cfd-34d1157da25c.png)

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

![11-成功確認.png](https://qiita-image-store.s3.amazonaws.com/0/252687/bcaf7ec2-e401-65f8-bb48-f5a9eafd320b.png)

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

## (おまけ)もう一度やってみる
これで本来は終わりですが、復習も兼ねて別の文字列を`.env`に追記して、確認してみましょう。
### envファイルへ記述

ここでは、`TEST`という変数に`こんばんは！元気ですか？`と入れてみます。
![12-もう一度テスト.png](https://qiita-image-store.s3.amazonaws.com/0/252687/914344b5-cfd0-de2f-c49c-dc83171866f4.png)

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

### nuxt.config.jsへ追記

次に先ほどと同じように、`nuxt.config.js`の上の方で、`分割代入`を使って、変数を読み込みます。
![13-nuxtconfigに追記.png](https://qiita-image-store.s3.amazonaws.com/0/252687/5900fd09-2832-b93b-fb29-3f988c4da98c.png)


---
#### 追記（2020/03/08）
以下のようにmodulesに記述が必要なようです。

```nuxt.config.js
modules: [
  '@nuxtjs/dotenv'
],
```
また`require(...).config is not a function`のようにエラーが出る方は`import env from 'dotenv'`と書き直してみてください

---


そして`env`キーまで移動して、先ほど上で読み込んだ変数を追記。
![14-最終行へも追記.png](https://qiita-image-store.s3.amazonaws.com/0/252687/d6f45659-11fe-0429-e850-127c3a940aa2.png)

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

### consoleで確認してみる

練習用ですので、ここでは`mounted`の中に`console.log`を書いて確認します。
![15-consoleで確認.png](https://qiita-image-store.s3.amazonaws.com/0/252687/4f839308-aed1-3b62-323e-33d4d87a41d2.png)

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

そしてブラウザを確認。

![16-成功の確認.png](https://qiita-image-store.s3.amazonaws.com/0/252687/f86b629c-244c-798d-65f5-1f5a9e53691a.png)

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

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