統一管理 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 [email protected] pull 不知道為什麼官方是寫 npx [email protected] 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 [email protected] login，這時候會開啟瀏覽器，然後就給它點「Log in」 吧

Log in

然後接下來畫面會要求你在終端機輸入 npx [email protected] open，輸入後你會開啟 env 專案的後台

env 後台

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

新增

新增成功後一樣回到終端機輸入 npx [email protected] pull 就可以將遠端的 env 拉下來了

pull

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

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

push

接下來如何更新到遠端 env 上呢？只需要在終端機輸入 npx [email protected] push 就可以了

push

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

env

新增 env 專案成員

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

新增 env 專案成員

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

env

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

env

依照操作到第二步驟後就可以輸入 npx [email protected] pull 將專案 env 拉回來了

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