統一管理 Dotenv 的服務 Dotenv Vault！

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
一直透過 Email 或 Slack 等方式傳遞 env 嗎？如果是的話，或許你可以試試看這一個 Dotenv Vault 服務。

前言

一直透過 Email 或 Slack 等方式傳遞 env 嗎？如果是的話，或許你可以試試看這一個 Dotenv Vault 服務。

dotenv

我們在開發時，很常使用 dotenv 並安裝它

1
npm install dotenv --save

然後我們會建立一個 .env 檔案並開始撰寫一些比較機敏的環境變數，像是資料庫的金鑰等等

1
2
DATABASE="Database Url"
DATABASE_PASSWORD="Database Password"

接下來可能就在某處依照官方文件撰寫就可以使用了

1
2
3
require('dotenv').config();
console.log('DATABASE：', process.env.DATABASE); // DATABASE：Database Url
console.log('DATABASE_PASSWORD：', process.env.DATABASE_PASSWORD); //DATABASE_PASSWORD： Database Password

如果是 ES6 的 ESM 語法則是這樣寫

1
2
3
import 'dotenv/config';
console.log('DATABASE：', process.env.DATABASE); // DATABASE：Database Url
console.log('DATABASE_PASSWORD：', process.env.DATABASE_PASSWORD); //DATABASE_PASSWORD： Database Password

當然你也可以自己客製化調整要讀取什麼檔案，但這不是這一次分享的內容內。

透過上面我們可以快速知道 .env 通常都會放一些較機敏的資訊，但是我們在開發上一定不只有一個人，必定是兩三個共用一個 .env，而這時候我們可能就會將這個 .env 檔案透過加密壓縮的方式並使用 Email 或 Slack 等工具傳遞給他人。

但…這樣子做還是有一些安全性上的考量與疑慮，所以 dotenv 官方出了一個服務叫做 Dotenv Vault，接下來就讓我們認識一下 Dotenv Vault 吧。

Dotenv Vault

Dotenv Vault 是 dotenv 官方出的一個服務，現階段來講是滿新的服務，此篇撰寫於 2022/06/23。

而這個服務非常簡單，簡單來講就是統一管理你的 .env，並且可以設置成組織，讓加入組織的人可以直接下載下來，所以你可以不用在使用 Email 或是 Slack 加密壓縮 .env 檔案。

接下來就讓我們實際示範一下吧！

註冊 Dotenv Vault

首先先進入 Dotenv Vault 官方網站，並點上方「Log in」按鈕

Log in

然後點一下下方「Create a new account」

Create a new account

接下來會有三步驟，你要分別輸入你的 Email、組織名稱，沒問題就按下「Next:Create project」

Next:Create project

按下之後它會要你確認一下信箱

確認信箱

建立 env 專案

確認完畢後就準備來建立專案囉

Next:Create project

第一個專案名稱就先取名為 「test-env」，畢竟這只是示範而已

test-env

(其實你也可以注意到下方也有提示你可以使用 npx dotenv-vault new 來建立)

建立好後你會看到這一個 Setup 畫面

Setup

(第三步驟應該是 npx dotenv-vault@latest pull 不知道為什麼官方是寫 npx dotenv-vault@latest push)

所以接下來要來建立一個專案哩

測試用 Express

首先這邊偷懶用 Express 產生器產生一個專案，這邊我環境是使用 Mac 所以我直接附上指令就好

1
2
3
4
mkdir test-express
cd test-express
express --no-view
npm install

接下來其實就是複製剛剛 Setup 畫面的指令一一輸入就對了，基本上過程會問你要不要安裝「dotenv-vault」按下 Y 就對了

dotenv-vault

你會發現它幫你建立了 .env.vault 檔案，然後接著第二步驟輸入 npx dotenv-vault@latest login，這時候會開啟瀏覽器，然後就給它點「Log in」 吧

Log in

然後接下來畫面會要求你在終端機輸入 npx dotenv-vault@latest open，輸入後你會開啟 env 專案的後台

env 後台

這邊我新增一個 env 名稱是 TEST 然後 value 是 Hello 並新增

新增

新增成功後一樣回到終端機輸入 npx dotenv-vault@latest pull 就可以將遠端的 env 拉下來了

pull

接下來若你有任何新增，你可以直接在這個 .env 增加，例如我改成以下

1
2
3
4
# development
TEST="Hello"
DATEBASE="URLQQ"
DATEBASE_PASSWORD="URLQQ"

push

接下來如何更新到遠端 env 上呢？只需要在終端機輸入 npx dotenv-vault@latest push 就可以了

push

這樣子遠端就會出現我們本地更新的 env 內容囉

env

新增 env 專案成員

新增成員方式也非常簡單，專案上方有一個 People 只需要切換過去並新增使用者的 Email 就可以了

新增 env 專案成員

新增後成員就可以在自己畫面上看到相關 env 專案了

env

拉取該專案 env 方式也很簡單，只需要進去後點一下旁邊 setup

env

依照操作到第二步驟後就可以輸入 npx dotenv-vault@latest pull 將專案 env 拉回來了

所以基本上會需要知道的指令只有這幾個

  • 新增憑證在專案上 npx dotenv-vault@latest new 'key'
  • 登入 npx dotenv-vault@latest login
  • 拉取 env npx dotenv-vault@latest pull
  • 更新 env 到遠端 npx dotenv-vault@latest push