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

要約

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

導入

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

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

触ってみる

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

VSCode に導入

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

dotenv new

入力するとこんなのが出てくるので、OK を押してあげると

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

ブラウザが立ち上がり、このような画面が表示されました。

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

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

ログインが済んだら、npx dotenv-vault@latest openしろと言わます。

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

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

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 回目以降については、ブラウザを開いてどうこう、というものはありません。
デフォルトでブラーがかかっており見えないようになっています。
これ平文で管理してるのかしら。

pull

適当に Add secret してみます。

終わったら 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 です。

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

気になった点

MFA が無いように見える

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

結論

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

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