Client-side rendering, server-side rendering
1.1 Web server
1.1.1 Client-side và server-side
Ứng dụng web hoạt động dựa trên kiến trúc client-server, nghĩa là sẽ có các xử lý được thực hiện tại phía client (client-side), và có các xử lý được thực hiện ở phía server (server-side).
Các xử lý tại client-side bao gồm việc gửi yêu cầu tới server, nhận mã HTML, CSS và JavaScript từ server, thực thi mã và hiển thị kết quả cho người dùng.
Các xử lý tại server-side bao gồm việc nhận yêu cầu do client gửi tới, làm việc với cơ sở dữ liệu, xử lý yêu cầu, trả kết quả về cho client.
Trong lĩnh vực web, client-side bao gồm các hoạt động diễn ra tại trình duyệt, server-side bao gồm các hoạt động diễn ra tại web server.
Như vậy để tạo ra một ứng dụng web hoàn chỉnh, cần phải viết các đoạn mã xử lý ở cả bên server và bên client; đồng thời phải phối hợp các đoạn mã này một cách hợp lý để đảm bảo ứng dụng chạy đúng, an toàn và hiệu quả.
Việc viết mã xử lý tại phía client thường được gọi là lập trình phía client, hay lập trình front-end; các ngôn ngữ thường được sử dụng gồm HTML, CSS, và JavaScript. Front-end là toàn bộ giao diện và các trải nghiệm của người dùng trên trình duyệt.
Việc viết mã xử lý tại phía server thường được gọi là lập trình phía server, hay lập trình back-end; các ngôn ngữ thường được sử dụng gồm PHP, C#, Java, Python, Ruby, JavaScript. Back-end là các xử lý liên quan đến cơ sở dữ liệu, các xử lý nghiệp vụ chạy tại máy server.
Tùy theo khả năng, một lập trình viên có thể chọn làm ở mảng front-end, hoặc back-end hoặc cả hai (full-stack). Dù làm ở mảng front-end thì bạn cũng phải biết căn bản về mảng back-end và ngược lại.
1.1.2 Web server
Như đã biết, web hoạt động theo kiến trúc client-server, trong kiến trúc này, web server đóng vai trò là “server”, có nhiệm vụ tiếp nhận, xử lý và trả lời các yêu cầu (request) từ client, quá trình trao đổi giữa client và server được thực hiện bằng giao thức HTTP.
Vậy, web server là phần mềm, hoặc phần cứng đóng vai trò là máy phục vụ (server) trong kiến trúc client-server, có nhiệm vụ tiếp nhận, xử lý và trả lời các yêu cầu (request) từ client, thông qua giao thức HTTP và một số giao thức liên quan khác.
Chức năng quan trọng nhất của web server là lưu trữ, xử lý và phân phối nội dung web đến trình duyệt của người dùng. Nội dung web bao gồm mã HTML, CSS, JavaScript, hình ảnh, âm thanh, video.
Web server không chỉ phục vụ trong hệ thống web, mà nó còn được nhúng, hay tích hợp trong các thiết bị khác, ví dụ như trong máy in, bộ định tuyến (router), bộ phát sóng không dây (WR), webcam. Trong trường hợp này, web server đóng vai trò là một phần của hệ thống, dùng để cấu hình, theo dõi và quản lý thiết bị.
Với công nghệ SOAP và REST (web services), web server còn đóng vai trò là thành phần cung cấp dịch vụ web cho các máy tính khác, thông qua giao tiếp máy-máy.
Quan sát hình sau để thấy được vai trò của thành phần web server trong một hệ thống web.
Để có một web server, bạn chỉ cần cài đặt phần mềm web server lên một máy tính bất kỳ. Tuy nhiên, để có một web server thực thụ thì cần phải chuẩn bị một máy tính server có cấu hình đủ mạnh, trên đó có cài hệ điều hành server, và cuối cùng là cài đặt một phần mềm web server lên hệ điều hành đó.
Danh sách một số phần mềm web server được sử dụng nhiều và thị phần (tham khảo năm 2021, nguồn wikipedia).
Phần mềm web server | Nhà cung cấp | Thị phần |
Nginx | Nginx | 34,54% |
Apache | Apache | 26,32% |
IIS | Microsoft | 6,5% |
OpenResty | OpenResty | 6,36% |
Cloudflare server | Cloudflare | 5% |
1.1.3 Cài đặt Apache
Để hiểu rõ hơn về web server, phần này sẽ thực hiện cài đặt minh họa một trong các phần mềm web server, đó là Apache.
Apache có tên gọi đầy đủ là Apache HTTP Server, là một phần mềm web server, hoạt động trên hầu hết các hệ điều hành (ví dụ: Windows, Unix, Linux, Novell Netware).
Một số đặc điểm của Apache
– Là phần mềm miễn phí, mã nguồn mở
– Ổn định, có độ tin cậy cao
– Dễ cấu hình
– Đa nền tảng
– Gặp vấn đề về hiệu năng nếu ứng dụng web có lượng truy cập cực lớn
– Là lựa chọn phù hợp cho các đơn vị kinh doanh vừa và nhỏ.
Cài đặt
[Xem thêm hướng dẫn cài đặt: https://www.youtube.com/watch?v=oJnCEqeAsUk]
– Vào trang web của Apache https://httpd.apache.org/, chọn mục Download, bấm vào mục “Apache httpd for Microsoft Windows is available from a number of third party vendors.” để chọn bản cho Windows.
– Chọn bản Apache Lounge, chọn bản 64 bit hoặc 32 bit tùy theo máy tính của bạn
(Ví dụ: httpd-2.4.48-win64-VS16.zip, kích thước khoảng 10MB)
– Giải nén tập tin vừa tải xuống, chép thư mục Apache24 vào ổ đĩa C:\
– Mở chương trình dòng lệnh (CMD)
– Trong CMD, chuyển tới thư mục C:\Apache24\bin
– Gõ lệnh httpd -k install để cài đặt Apache dưới dạng một dịch vụ
C:\Apache24\bin>httpd -k install
Installing the 'Apache2.4' service
The 'Apache2.4' service is successfully installed.
Testing httpd.conf....
Errors reported here must be corrected before the service can be started.
AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using fe80::5d5d:1c20:557f:e928. Set the 'ServerName' directive globally to suppress this message
– Sau khi cài đặt Apache thành công, mở cửa sổ services của Windows để kiểm tra xem có chưa, và khởi chạy Apache (Chuột phải vào dịch vụ Apache2.4, chọn Start). Trong cửa sổ Services, để ý cột Status, nếu một dịch vụ đang chạy thì giá trị tại cột này sẽ là running.
– Mở cửa sổ trình duyệt, gõ vào đường dẫn http://127.0.0.1, Enter, nếu trên trình duyệt xuất hiện dòng chữ “It works!” là bạn đã cài đặt được Apache.
Gỡ bỏ Apache
– Mở chương trình dòng lệnh (CMD)
– Trong CMD, chuyển tới thư mục C:\Apache24\bin
– Gõ lệnh httpd -k uninstall để gở bỏ Apache
Các lỗi thường gặp khi cài đặt Apache
Khi cài đặt Apache thường gặp 2 lỗi phổ biến:
– Một là cài đặt phiên bản không phù hợp với hệ điều hành, ví dụ bạn đang sử dụng hệ điều hành Windows phiên bản 32bit nhưng lại tải và cài đặt phiên bản 64bit. Cách khắc phục là tải lại phiên bản Apache phù hợp với hệ điều hành.
– Hai là tình huống tranh chấp cổng. Tình huống này xảy ra khi bạn đã cài đặt Apache thành công, tuy nhiên, khi khởi chạy (start) dịch vụ Apache thì không thể chạy được. Lý do là khi chạy Apache cần sử dụng tới cổng 80 (cho HTTP) và 443 (cho HTTPS); nếu hai cổng này đã bị một chương trình hay dịch vụ nào đó trên máy tính chiếm mất thì nó sẽ không thể khởi chạy được. Giải pháp là cấu hình Apache sử dụng cổng khác với 80 và 443; hoặc tắt các chương trình/service đang sử dụng cổng 80 và 443. Bạn có thể vào Task Manager > Services để kiểm tra và tắt các dịch vụ sau:
+ World Wide Web Publishing Service (WWW-Publishing Service)
+ Web Deployment Agent Service
+ Skype
+ SQL Server Reporting Service(MSSQLSERVER)
+ VMware Workstation
+ IIS
1.1.5 Bài tập và thực hành
Bài tập 1. Cài đặt web server Apache trên Windows (tùy chọn làm thêm trên: Ubuntu, Docker)
https://www.youtube.com/watch?v=oJnCEqeAsUk
Sau khi cài đặt thành công Apache, trả lời các câu hỏi và làm thêm các yêu cầu sau:
– Trong Apache, thưc mục web root (hay document root) có tên là gì?
– Mặc định, các trang web, hay các tập tin của một website được để ở đâu?
Trả lời: Web root (hay document root) của Apache là htdocs, mặc định các website sẽ được lưu trữ ở đây.
– Web server này có thể thực thi mã PHP chưa?
Trả lời: Để kiểm tra xem web server này đã thực thi được mã PHP chưa: trong htdocs, tạo tập tin index1.php với mã nguồn như sau:
<?php
echo "hi PHP";
?>
Mở trình duyệt, nhập vào đường dẫn http://127.0.0.1/index1.php
– Nếu trên trình duyệt xuất chữ “hi PHP” là web server đã thực thi được mã PHP
– Ngược lại, nếu trình duyệt xuất toàn bộ mã nguồn “<?php echo "hi PHP"; ?>” có nghĩa là web server chưa thể thực thi (thông dịch) được mã PHP.
– Thư mục logs để làm gì?
Trả lời:
Các file log có thể giải quyết các rắc rối gặp phải miễn là biết ứng dụng nào. Mỗi ứng dụng được cài đặt trên hệ thống có cơ chế tạo log file riêng của mình để bất cứ khi nào cần thông tin cụ thể thì các log file là nơi tốt nhất để tìm.
– Tùy chỉnh tập tin index.html (thêm mã HTML, CSS, JavaScript) và xem kết quả trên trình duyệt
– Sử dụng tab Elements của Developer Tools để quan sát cây DOM, mã HTML, CSS và JavaScript
– Sử dụng tab Network của Developer Tools để quan sát HTTP request, HTTP response nhằm hiểu thêm quá trình giao tiếp giữa web client và web server
Bài tập 2. Cài đặt web server Nodejs
Đọc và làm theo hướng dẫn trong web site này (mục đích để làm quen với Nodejs, học cách làm việc chuyên nghiệp, tăng khả năng đọc hiểu tiếng Anh).
Bài tập 3. Cài đặt NGINX
Bài tập 4. Cài đặt XAMPP (làm thêm, không bắt buộc).
Tác giả: Lê Gia Công
){kind=link}
0 Nhận xét