Mô hình Web 3 tầng — phân chia công việc giữa Web, ứng dụng và cơ sở dữ liệu

Bài viết này nằm trong khóa Kiến thức nền tảng về CNTT, xây dựng từ đầu những kiến thức CNTT thực tế tối thiểu mà bạn cần để lập trình và vibe coding.
Frontend và backend chỉ là cách gọi khác của một trong ba tầng: Web, ứng dụng và cơ sở dữ liệu. Các sơ đồ sẽ cho thấy request đi qua các tầng như thế nào.

Bài viết này nói về mô hình Web 3 tầng.

Đây là cách nhìn một ứng dụng web thành ba vai trò: Web, ứng dụng và cơ sở dữ liệu.

Frontend và backend trong sách nhập môn chính là cách gọi khác của một trong ba thứ này.

Các từ trong sách nhập môn ứng với ba tầng thế nào
===FrontendBackendCơ sở dữ liệuTầng WebTầng AppTầng DBHiển thị vànhận đầu vàoQuyết định và tính toánlệnh đọc/ghiLưu và đọcdữ liệuRequestĐọc/ghi
Hàng trên là các từ xuất hiện trong sách và khóa học nhập môn, hàng giữa là tên gọi dùng trong bài này, hàng dưới là việc mà tầng đó đảm nhận. Hai ô nối với nhau bằng đường kẻ đôi là cùng một thứ, chỉ khác cách gọi.

Phần nội dung dùng tên đầy đủ; sơ đồ thì chật nên viết tắt thành tầng Web, tầng App và tầng DB.

Mô hình 3 tầng chia một ứng dụng thành các vai trò Web, ứng dụng và cơ sở dữ liệu

Mô hình 3 tầng (three-tier architecture, cấu trúc chia thành ba vai trò Web, ứng dụng và cơ sở dữ liệu) là dạng cơ bản của ứng dụng web, và mỗi phần được tách ra gọi là một tầng (tier).

Tên gọi trong bài nàyTên tiếng AnhViệc đảm nhậnTên gọi trong sách nhập môn
Tầng server Webpresentation tierTrả về các file cho màn hìnhFrontend
Tầng Appapplication tierRa quyết định và tính toánBackend
Tầng DBdata tierLưu và đọc dữ liệuCơ sở dữ liệu

Các file mà tầng server Web trả về sẽ do trình duyệt của người dùng chạy và vẽ ra màn hình.

Bản thân cấu trúc — chia ứng dụng thành những phần nào và nối chúng ra sao — chính là kiến trúc (architecture), và "kiến trúc 3 tầng" trong sách nhập môn cũng chính là mô hình 3 tầng của bài này.

Bên trong một my-app
my-app (ứng dụng đặt chỗ dành cho thành viên)
Tầng Web (frontend)
  • Hiển thị form đặt chỗ và danh sách đặt chỗ
  • Nhận đầu vào kiểu 2 người lúc 12/24 18:00
  • Chạy trong trình duyệt của người dùng
Tầng App (backend)
  • Kiểm tra 12/24 18:00 còn trống hay không
  • Xác nhận đặt chỗ và trả kết quả về tầng server Web
  • Chạy trên server
Tầng DB (cơ sở dữ liệu)
  • Lưu bản ghi đặt chỗ và thành viên
  • Đọc và trả về bản ghi được yêu cầu
  • Nằm trên server cơ sở dữ liệu
Khung ngoài là một my-app. Ba ô bên trong là các tầng, xếp từ trên xuống theo mức độ gần người dùng. Các gạch đầu dòng là việc tầng đó đảm nhận trong ứng dụng đặt chỗ.

Ba tầng xếp từ trên xuống theo mức độ gần người dùng.

Thứ duy nhất người dùng thao tác trực tiếp là màn hình do tầng server Web trả về, hai tầng còn lại thì không nhìn thấy.

Màn hình do tầng server Web trả về chạy trong trình duyệt, mỗi người dùng một màn hình.

Có ba người dùng thì có ba màn hình, và cả ba dùng chung hai tầng còn lại.

Ba màn hình bên trái chạy trên ba máy tính hoặc điện thoại khác nhau.

Trong hai người A và B cùng chọn một giờ, người được xử lý sau bị từ chối vì các bản ghi đều dồn về một tầng cơ sở dữ liệu.

Dù có bao nhiêu màn hình thì nơi request đến và nơi lưu bản ghi vẫn chỉ có một.

Mô hình 3 tầng là cách phân chia công việc bên trong một ứng dụng

Mô hình 3 tầng là cách chia một ứng dụng thành ba phần đảm nhận: Web, ứng dụng và cơ sở dữ liệu.

Frontend trong sách nhập môn là tầng server Web, backend là tầng server ứng dụng; màn hình do tầng server Web trả về thì mỗi người dùng có một, còn tầng server ứng dụng và tầng cơ sở dữ liệu thì tất cả dùng chung một.

Vì sao phải chia tầng — chỉ sửa ở một chỗ và quyết định cho tất cả tại một chỗ

Có 2 lý do để chia.

Thứ nhất, khi muốn thay đổi điều gì đó, chỗ phải sửa nằm gọn trong một tầng.

Cùng một thay đổi, phạm vi phải sửa vẫn khác nhau tùy cách chia
Muốn đổi màunút bấmĐã chia tầngchỉ sửa tầng WebGộp làm mộttìm chỗ đặt màuKhông đụng đếntầng App và DBKiểm tra lại cảphần không liên quan
Trên cùng là điều bạn muốn thay đổi. Bên trái là khi đã chia tầng, bên phải là khi gộp làm một, còn hàng dưới là phạm vi bạn phải kiểm tra lại trong mỗi trường hợp.

Nếu đã chia tầng, thứ duy nhất bạn đụng đến là file trong tầng server Web.

Nếu gộp làm một, bạn phải tìm chỗ quy định màu rồi kiểm tra lại xem cả những xử lý không liên quan có còn chạy đúng không.

Thứ hai, cần có một nơi xét chung phần của tất cả mọi người rồi lưu lại.

Màn hình do tầng server Web trả về chạy trong trình duyệt của một người dùng và không biết gì về những gì người khác nhập.

Các quy tắc quyết định riêng của ứng dụng đó là business logic (logic nghiệp vụ), và chúng được đặt ở tầng server ứng dụng.

Những gì tầng server Web kiểm tra và những quy tắc đặt ở tầng server ứng dụng
my-app (ứng dụng đặt chỗ dành cho thành viên)
Kiểm tra trên màn hình
  • Ô ngày tháng có bị gửi đi khi còn trống không
  • Số người có được nhập bằng chữ số không
  • Báo được ngay tại chỗ, trước khi gửi
Quy tắc đặt ở tầng App (business logic)
  • Đặt chỗ có trùng nhau lúc 12/24 18:00 không
  • Thành viên đó có vượt số lượt đặt chỗ cho phép không
  • Quyết định được sau khi đọc bản ghi của tất cả mọi người
Khung ngoài là một my-app. Khung trên là những gì tầng server Web kiểm tra ngay tại chỗ, khung dưới là business logic đặt ở tầng server ứng dụng.

Ngay cả màn hình do tầng server Web trả về cũng kiểm tra những thứ như ô ngày tháng có trống hay không.

Nhưng phần kiểm tra đó nằm trong file đã về đến trình duyệt của người dùng, nên người dùng có thể sửa lại hoặc bỏ qua nó.

Vì vậy tầng server ứng dụng kiểm tra lại đúng những điều đó một lần nữa.

Hãy so sánh xem trong tình huống hai người cùng gửi một giờ 12/24 18:00, việc đặt phần quyết định ở đâu sẽ làm kết quả thay đổi thế nào.

Khác biệt nằm ở chỗ khi quyết định thì đang nhìn vào cái gì.

Phía màn hình chỉ nhìn danh sách trong trình duyệt của chính nó, còn tầng server ứng dụng đọc bản ghi của tất cả mọi người rồi mới quyết định.

Khi đặt ở phía màn hình, người dùng A và B đều chỉ nhìn thấy danh sách của riêng mình nên cả hai đều kết luận là còn trống.

Khi đặt ở tầng server ứng dụng, request của tất cả mọi người đều đến một chỗ và có thể đọc bản ghi rồi kiểm tra lần lượt.

Chia tầng là vì chỗ sửa và chỗ quyết định

Khi đã chia tầng, lúc muốn sửa thì bạn chỉ phải đụng đến một chỗ.

Lý do còn lại là cần nhìn và quyết định cho tất cả mọi người tại một chỗ: màn hình thì tách riêng theo từng người dùng nên không biết được người khác đã gửi gì.

Dữ liệu đi qua các tầng thế nào cho đến khi lưu được 1 lượt đặt chỗ

Tầng server Web và tầng server ứng dụng nối với nhau bằng request và response, còn tầng server ứng dụng và tầng cơ sở dữ liệu nối với nhau bằng lệnh đọc và ghi.

TầngViệc làm ở đóChuyển đếnChuyển cái gì
Tầng WebNhận đầu vàoTầng App12/24 18:00, 2 người
Tầng AppKiểm tra còn trống khôngTầng DBLệnh đọc đặt chỗ của ngày đó
Tầng DBĐọc bản ghiTầng App0 lượt đặt chỗ ngày 12/24

Mỗi tầng chỉ làm phần việc của mình rồi chuyển sang tầng kế tiếp.

Tầng server Web không nối thẳng với tầng cơ sở dữ liệu, ở giữa luôn có tầng server ứng dụng.

Sau khi bản ghi từ tầng cơ sở dữ liệu trả về, tầng server ứng dụng quyết định kết quả.

Đường đi tách làm hai ở tầng server ứng dụng, câu trả lời quay về chỉ có một
12/24 18:00request 2 ngườiTầng Appđọc bản ghiCòn trống→ ghi vàoĐã có 1 lượt→ không ghiTrả responsevề tầng Web
Một request đến từ bên trái rồi tách lên trên hoặc xuống dưới tùy kết quả đọc bản ghi. Dù có tách thì response quay về tầng server Web cũng chỉ có một.

Dù tách về phía nào, thứ quay về tầng server Web cũng chỉ là một response.

Ba tầng là dạng cơ bản trong bài này, và ứng dụng thực tế cũng có ngoại lệ.

Có cấu hình không tự làm tầng server ứng dụng mà nối thẳng đến dịch vụ bên ngoài, cũng có cấu hình mà tầng server ứng dụng được tách thành nhiều phần.

Dù vậy bạn vẫn đọc được chúng nếu nhìn theo phần nào đang đảm nhận Web, ứng dụng hay cơ sở dữ liệu.

Đường đi xuống rồi quay về chỉ có một

Đầu vào của người dùng đi xuống từ tầng server Web đến tầng server ứng dụng rồi đến tầng cơ sở dữ liệu, và quay về đúng theo đường đó.

Tầng server Web không nối thẳng với tầng cơ sở dữ liệu; tầng server ứng dụng đọc bản ghi rồi quyết định kết quả và chỉ trả về một câu trả lời duy nhất.

Trong ứng dụng của bạn phần nào là tầng nào — 3 tầng không có nghĩa là 3 máy

Nếu xác định trước các file và framework xuất hiện trong sách nhập môn thuộc về tầng nào, bạn sẽ đọc được ý nghĩa của từng bước.

Cùng ba tầng đó, khi làm bằng JavaScript và khi làm bằng Python
==Tầng server WebTầng serverứng dụngTầng DBindex.htmlscript.jsserver.js(Express)PostgreSQLindex.htmlscript.jsviews.py(Django)PostgreSQL
Mỗi hàng là một tầng. Cột giữa và cột phải là file hoặc sản phẩm ứng với tầng đó. Hàng trên và hàng dưới giống nhau ở cả hai bên, chỉ hàng giữa là khác.

Tầng server Web trong cả hai trường hợp đều là cùng những file đó.

Thứ trình duyệt đọc trực tiếp được là HTML, CSS và JavaScript, nên bạn chỉ được chọn ngôn ngữ từ tầng server ứng dụng trở đi.

Tầng là cách chia vai trò, không phải số lượng máy tính.

Ba tầng chạy bên trong một chiếc máy tính trên bàn của bạn
Máy tính của bạn
Trình duyệt (tầng Web)
  • Mở http://localhost:3000 thì hiện form đặt chỗ
  • Đọc index.html và script.js rồi vẽ màn hình
Server trên máy bạn (tầng App)
  • Chạy bằng node server.js
  • Chờ ở cổng 3000 và nhận request
Cơ sở dữ liệu (tầng DB)
  • Lưu bản ghi đặt chỗ và thành viên vào reserve.db
  • Chạy bên trong cùng chiếc máy tính đó
Khung ngoài là máy tính của bạn. Cả ba tầng đều chạy bên trong một máy này, và cách chia tầng không khác gì sau khi công khai.

Khi bạn mở http://localhost:3000 trên máy của mình, cả ba tầng đều nằm trong chiếc máy tính đó.

Sau khi công khai, các tầng thường được đặt trên những server khác nhau, và công việc đó được nói đến trong bài "Deploy và biến môi trường — Từ chạy được ở máy bạn đến khi công khai".

Chỉ màn hình do tầng server Web trả về là chạy trên thiết bị của người dùng, còn tầng server ứng dụng và tầng cơ sở dữ liệu nằm ở phía server công khai.

Dù bạn chuyển tầng cơ sở dữ liệu sang một máy khác thì quan hệ vẫn không đổi: tầng server ứng dụng gửi lệnh đọc và ghi đến nó.

Số tầng và số máy tính là hai chuyện khác nhau

Chia thành ba tầng không có nghĩa là có ba máy tính đang chạy.

Trên máy của bạn thì cả ba đều nằm trong chiếc máy đó, còn sau khi công khai thì các tầng thường được đặt trên những server khác nhau.

QUIZ

Kiểm tra kiến thức

Hãy trả lời từng câu hỏi một.

Câu 1Xử lý kiểm tra "đặt chỗ có trùng nhau vào cùng một giờ không" được đặt ở tầng nào?

Câu 2Cái gì đi lại giữa tầng server Web và tầng server ứng dụng?

Câu 3Bạn mở http://localhost:3000 trên máy của mình và cũng chạy cơ sở dữ liệu trên chính máy đó. Ba tầng nằm ở đâu?