🔌 Bước 3 của deployment

Env & nối frontend với backend

Đây là chỗ hay làm người mới khóc: trên máy chạy ngon, deploy lên là hỏng. Lý do gần như luôn nằm ở environment variable và cách frontend nối với backend khi đã lên thật.

Nhớ một điều: máy của bạn có sẵn các khóa trong file riêng, nhưng hosting thì không. Phải khai báo lại cho nó, nếu không app sẽ hỏng.
Frontend (đã deploy)cần biết gọi backend ở đâu
Live
↓URL backend + khóa (env)↑
Backend (đã deploy)cho phép frontend gọi
API
🧳Env var
🚪CORS
🌗Môi trường
Giới thiệu

Environment variable là gì?

Hiểu ngắn: là những giá trị cấu hình để bên ngoài code, như khóa và đường nối backend, để vừa an toàn vừa đổi được theo nơi chạy.

🧳 Ngăn cất cấu hình

Env var thường giữ:

  • Đường link tới backend (API URL).
  • Khóa công khai để nối dịch vụ.
  • Các bật tắt tính năng theo nơi chạy.
  • Khóa bí mật (chỉ ở phía server).

🙌 Vì sao không viết thẳng vào code

Tách ra ngoài giúp bạn:

  • Không lộ khóa khi đẩy code lên GitHub.
  • Đổi giá trị mà không phải sửa code.
  • Dùng giá trị khác nhau cho máy mình và bản thật.
Ẩn dụ dễ nhớ: Code là công thức nấu ăn đem cho ai cũng được. Env var là tủ gia vị riêng của từng bếp. Cùng một công thức, mỗi bếp lắp tủ gia vị của mình vào.
Phân biệt

Ba môi trường thường gặp

Cùng một app nhưng chạy ở vài "phiên bản" khác nhau, mỗi cái dùng env riêng.

💻

Local (dev)

Trên máy bạn. Để làm và thử. Khóa nằm trong file .env ở máy.

👀

Preview

Bản xem trước. Hosting tạo link tạm để xem thử thay đổi trước khi ra thật.

🌍

Production

Bản thật. Cái mà người dùng đang dùng. Cần env chuẩn và cẩn thận nhất.

Lưu ý: Khóa công khai có thể nằm ở frontend, nhưng khóa bí mật phải ở phía server hoặc trong env của backend. Đừng để khóa bí mật trong giao diện, dù là môi trường nào.
Phần chính

Nối frontend với backend khi lên thật

Trình tự chung để giao diện đã deploy nói chuyện được với backend đã deploy.

1

Lấy đường link backend thật

Backend khi deploy sẽ có một đường link riêng (khác với lúc chạy trên máy).

Vì sao: frontend thật phải gọi backend thật, không phải bản trên máy bạn.
2

Khai báo env trên hosting frontend

Điền đường link backend và các khóa công khai vào phần cấu hình env của hosting.

Vì sao: hosting không có file .env trên máy bạn, phải khai báo lại.
3

Đặt env cho đúng từng môi trường

Bản preview và bản thật có thể trỏ tới backend khác nhau. Khai báo riêng cho từng cái.

Vì sao: tránh bản thử nghịch nhầm vào dữ liệu thật.
4

Cho phép frontend gọi (CORS)

Ở backend, khai báo địa chỉ frontend được phép gọi tới.

Vì sao: mặc định backend chặn các địa chỉ lạ, không khai báo là bị chặn.
5

Deploy lại và kiểm tra thật

Đẩy lại để env có hiệu lực, rồi thử đăng nhập, thêm dữ liệu trên bản đã deploy.

Vì sao: env thường chỉ áp dụng sau khi deploy lại.
Hiểu nhanh

Lỗi CORS là gì?

Đây là lỗi gần như ai deploy app có backend cũng gặp một lần. Hiểu rồi thì xử rất nhanh.

🚪 Chuyện gì xảy ra

Frontend ở một địa chỉ, backend ở địa chỉ khác. Vì an toàn, trình duyệt chặn frontend gọi sang backend nếu backend chưa nói "tôi cho phép địa chỉ này".

🔑 Cách xử

Vào cấu hình backend, thêm địa chỉ frontend của bạn vào danh sách được phép gọi. Khai đúng địa chỉ bản thật và bản preview là hết lỗi.

Phòng trước cho đỡ khổ

Lỗi thường gặp & mẹo nhờ AI

Đây là nhóm lỗi gây ra câu kinh điển: "máy mình chạy mà deploy hỏng".

🧩

Quên khai env trên hosting

Lỗi số một. Máy bạn có file .env, hosting thì không, nên app thật thiếu khóa.

Cách sửa: khai báo lại mọi env cần thiết trong cấu hình hosting.
🚪

Lỗi CORS

Frontend gọi backend bị chặn vì backend chưa cho phép địa chỉ đó.

Cách sửa: thêm địa chỉ frontend vào danh sách được phép ở backend.
📍

Vẫn trỏ vào backend trên máy

App thật vẫn gọi địa chỉ localhost nên không ai ngoài máy bạn dùng được.

Cách sửa: đổi đường link backend sang địa chỉ thật trong env.
🔐

Lỡ để khóa bí mật ở frontend

Đặt khóa bí mật vào env của giao diện, ai mở app cũng xem được.

Cách sửa: khóa bí mật chỉ để ở backend; frontend chỉ giữ khóa công khai.
Ví dụ cách giao việc cho AI "App của tôi chạy trên máy thì ổn nhưng deploy lên thì không nối được backend. Hãy liệt kê những environment variable tôi cần khai trên hosting, nhắc tôi đổi đường link backend sang địa chỉ thật, và hướng dẫn thêm địa chỉ frontend vào CORS của backend."

"Máy mình chạy mà deploy hỏng" thường chỉ là thiếu env.

Khai báo lại khóa và đường link backend trên hosting, cho đúng từng môi trường, mở CORS cho frontend, là hai phần của app bắt tay nhau êm đẹp trên internet.

← Về trang chủ deployment · Phong Ho - AI Business