Thêm Website File Tĩnh

ServBay là công cụ môi trường phát triển Web nội bộ mạnh mẽ, hỗ trợ nhiều ngôn ngữ và cơ sở dữ liệu. Ngoài website động, ServBay cũng rất phù hợp để lưu trữ và kiểm thử các website file tĩnh như các trang web hoặc ứng dụng frontend xây dựng từ HTML, CSS và JavaScript.

Bài viết này sẽ hướng dẫn bạn cách thêm và cấu hình một website file tĩnh trong ServBay.

Tổng quan

Website file tĩnh bao gồm những file được máy chủ Web cung cấp trực tiếp, không liên quan đến việc thực thi các script phía máy chủ (như PHP, Node.js, Python, v.v). Những website dạng này thường chứa trang HTML, file CSS, JavaScript, hình ảnh, font chữ, và các tài nguyên khác.

Sử dụng ServBay để lưu trữ website tĩnh tại máy cá nhân giúp bạn phát triển, debug và kiểm thử thuận tiện — đặc biệt hữu ích khi cần giả lập truy cập tên miền như môi trường sản xuất, kết nối HTTPS hoặc thử nghiệm CORS (Chia sẻ tài nguyên giữa các nguồn khác nhau).

Các trường hợp sử dụng

Phát triển & kiểm thử dự án frontend thuần tuý (HTML/CSS/JS).
Lưu trữ website/bài blog tài liệu tĩnh.
Kiểm tra phản hồi tài nguyên tĩnh trên các máy chủ Web khác nhau (Caddy/Nginx).
Giả lập tên miền và truy cập HTTPS như môi trường sản xuất tại máy nội bộ.
Kiểm thử sản phẩm build từ các framework frontend như React, Vue, Angular.

Điều kiện cần có

Đã cài đặt và chạy thành công ServBay trên macOS.
Đã có sẵn các file website tĩnh bạn muốn triển khai.

Các Bước Thực Hiện

Thực hiện các bước sau để thêm website file tĩnh trên ServBay:

Bước 1: Chuẩn bị File Website

Trước tiên, hãy đảm bảo toàn bộ file website tĩnh (ví dụ: index.html, style.css, script.js...) được đặt trong một thư mục riêng biệt.

Bạn nên tạo thư mục website bên trong thư mục gốc mặc định của ServBay là /Applications/ServBay/www, việc này giúp quản lý dự án gọn gàng. Ví dụ, giả sử bạn muốn tạo website my-static-site, hãy tạo thư mục cùng tên trong /Applications/ServBay/www/ rồi đặt tất cả file website vào đó.

bash

# Tạo thư mục mẫu trong Terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Tạo file index.html đơn giản
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 静态网站示例</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>恭喜您！ServBay 静态网站配置成功！</h1>  <!-- Chúc mừng bạn! Cấu hình website tĩnh ServBay thành công! -->
    <p>您正在通过 ServBay 访问这个本地静态页面。</p> <!-- Bạn đang truy cập trang tĩnh này qua ServBay. -->
</body>
</html>' > index.html

# Cấu trúc file của bạn sẽ như sau:
# /Applications/ServBay/www/servbay-static-demo/index.html

Bước 2: Thêm Website trong ServBay

Mở ứng dụng ServBay.
Ở thanh bên trái, chọn Website (Lưu ý: với phiên bản cũ có thể là "Host", phiên bản mới đã đổi thành "Website").
Ở cuối danh sách website, nhấn nút Thêm. Một cửa sổ cấu hình sẽ xuất hiện.

Bước 3: Cấu hình Website

Tại cửa sổ cấu hình, điền hoặc chọn các thông tin sau:

Tên miền (Domain): Nhập tên miền bạn muốn dùng để truy cập website nội bộ này. Khuyến nghị sử dụng tên miền có đuôi .servbay.demo, ví dụ: static.servbay.demo hoặc my-static-site.servbay.demo. ServBay sẽ tự động xử lý tên miền .servbay.demo mà không cần chỉnh sửa file hosts thủ công.
- Giải thích: Sử dụng tên miền .servbay.demo giúp tránh xung đột với domain thực và hệ thống DNS nội bộ của ServBay luôn đảm bảo tên miền này trỏ về chính máy bạn.
Đường dẫn (Path): Nhấn vào biểu tượng thư mục, chọn thư mục chứa file website bạn đã tạo ở bước 1, ví dụ /Applications/ServBay/www/servbay-static-demo/.
- Giải thích: Đường dẫn chính là thư mục gốc (Document Root) để máy chủ Web (Caddy/Nginx) tìm kiếm file website. Khi truy cập http://static.servbay.demo/, máy chủ sẽ đọc ở thư mục này và tìm kiếm các file mặc định như index.html. Đảm bảo đường dẫn trỏ đến thư mục chứa toàn bộ website, không phải file cụ thể (ví dụ index.html).
Cổng (Port): Thông thường hãy để mặc định. HTTP là 80, HTTPS là 443. Nếu cần dùng cổng đặc biệt có thể sửa tại đây.
Máy chủ Web (Web Server): Chọn Web Server muốn sử dụng. Với website tĩnh, Caddy và Nginx đều là lựa chọn xuất sắc.
- Caddy: Dễ cấu hình, hỗ trợ HTTP/2 và tự động HTTPS (với ServBay User CA), được ServBay đề xuất mặc định.
- Nginx: Hiệu suất cao, cấu hình linh hoạt, phổ biến trong môi trường production.
- Chỉ cần chọn một trong hai.
Phiên bản PHP (PHP Version): Website tĩnh không cần PHP. Hãy chọn None (Không chọn).
Phiên bản Node.js (Node.js Version): Website tĩnh không cần Node.js. Chọn None.
Phiên bản Python (Python Version): Website tĩnh không cần Python. Chọn None.
Phiên bản Go (Go Version): Website tĩnh không cần Go. Chọn None.
Phiên bản Java (Java Version): Website tĩnh không cần Java. Chọn None.
SSL: Nếu muốn truy cập website tĩnh qua HTTPS tại máy nội bộ, hãy chọn mục này. ServBay sẽ tự động cấu hình chứng chỉ SSL tin cậy nội bộ.
CORS: Nếu website tĩnh cần chia sẻ tài nguyên giữa các domain (Cross-Origin), ví dụ tải font hoặc dữ liệu API từ domain khác, hãy bật và cấu hình mục này. ServBay hỗ trợ cấu hình CORS header cho website.

Bước 4: Lưu & Áp dụng thay đổi

Sau khi điền đủ thông tin cấu hình, nhấn nút Lưu ở cuối cửa sổ.
Quay lại danh sách Website trên ServBay, bạn sẽ thấy mục website mới vừa tạo.
Nhấn nút Áp dụng thay đổi ở phía trên danh sách website.
- Giải thích: Nhấn Áp dụng thay đổi để ServBay tải lại cấu hình máy chủ Web (Caddy/Nginx), áp dụng các cài đặt mới. Bước này rất quan trọng, nếu không sẽ không truy cập được website bạn vừa thêm.

Kiểm tra Website

Sau khi cấu hình và áp dụng thay đổi, hãy mở trình duyệt, nhập tên miền bạn đã cấu hình (ví dụ http://static.servbay.demo hoặc https://static.servbay.demo nếu đã bật SSL) vào thanh địa chỉ để truy cập.

Nếu mọi thứ đúng, bạn sẽ thấy nội dung website tĩnh, ví dụ trang index.html vừa tạo ở phần hướng dẫn.

Lưu ý

Kiểm tra chắc chắn đường dẫn là thư mục gốc chứa file website.
Mỗi lần thêm, sửa hoặc xoá cấu hình website, phải nhấn Áp dụng thay đổi thì thiết lập mới có hiệu lực.
Với website tĩnh, luôn đặt các ngôn ngữ máy chủ như PHP, Node.js ở chế độ None để tiết kiệm tài nguyên và đảm bảo an toàn.
Nếu gặp lỗi không truy cập được, hãy kiểm tra ServBay đã chạy chưa, kiểm tra trạng thái máy chủ Web (Caddy/Nginx), đồng thời xác nhận tên miền trên trình duyệt giống với cấu hình trong ServBay.

Câu hỏi thường gặp (FAQ)

Hỏi: Tại sao truy cập domain cấu hình tự báo "không thể truy cập" hoặc "không tìm thấy server"?

Trả lời:

Kiểm tra ứng dụng ServBay đã chạy hay chưa.
Xác nhận đã nhấn nút Áp dụng thay đổi trong ServBay.
Kiểm tra tên miền gõ trên trình duyệt có trùng khớp 100% với domain cấu hình trong ServBay (bao gồm cả http:// hay https://).
Đảm bảo đường dẫn cấu hình đúng thư mục file website.
Xem file log của ServBay để biết chi tiết lỗi nếu có.

Hỏi: Đã cấu hình đúng đường dẫn, sao truy cập chỉ hiện danh sách thư mục mà không hiện file index.html?

Trả lời: Nguyên nhân thường là do thiếu file trang chủ mặc định (ví dụ: index.html) trong thư mục gốc website. Hãy chắc chắn trong thư mục gốc có file mang tên index.html (hoặc tên file mặc định theo cấu hình máy chủ Web khác), chú ý đúng tên và cả phần đuôi mở rộng (phân biệt chữ hoa, chữ thường).

Hỏi: Tôi có thể bật HTTPS cho website tĩnh không?

Trả lời: Hoàn toàn có thể. Bạn chỉ cần bật tùy chọn SSL trong cấu hình Website. ServBay sẽ tự sử dụng ServBay User CA để tạo và nhận diện chứng chỉ SSL cho domain nội bộ, từ đó cho phép truy cập HTTPS an toàn trên máy.

Tổng kết

Với ServBay, bạn dễ dàng thêm, quản lý website file tĩnh nội bộ — từ các trang HTML đơn giản đến sản phẩm build của ứng dụng frontend phức tạp. Nhờ tính năng quản lý website, phân giải tên miền nội bộ và hỗ trợ SSL của ServBay, việc phát triển, kiểm thử frontend trên macOS trở nên tối ưu, chuyên nghiệp và hiệu quả hơn bao giờ hết.

Thêm Website File Tĩnh ​

Tổng quan ​

Các trường hợp sử dụng ​

Điều kiện cần có ​

Các Bước Thực Hiện ​

Bước 1: Chuẩn bị File Website ​

Bước 2: Thêm Website trong ServBay ​

Bước 3: Cấu hình Website ​

Bước 4: Lưu & Áp dụng thay đổi ​

Kiểm tra Website ​

Lưu ý ​

Câu hỏi thường gặp (FAQ) ​

Tổng kết ​