All posts
Cách Một Website Hoạt Động: Hành Trình Từ Trình Duyệt Đến Server Với NGINX/Apache + PHP + ReactJS
phpnginxweb

Cách Một Website Hoạt Động: Hành Trình Từ Trình Duyệt Đến Server Với NGINX/Apache + PHP + ReactJS

Trung Ngo T.'s avatarTrung Ngo T.
Table of Contents6 sections

Giới thiệu

Bạn đã bao giờ tự hỏi điều gì thực sự diễn ra sau khi bạn nhập một địa chỉ website và nhấn Enter? Đằng sau thao tác tưởng chừng đơn giản ấy là một chuỗi quy trình phức tạp nhưng đầy thú vị. Trong bài viết này, chúng ta sẽ cùng khám phá từng bước hoạt động của một website hiện đại sử dụng bộ công nghệ phổ biến: NGINX/Apache + PHP + ReactJS.

1. Website Hoạt Động Thế Nào? (Nguyên lý cơ bản)

Theo tài liệu của MDN (https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works), để một website xuất hiện trên màn hình, trình duyệt phải trải qua bốn giai đoạn chính:

  1. DNS Resolution — Trình duyệt tìm kiếm địa chỉ IP tương ứng với tên miền bạn nhập (ví dụ: example.com → 123.45.67.89).

  2. TCP Connection — Trình duyệt và server thiết lập một kết nối TCP để có thể trao đổi dữ liệu.

  3. HTTP Request/Response — Trình duyệt gửi yêu cầu HTTP (GET, POST, v.v.). Server xử lý và trả về dữ liệu (thường là HTML, CSS, JS, JSON...).

  4. Browser Rendering — Trình duyệt nhận dữ liệu và hiển thị giao diện website cho bạn.

2. Website Hoạt Động Ra Sao Với NGINX/Apache + PHP + ReactJS?

  • NGINX/Apache: Là "người gác cổng", nhận mọi yêu cầu từ trình duyệt.

  • ReactJS: Chịu trách nhiệm "vẽ" giao diện, xử lý các tương tác của người dùng trên trình duyệt.

  • PHP: Đảm nhiệm các tác vụ ở phía máy chủ (backend) như xử lý logic, truy cập cơ sở dữ liệu, trả về dữ liệu cho ReactJS.

3. Quy Trình Khi Người Dùng Truy Cập Website (Chi tiết từng bước)

Ví dụ cụ thể: Giả sử bạn truy cập một trang quản lý sản phẩm, muốn xem danh sách sản phẩm:

  • Bước 1: Bạn nhập địa chỉ website (ví dụ: www.shoponline.com).

    • Trình duyệt gửi yêu cầu tới NGINX, NGINX trả về file HTML, CSS, JS của ReactJS.

  • Bước 2: Giao diện ReactJS hiển thị, bạn nhấn nút "Xem sản phẩm".

    • ReactJS gửi yêu cầu (AJAX) tới API: GET /api/products.

  • Bước 3: NGINX nhận được yêu cầu /api/products, chuyển tiếp (proxy) sang PHP backend.

  • Bước 4: PHP nhận request, truy vấn database lấy danh sách sản phẩm, trả về dữ liệu JSON:

[
  { "id": 1, "name": "Áo thun", "price": 150000 },
  { "id": 2, "name": "Quần jeans", "price": 350000 }
]

  • Bước 5: ReactJS nhận dữ liệu JSON, cập nhật UI hiển thị danh sách sản phẩm cho bạn.

Minh họa:

4. Cấu Trúc Dự Án Thực Tế

project/
├── frontend/     # ReactJS
├── backend/      # PHP APIs
├── nginx.conf    # Cấu hình NGINX
└── build/        # React build

5. Kết Luận

Khi hiểu rõ luồng hoạt động phía sau, bạn sẽ dễ dàng debug, tối ưu hệ thống và phát triển website hiệu quả hơn. Stack NGINX/Apache + PHP + ReactJS vẫn là lựa chọn mạnh mẽ, phù hợp cho nhiều dự án từ nhỏ đến lớn.

Read more posts