[筆記] Nuxt3 佈署 runtime Config 的枚角和 Docker @地瓜大的飛翔旅程

章節連結

內容

Runtime
環境變數

參考資料

近期在佈署 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 檔可以成功讀取。

// nuxt.config.js

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: '',
    },
  },
})

// Docker 內的 CMD 指令
CMD ["sh", "-c", "node -r yamlenv/config .output/server/index.mjs"]

// 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

按讚加入粉絲團

內容

Runtime

環境變數

參考資料

延伸閱讀