Thêm trang web đầu tiên của bạn

Trong ServBay, việc thêm một trang web mới để khởi động dự án phát triển cục bộ của bạn rất đơn giản và trực quan. Tài liệu này sẽ hướng dẫn chi tiết cách thêm trang web đầu tiên vào ServBay, bao gồm các bước thao tác, các tùy chọn cấu hình quan trọng và một số mẹo hữu ích.

Dù bạn đang phát triển PHP, Node.js, trang web tĩnh hay cần cấu hình reverse proxy hoặc chuyển hướng, ServBay đều cung cấp sự hỗ trợ linh hoạt.

Tổng quan

ServBay được thiết kế nhằm mang lại một môi trường phát triển Web cục bộ mạnh mẽ và dễ dàng quản lý cho các developer. Giao diện đồ họa thân thiện (GUI) cho phép bạn dễ dàng thêm, cấu hình và quản lý nhiều website cục bộ. Theo các bước dưới đây, bạn sẽ nhanh chóng tạo được trang web đầu tiên với ServBay và cài đặt cấu hình phù hợp với nhu cầu dự án.

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo rằng:

• Bạn đã cài đặt và khởi động thành công ứng dụng ServBay trên hệ điều hành macOS.

Các bước thêm trang web

Dưới đây là hướng dẫn chi tiết từng bước để thêm một trang web mới qua giao diện đồ họa của ServBay:

Bước 1: Mở ứng dụng ServBay

Đầu tiên, hãy tìm biểu tượng ServBay trong thư mục ứng dụng của macOS và nhấp đúp chuột để mở ứng dụng.

Bước 2: Điều hướng đến giao diện quản lý website

Sau khi ứng dụng ServBay khởi động, bạn sẽ thấy giao diện chính. Ở menu điều hướng bên trái, bấm vào mục 网站 (Website). Thao tác này sẽ đưa bạn đến trang quản lý website của ServBay.

Bước 3: Bắt đầu thêm website mới

Tại trang quản lý website, tìm và nhấp vào nút dấu + ở góc dưới bên trái. Sau khi nhấp, một khu vực biểu mẫu mới sẽ xuất hiện bên phải để bạn nhập thông tin cấu hình chi tiết cho website mới.

Bước 4: Cấu hình cài đặt website

Trong biểu mẫu cấu hình vừa xuất hiện, bạn cần điền hoặc chọn các thông tin quan trọng sau:

1. Tên: Đặt một tên dễ nhận diện cho trang web cục bộ của bạn. Mục này chỉ dùng để quản lý, phân biệt trong nội bộ ServBay.
2. Tên miền: Nhập tên miền bạn muốn sử dụng để truy cập website trên máy cục bộ. Để tránh xung đột với tên miền thực, nên sử dụng đuôi .demo hoặc các tên miền cấp cao riêng cho phát triển cục bộ do ServBay quy định như servbay.demo hay myproject.servbay.demo. ServBay sẽ tự động xử lý việc phân giải DNS cục bộ, giúp bạn truy cập website qua tên miền này trên trình duyệt.
3. Giao thức: Chọn giao thức cho website. Thông thường để mặc định là HTTP/HTTPS, ServBay sẽ tự động thiết lập HTTPS cục bộ cho bạn.
4. Phương thức yêu cầu chứng chỉ SSL: Cấu hình mã hóa SSL/TLS cho website cục bộ.
   • ServBay CA: Khuyến nghị cho phát triển cục bộ. ServBay sẽ tự động tạo và quản lý chứng chỉ SSL được cấp bởi CA gốc của nội bộ ServBay cho bạn. Bạn chỉ cần tin tưởng CA gốc của ServBay (ServBay User CA hoặc ServBay Public CA) trong hệ thống, là có thể truy cập HTTPS mà không bị cảnh báo.
   • ACME: Nếu muốn mô phỏng môi trường production, có thể dùng giao thức ACME (ví dụ Let's Encrypt, ZeroSSL, Google Trust Services, v.v.) để xin chứng chỉ công cộng cho tên miền cục bộ (miễn là tên miền đó trỏ công khai về ServBay của bạn). ServBay hỗ trợ đăng ký và gia hạn chứng chỉ thông qua ACME tự động.
5. Loại website: Chọn loại phù hợp với stack dự án của bạn:
   • PHP: Dành cho dự án PHP như WordPress, Laravel, Symfony... ServBay cấu hình web server (Nginx hoặc Apache) + PHP-FPM để xử lý request PHP.
   • Node.js: Dành cho ứng dụng Node.js. ServBay thiết lập reverse proxy chuyển tiếp request đến cổng Node.js của bạn.
   • Tĩnh: Dành cho website chỉ gồm HTML, CSS, JavaScript... Web server sẽ phục vụ file tĩnh trực tiếp.
   • Reverse proxy: Cho phép chuyển tiếp request tên miền/đường dẫn tới địa chỉ và cổng khác (cục bộ hoặc từ xa). Hữu ích khi cần proxy đến dịch vụ/ứng dụng khác.
   • Chuyển hướng: Toàn bộ request tên miền này được chuyển hướng sang URL khác.
6. Phiên bản PHP: Nếu chọn loại website là PHP, hãy chọn phiên bản PHP đã được cài đặt và chạy để website sử dụng. Đảm bảo bạn đã cài đúng phiên bản PHP qua giao diện quản lý gói của ServBay.
7. Quy tắc rewrite URL (URL thân thiện): Phần lớn framework hoặc CMS hiện đại muốn URL đẹp (ví dụ /about thay vì /index.php?page=about) sẽ cần quy tắc rewrite. ServBay có sẵn lựa chọn rewrite cho nhiều hệ thống phổ biến như Laravel, WordPress, Discuz!... bạn có thể chọn trực tiếp. Nếu framework không nằm trong danh sách, hoặc bạn muốn tự cấu hình, có thể phải chỉnh file cấu hình web server (Nginx hoặc Apache) thêm tay.
8. Thư mục gốc: Chỉ định đường dẫn vật lý chứa mã nguồn website. Đây là thư mục gốc để web server phục vụ nội dung. Khuyên bạn nên đặt mã nguồn dự án trong thư mục mặc định www của ServBay, ví dụ /Applications/ServBay/www/servbay-demo. Đảm bảo thư mục này tồn tại và tiến trình ServBay có quyền đọc.

WARNING

Với các bạn dùng framework (như Laravel), lưu ý hãy trỏ thư mục gốc vào thư mục public nơi có index.php, không phải trỏ vào thư mục gốc của dự án.

Bước 5: Lưu và kích hoạt website

Sau khi điền và kiểm tra kỹ thông tin cấu hình, nhấn nút 添加 (Thêm) ở cuối biểu mẫu. ServBay sẽ tự động tạo và nạp cấu hình mới vào web server (Nginx hoặc Apache), đồng thời cập nhật các bản ghi DNS cục bộ.

Khi lưu thành công, website sẽ xuất hiện trong danh sách. Bạn có thể nhấp vào biểu tượng trình duyệt ở góc phải trên cùng để truy cập nhanh.

Bước 6: Quản lý website qua thao tác nhanh

ServBay cung cấp hàng loạt nút thao tác nhanh cho mỗi website trong danh sách, giúp bạn quản lý hiệu quả hơn quy trình phát triển cục bộ:

1. Mở bằng IDE: Mở nhanh thư mục gốc website trong trình chỉnh sửa mã/IDE mặc định của bạn.
2. Mở trên trình duyệt: Mở trực tiếp địa chỉ website trên trình duyệt mặc định.
3. Xem log website: Xem log truy cập và log lỗi của web server cho website này, dễ dàng debug.
4. Tạm dừng/kích hoạt website: Tạm thời vô hiệu hoặc khôi phục lại truy cập website.
5. Xóa website: Xóa cấu hình website khỏi ServBay. Lưu ý không xóa file mã nguồn thực tế.

Ví dụ nhanh: Tạo một website HTML tĩnh

Để kiểm tra xem bạn đã tạo website thành công chưa, thử thực hiện các bước sau:

1. Làm theo các hướng dẫn trên để tạo website (ví dụ đặt tên miền là servbay.demo, loại website là Tĩnh, thư mục gốc là /Applications/ServBay/www/servbay-demo-static).

2. Tạo thư mục gốc /Applications/ServBay/www/servbay-demo-static trên hệ thống máy tính của bạn.

3. Trong thư mục này, tạo file tên là index.html.

4. Dùng trình chỉnh sửa văn bản mở file index.html, thêm đoạn mã HTML sau:

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>Chúc mừng! Trang web ServBay đầu tiên của bạn đã chạy thành công!</h1>
       <p>Nếu bạn thấy trang này, nghĩa là ServBay đã cấu hình xong và đang phục vụ trang web tĩnh của bạn.</p>
   </body>
   </html>

5. Lưu file index.html.

6. Quay lại giao diện quản lý website của ServBay, tìm website servbay.demo vừa tạo và nhấn biểu tượng trình duyệt trong thao tác nhanh.

7. Trình duyệt sẽ mở http://servbay.demo (hoặc https://servbay.demo tùy SSL), hiển thị nội dung trang index.html bạn vừa tạo.

Lưu ý

• Xung đột tên miền: Tránh dùng tên miền có khả năng bị trùng với hệ thống mạng nội bộ hoặc VPN, nên dùng đuôi .demo cho an toàn.
• Quyền thư mục gốc: Đảm bảo user đang chạy ServBay (thường là user hiện tại) có quyền đọc thư mục gốc website và các file con.
• Xung đột cổng: ServBay mặc định dùng cổng tiêu chuẩn (HTTP 80, HTTPS 443). Nếu máy bạn có chương trình khác chiếm các cổng này, ServBay có thể không chạy web server hoặc không truy cập được website. Hãy kiểm tra và tắt các ứng dụng đang chiếm cổng.
• Tin cậy CA của ServBay: Nếu dùng ServBay CA và muốn truy cập HTTPS không cảnh báo, bạn cần tin tưởng CA gốc ServBay (User CA hoặc Public CA) trong macOS. Tài liệu ServBay có hướng dẫn chi tiết cách thực hiện.

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

• Q: Tại sao khi vào website lại báo HTTP Error 403 - Forbidden hoặc HTTP Error 404 - File not found?
  • A: Đây là lỗi thường gặp nhất với những người mới phát triển.
  • Trước tiên, kiểm tra đường dẫn thư mục gốc website đã đúng chưa. Ở hầu hết các framework hiện đại (Laravel, Symfony, CakePHP...), thư mục gốc dự án (nơi chứa vendor, composer.json, package.json...) không phải là thư mục gốc/entry thực tế của website.
  • Vì vậy, bạn cần trỏ đúng thư mục gốc website tới thư mục chứa file entry thực sự (index.php, index.htm, index.html).
  • Các thư mục entry phổ biến: public, web, www, htdocs, wwwroot, webroot...
• Q: Tôi đã thêm website nhưng bật trình duyệt báo 'Không thể truy cập trang web này' hoặc 'Kết nối bị từ chối'?
  • A: Trước hết kiểm tra ServBay có đang chạy và trạng thái web server (Caddy/Nginx/Apache) bình thường (xem ở giao diện chính).
  • Đảm bảo địa chỉ tên miền trên trình duyệt trùng chính xác với tên miền đã cấu hình trong ServBay.
  • Kiểm tra website đó trong danh sách đang ở trạng thái "chạy" (không bị tạm dừng).
  • Đảm bảo đường dẫn thư mục gốc đúng và trong đó có file entry (index.html, index.php...).
  • Kiểm tra xem có ứng dụng nào đang dùng cổng 80 hoặc 443 không.
• Q: Website PHP của tôi không chạy đúng, bị trắng trang hoặc trình duyệt tải tệp về máy?
  • A: Đảm bảo bạn đã chọn đúng phiên bản PHP được cài đặt trên ServBay.
  • Kiểm tra quyền truy cập file trong thư mục gốc.
  • Kiểm tra log lỗi của website (qua nút thao tác nhanh) xem có thông báo lỗi PHP không.
  • Xem lại, dự án có index.php hoặc file entry ServBay cấu hình mặc định.
• Q: Tôi đã cấu hình HTTPS nhưng trình duyệt vẫn báo chứng chỉ không an toàn?
  • A: Nếu bạn dùng ServBay CA, cần cài và tin cậy CA này trên macOS hoặc trình duyệt. Xem hướng dẫn chi tiết về trust CA trong tài liệu ServBay.
  • Nếu dùng ACME, cần chắc chắn tên miền trỏ đúng đến ServBay và chứng chỉ đã đăng ký thành công. Kiểm tra log ứng dụng để biết chi tiết quá trình ACME.
• Q: Quy tắc rewrite URL không hoạt động, trang báo lỗi?
  • A: Đảm bảo bạn đã chọn đúng quy tắc rewrite phù hợp với framework của mình.
  • Với Apache, đảm bảo file .htaccess có mặt đúng chỗ và cấu hình Apache cho phép đọc file này.
  • Với Nginx, Caddy, rewrite thường nằm trong file cấu hình ServBay sinh ra. Kiểm tra file và reload lại nếu cần.

Tổng kết

Bằng cách làm theo các bước trong bài viết này, bạn đã có thể thêm và vận hành trang web đầu tiên trong môi trường phát triển cục bộ ServBay. Hệ thống quản lý website mạnh mẽ, các tùy chọn cấu hình linh hoạt (chứng chỉ SSL, loại website, phiên bản PHP, rewrite URL) và các thao tác nhanh của ServBay sẽ nâng cao hiệu quả phát triển phần mềm của bạn. Tiếp tục khám phá các tính năng khác như quản lý gói phần mềm, quản lý cơ sở dữ liệu... để xây dựng workflow phát triển cục bộ hoàn chỉnh hơn.