[VSCode] Dotenv Official (with Vault) 使ってみた

# 要約

- VSCode のコマンドパレットで npm パッケージ`dotenv-vault`が簡単に使えるようになる
- .env ファイルのシンタックスハイライトがつく
- あくまで個人的な感想として、ここに機密情報預けるのはまだ不安があるかも。

# 導入

友人と通話していた際に.env の話題が出てきたのでふと気になって VSCode 拡張機能調べてみたら何やら Offical と名前がついている割にはダウンロード数が少ない(記事執筆時点で 100)物を見つけました。

https://twitter.com/na2na_chang/status/1557723314306846722?s=20&t=rgfoW_gG4EMUsNN136iFvA

https://marketplace.visualstudio.com/items?itemName=dotenv.dotenv-vscode

Github のリポジトリも公開されており、見に行くと確かに公式っぽい様子。[(リンク)](https://github.com/dotenv-org)
リリース日を見てみると 2022/8/8 となっておりました。ということで、さっそく試してみたいと思います。

# 触ってみる

usage に従って触っていきたいと思います。
基本的な操作はコマンドパレットから行うようですね。
最初に`https://www.dotenv.org/vault`にアカウントを作っておくといいのかもしれません。まだログインせずに進めてみます。

## VSCode に導入

先に貼ったマーケットプレイスへのリンクから飛ぶか、`dotenv.dotenv-vscode`で検索すると出てきます。

## `dotenv new`

入力するとこんなのが出てくるので、OK を押してあげると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/58784df5-1fc6-8e65-21d3-6b1aa0202c5c.png)

https://www.npmjs.com/package/dotenv-vault

このリポジトリにある npm パッケージが走ります。

ブラウザが立ち上がり、このような画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/88f8926d-0483-151b-b6d5-1e05469b7400.png)

プロジェクト名とメールアドレスは必須のようです。
入力が済むと、`npx dotenv-vault@latest login`を入れろと言われます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/e4b1e8fa-2076-4eec-6304-f76247a4d83a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/bc815c48-c4bf-b5da-1515-91a02d49d7c2.png)

y を押すと、ログイン画面が出てきます。今回は初回だったのでメールアドレスを入力すると確認用のメールとリンクが届きました。(後述する.env.meが無い状態だと何をするにもメールが来るっぽいです)

ログインが済んだら、`npx dotenv-vault@latest open`しろと言わます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/7d466664-1764-02d0-d420-68f3a9b68cf5.png)

入力すると先ほど Login の時と同じように確認プロンプトが出るので、言われるがままに y を押すと、ブラウザが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/085de5e3-bb7a-54a5-c223-739ad9621582.png)

この時点でいくつかのファイルが生成されていました。

```
na2na@Corei7-11700K:~/develop/train-dotenv$ tree -a -I .git
.
├── .env.me
├── .env.vault
└── .gitignore

0 directories, 3 files
```

.gitignore はこんな感じ

```.gitignore

.env*
!.env.project
!.env.vault
```

## `dotenv login`

先の`dotenv new`の時に行った login の操作そのままでした。
`.env.vault`の中を見てログイン用 URL を生成しているようです。
また、`.env.me`がクレデンシャルを保存しているファイルのようです。

## `dotenv push`, `dotenv pull`

まずは`.env`を適当にこしらえます。今回はこんな感じで。

```.env
NAME=na2na
GITHUB=https://github.com/na2na-p
```

### push

初回の push が成功するとこうなります。2 回目以降については、ブラウザを開いてどうこう、というものはありません。
デフォルトでブラーがかかっており見えないようになっています。
これ平文で管理してるのかしら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/02f9e757-e001-3af1-6417-f78f6967cef3.png)

### pull

適当に Add secret してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/def80bc5-66ce-cdc3-60ed-5b60e884c162.png)

終わったら pull してみます。
無事に増えましたね。`# development`も生えてきました。

```.env
# development
GITHUB=https://github.com/na2na-p
GOHAN="YAKINIKU"
NAME=na2na
```

ちなみに、`.env.previos`というものも生成され、これは pull する前のバージョンが入っていました。

```
na2na@Corei7-11700K:~/develop/train-dotenv$ tree -a -I .git
.
├── .env
├── .env.me
├── .env.previous
├── .env.vault
└── .gitignore

0 directories, 5 files
```

### git clone してきた体で使ってみる

.gitignore で除外されたものだけを削除します。

```
na2na@Corei7-11700K:~/develop/train-dotenv$ tree -a -I .git
.
├── .env.vault
└── .gitignore

0 directories, 2 files
```

この状態でコマンドパレットから`dotenv pull`してきます。
先と同じようにログイン用の画面が出てくるので、ログインしてやれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/fd7a20fb-5ae9-04b6-8f3d-6eb7d547dbd7.png)

Step3 の`npx dotenv-vault@latest open`については、ブラウザでの画面が出てくるだけです。必ずしもやる必要は無さそう。

# 気になった点

## MFA が無いように見える

ログインが、`メールアドレス入力→メールについてきたリンクのクリック`だけで済んでしまいます。
dotenv pull するためには`.env.vault`の中を知っていなければいけませんが、これは.gitignore には追加されません。
実質 MFA ではあるんでしょうが、個人的にはどこか不安が残ります。
私が見つけられていないだけかもしれません。少なくとも無料プランにはない気がします。
有料プランを見ると`User access controls`とか、`Trusted IPs`とかはありました。

# 結論
少なくとも無料プランのうちは、ここに AWS のクレデンシャル入れたものを push するのはちょっと怖いかも。今後に期待します(?

ありがとうございました。