如何為vite+react建置docker映像以適應多個環境

docker cicd vite react deployment

tcctrial 2024-04-26 18:14:10 ‧ 413 瀏覽

分享至

我正在嘗試建立一個 vite+react webapp，然後部署到不同的環境並讀取.env中的變數，例如在env A: VITE_SERVER_URL=A.com/api ，env B :VITE_SERVER_URL=B.com/api
但react只會在build time讀取.env, 導致docker image在不同的環境中不可重複使用.
請問在這種情況下部署的正確做法是什麼?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

DanSnow

iT邦好手 1 級 ‧ 2024-04-28 11:30:38

這邊提供一個參考的做法，首先，將可能變動的設定都集中到一個檔案，假設是 config.js

window.APP_CONFIG = {
  apiEndpoint: 'https://a.com/api'
}

將這個檔案放在 Vite project 的 public 資料夾下，並在 html 的 head 中載入

<html>
  <head>
    <script src="/config.js"></script>
  </head>
</html>

到這邊你就可以在你的 code 中用 window.APP_CONFIG 取得這些設定

const client = createAPIClient({ url: window.APP_CONFIG.apiEndpoint })

之後 build 你會發現這個 config.js 檔原封不動的放在 dist/config.js 的位置，打包成 docker 後，你可以用 docker 的 mount 將 config.js 替換掉

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙