Passing Environment Vairable To React App At Runtime

Ask, answer and level up your code!

StackAsk is a community where developers ask questions, share answers and learn from each others real-world experience, so every solved problem helps the next person who runs into it.

hungw7 Beginner

Asked At: 1672214123000 In: React

hungw7 Beginner Asked At: 1672214123000 In: React

Passing environment vairable to react app at runtime

Theo em hiểu thì khi react build các biến môi trường trong file .env cũng sẽ được sử dụng vào compile time, ví dụ biến REACT_APP_API_V1 trong file .env và build Docker image thì khi dùng proccess.env.REACT_APP_API_V1 sẽ là giá trị được compile, làm sao để truyền biến này như một environment trong docker-compose.yaml khi runtime được ạ.

1 Answer(s)
2196 Views

Answer

1 Answer

tvd12 Enlightened

Added an answer at: 1672215469000

tvd12 Enlightened

Added an answer at: 1672215469000

Anh đang hiểu là em không muốn dùng file .env nữa nhỉ? Vậy thì anh nghĩ không có cách nào. Còn nếu em vẫn muốn dùng file .env thì vẫn có cách, tuy nhiên sẽ tương đối phức tạp đó em ạ. Em cần tạo ra 1 file ví dụ script.sh, trong đó em có lưu thông tin biến, và sau đó gán biến đó vào file .env ví dụ:

Đọc biến REACT_APP_API_V1 từ environment
Ghi biến REACT_APP_API_V1 vào file .env

Để mai anh thử hỏi thêm các chuyên gia xem có cách nào khác nữa không?

Vâng anh, cơ bản em đang muốn process.env sẽ lấy được value của environment trong runtime để dùng trong compose, còn như hiện tại khi em build image thì process.env nó đang lấy value khi react được build nên envrionment trong compose của em không ăn vào code.

– hungw7 1672217390000

Hiện tại bọn anh đang làm là cũng thông qua cái file .env này, và không được phép lưu thông tin secret ở đây, anh cũng đang tưởng tượng là em muốn làm vậy là để lưu thông tin secret nhỉ?

– tvd12 1672217537000

Đúng rồi anh, kiểu như em có thể bỏ trống hoặc điền nháp value vào sau đó khi compose up thì enviroment trong compose sẽ ghi đè lên biến đó.

– hungw7 1672218083000

Hiện tại em đang có làm là build mỗi image cho mỗi môi trường với file env khác nhau nhưng không được idea cho lắm :^))

– hungw7 1672218233000

Anh hỏi các chuyên gia cũng đang làm vậy em ạ

– monkey 1672257496000

Sau 1 hồi vọc gg thì em cũng ra 1 'hack' solution như này, ý tưởng là sẽ dùng bash script để ghi lại hết các key, value trong env rồi đưa vào biến window.__ENV, cách này chỉ nên làm khi react không chứa value gì nhạy cảm vì window.__ENV có thể truy cập từ trình duyệt để đọc được, và thay đọc từ process.env mình đọc từ window.__ENV trước xem có ko :^)) 1 sample demo của em: https://github.com/UIT-Web-Giftshop/giftshop-admin/tree/runtime-env

– hungw7 1672469025000

Nó cũng không khác gì cách mà em pass variable qua yaml sau đó dùng bash script để ghi vào file env cả. Thậm chí cách này cũng vấn đề khi mình dùng k8s, lúc đó em sẽ không thể biết node nào sẽ được triển khai, lúc đó thì mọi node sẽ phải được cấu hình trước để lưu variable

– tvd12 1672469249000

Nếu dùng pass variable từ yaml vào env thì env lại được sử dụng khi react build, nếu thế thì phải có package nào đọc env trong runtime anh nhỉ. Với k8s thì em cũng ko thấy vấn đề vì các variable theo priority yaml > env được lưu ở file config.js được inject bằng thẻ script trong index.html để tạo biến window.__ENV mỗi khi trang được load.

– hungw7 1672470161000

Ask, answer and level up your code!

1 Answer

Java Spring rate limiter block specific duration when ratio reached 9 Answer(s)

Làm sao để cấu hình tới 2 database trong 1 project spring boot? 6 Answer(s)

Dịch ngược data QRcode VN về thông tin ngân hàng 6 Answer(s)

Recent Activities

Top Members

Media Details

Ask, answer and level up your code!

1 Answer

Java Spring rate limiter block specific duration when ratio reached 9 Answer(s)

Làm sao để cấu hình tới 2 database trong 1 project spring boot? 6 Answer(s)

Dịch ngược data QRcode VN về thông tin ngân hàng 6 Answer(s)

Related Questions

Java Spring rate limiter block specific duration when ratio reached 9 Answer(s)

Làm sao để cấu hình tới 2 database trong 1 project spring boot? 6 Answer(s)

Dịch ngược data QRcode VN về thông tin ngân hàng 6 Answer(s)

Recent Activities

Top Members

Trending Tags

Sign In

Register

Forgot Password

Send Successfully