Cách Cấu Hình Biến Môi Trường Động cho Ứng Dụng Frontend Sử Dụng Docker

Cập nhật gần nhất: 10/11/2024

Xin chào các bạn, lại là mình đây! 👋👋

Hôm nay, mình muốn chia sẻ một chủ đề rất thú vị và cần thiết cho các lập trình viên frontend, đó là cách cấu hình biến môi trường động (dynamic ENV) cho ứng dụng frontend khi sử dụng Docker. Đây là một bài toán thực tế mà nhiều công ty đang gặp phải, đặc biệt trong bối cảnh "Build once, run everywhere".

Tổng Quan Về Frontend

Trong năm 2024, hầu hết các ứng dụng frontend đang được xây dựng dựa trên các thư viện và framework như Vue, React, Angular, giúp tăng tốc độ phát triển cũng như cải thiện trải nghiệm người dùng (UX). Tuy nhiên, một thách thức lớn mà chúng ta thường gặp là cách quản lý biến môi trường, đặc biệt là khi quá trình build tạo ra các file tĩnh mà nội dung không thể thay đổi sau đó.

Vấn Đề Của Frontend

Khi một ứng dụng frontend được build, mọi thứ trở nên "cứng nhắc" và không thể điều chỉnh được. Điều này khác với backend, nơi chúng ta có thể dễ dàng thay đổi biến môi trường cho các môi trường khác nhau như development, staging, production bằng các file .env. Để cùng hiểu rõ hơn, chúng ta sẽ tìm hiểu một số giải pháp hiện tại cho vấn đề này:

Cách 1: Sử Dụng Nhiều File .env
Chúng ta có thể tạo ra nhiều file .env cho từng môi trường nhưng việc này yêu cầu phải rebuild ứng dụng cho mỗi lần chuyển môi trường.
Cách 2: Gọi API để Lấy Config
Phương pháp này có thể giúp lấy cấu hình động từ backend, nhưng nó phụ thuộc vào tốc độ mạng và có thể làm chậm trải nghiệm người dùng.
Cách 3: Hardcode Thông Tin Vào Code
Cách này khiến frontend trở nên phụ thuộc vào domain, và có thể gây ra nhiều vấn đề khi chúng ta thay đổi domain hoặc cấu trúc API.

Giải Pháp Cấu Hình Biến Môi Trường Động

Trong bài viết này, mình xin giới thiệu một giải pháp cụ thể, đó là sử dụng Docker và envsubst, một công cụ CLI giúp thay thế biến môi trường vào file template, từ đó chúng ta có thể xây dựng một ứng dụng frontend linh hoạt hơn mà không cần phải rebuild sau mỗi thay đổi.

Bước 1: Chuẩn Bị Project

Đầu tiên, bạn cần clone source code cho project mẫu về máy và chạy Docker để kiểm tra nó:

bash Copy

docker compose up -d --build

Bước 2: Tạo File `env.template.js`

Trong thư mục public, bạn tạo một file env.template.js với nội dung như sau:

javascript Copy

window.__HELLO_MESSAGE__ = "${HELLO_MESSAGE}"

Bước 3: Cập Nhật File `index.html`

Bạn cần import file env.js vào file index.html để có thể sử dụng biến môi trường trong ứng dụng:

html Copy

<script src="/env.js"></script>

Bước 4: Sử Dụng `envsubst` trong Dockerfile

Trong Dockerfile, bạn cần thay đổi đoạn CMD để sử dụng envsubst cho việc inject biến môi trường:

dockerfile Copy

CMD /bin/sh -c "envsubst < env.template.js > env.js && nginx -g 'daemon off;'"

Kết Quả

Khi hoàn thành các bước trên, bạn sẽ có thể thay đổi giá trị của biến môi trường ngay trong file docker-compose.yml mà không cần rebuild lại ứng dụng. Chỉ cần restart Docker là bạn có thể thấy kết quả trên trình duyệt một cách ngay lập tức.

Kết Luận

Với giải pháp này, bạn có thể linh hoạt quản lý biến môi trường cho ứng dụng frontend mà không cần làm mất thời gian vào việc rebuild thường xuyên. Hy vọng bài viết sẽ giúp ích cho các bạn trong việc phát triển ứng dụng frontend hiện đại với Docker một cách dễ dàng và hiệu quả! Chúc các bạn thành công!

Hẹn gặp lại trong những bài viết sau!
source: viblo