Search
Ask A Question
In Process
Avatar
1
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)
  • 1415 Views
  • Answer
Remain: 5
1 Answer
Avatar
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?

  • 0
  • Reply
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 A Question
  • Question(s) 1.0K
  • Answer(s) 2.2K
  • Best answer(s) 135
  • User(s) 517

Related Questions

Recent Activities

Show All Activities

Top Members

Trending Tags

.net .net core .net oop #formatdate abstract class access app access token ai android ansible anti-flooding apache poi api app architecture artificial intelligence assembly async asyncawait atomicboolean authentication backend backend nestjs background bash script batch bean big project binding bitcoin blockchain blog boot-nodes branch btree bucket4j buffered build bundle c# c# .net cache caching callback career career path cast câu hỏi centos chat cloud cloud reliability commit communication computer science concurrent config-css connection pool content-disposition contract controllerservice convert date to number cookie cors cosmos cosmos-sdk crawl data cron css database database migration datasource datastructure datetime deadlock debug decentralized exchange deep learning deploy contract design patterns design-pattern dev devops dex di distraction programing dns đồ án tốt nghiệp docker download draw.io du học dữ liệu lớn duration eclip editor elasticsearch email erc20 erc721 estimation eth ethereum ethereum login excel excel-object-mapper exception exception handle exception handler executor export compliance extensions exyfox ezyfox ezyfox-boot ezyfox-server ezyfoxserver ezyhttp ezyjpa ezymq-kafka ezyplatform ezyredis facebook fe filter floating point flutter format json freetank front-end frontend fullstack fulltextsearch future gallery game game-box game-room game-server gateway get get file zip git glide go golang gorilla graduation thesis graphql grapql grpc guide h2 database handy terminal hazelcast hibernate hibernateconfig html http https hyperloglog image index indexing integration-test intellij interface io ioc ipfs isolate issue it java java core java spring java web javacore javascript javaw jenkins jetbrains job join jotform jpa jquery js json json file json to object jsonproperty jsp jsp & servlet junit-test jvm jwt kafka keep promise kerberos keycloak kotlin languague laravel library list load balancer load-balancing lock log log4j log4j-core login lỗi font lưu trữ machine learning macos mail mail template main map maria db math maven merge message queue messaging metamask microservice microservices migration mobile model mongo monitoring mq msgpack multi-threading multiple tenant multithread multithreading mysql n naming naming convention nan netcore netty network networking nft nft game nginx nio node.js nodejs non-blocking io null oop opensource optimize oracle orm otp message paginaiton pagination pancakeswap panic partition pdf pgpool phỏng vấn php plugin pointer postgresql postman pre private_key procedure profile programming programming-language project management promise properties push message android push notification push-noti python python unicode qr qrcode question queue rabbitmq react-native reactive reactjs reactjs download readmoretextview recyclerview redis refactor refresh token regex replica repository request resilence4j resource rest restful resttemplate roadmap room database ropssten ropsten round robin rust rxjava s3 schedule scheduled scheduled spring boot search security send email send mail serialization server servlet session shift jis singleton sjis slack smart contract soap socket socket server soft delete solution sosanh spring spring aop spring boot spring data jpa spring redis spring security spring websocket spring websocket cors spring-boot-test spring-jpa springboot springsecurity springwebflux mysql sql sql server sse ssl ssl email stackask storage stream stream api stress test stresstest structure trong spring boot study synchronize synchronized system environment variables tcp test thiết kế tầng trong dự án thread thread pool threadjava threadpool thymeleaf tomcat totp tracking location transaction transfer transfer git udp uniswap unit test unity upload upload file utf-8 file validate validate date vector video call vietqr view volatile vue vue cli vuejs watermark web web3 web3 client webassembly webflux webpack webrtc websocket windows 11 winforms wordpress work xss zip file zookeeper