近期在佈署 Nuxt3 的 SSR 專案時，由於專案有 5 個環境，想要達成「最小數量的 build Image」並在佈署時將環境變數給傳遞進去。這邊筆記一下誤區和實作方法。
內容
Runtime
Nuxt 3 官網所提供的 runtime Config，其值需在 nuxt.config 定義。運行時可透過 process.env 傳遞對應的參數，只要符合 Nuxt 3 的 Runtime Config 規範且有在 nuxt.config 定義的話，就可以正常替換。
例如定義了一個 public 的 runtime Config 為 apiBase。那在啟動這個 server 時，只要 process.env 中可以獲得 NUXT_PUBLIC_APIBASE 的值，那就可以完成「佈署時傳遞環境變數」。
為了不和 .env 衝突，推薦使用 yamlenv 這個套件。它可以直接用命令列將變數值塞入 process.env，並讓後續執行的 js 檔可以成功讀取。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// nuxt.config.js export default defineNuxtConfig({ runtimeConfig: { public: { apiBase: '', }, }, }) // Docker 內的 CMD 指令 CMD ["sh", "-c", "node -r yamlenv/config .output/server/index.mjs"] |
上述例子，可先 build 完整個專案後，於佈署流程中在專案中加入 env.yaml 到專案的根目錄下，然後再啟動程式。如此一來 Nitro server 就可以獲得你所傳入的 process.env 內容來執行 Nuxt 3 專案了。
環境變數
Development 環境：用 .env, .env.local 或是 env.yaml，並把以上檔案排除在版本控制
編譯：動態生成編譯時所需的環境變數檔案，像是 echo “locales=${locales}” >> .env，然後完成編譯
佈署：透過指令腳本取得佈署階段要的環境變數，並在啟動前將對應的 env.yaml 放到專案內，並用 yamlenv 讀取後啟動 server
參考資料
1. Nuxt Dynamically Change the Enviroment Variables in Run Time Config
2. runtime Config
