ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Tạo và vận hành dự án Angular trên ServBay ​

Tổng quan ​

Tài liệu này hướng dẫn bạn từng bước tạo, cấu hình và chạy một dự án Angular trên môi trường phát triển web cục bộ ServBay. Bạn sẽ tận dụng môi trường Node.js mạnh mẽ cùng tính năng quản lý website (trước đây gọi là “host”) linh hoạt của ServBay để thiết lập môi trường phát triển và sản xuất một cách dễ dàng, đảm bảo truy cập bảo mật qua tên miền tuỳ chỉnh và chứng chỉ SSL. ServBay tích hợp sẵn nhiều gói phần mềm cần thiết cho phát triển (trước đây gọi là “service”) như Node.js, PHP, Python, Go, Java, các cơ sở dữ liệu..., là lựa chọn lý tưởng cho phát triển full-stack cục bộ.

Angular là gì? ​

Angular là framework mã nguồn mở được duy trì bởi Google, dùng để xây dựng các ứng dụng một trang (SPA) hiệu suất cao, tương tác động. Angular phát triển dựa trên TypeScript, cung cấp bộ công cụ toàn diện và kiến trúc phát triển chặt chẽ, đặc biệt phù hợp cho các ứng dụng doanh nghiệp lớn, phức tạp.

Những tính năng nổi bật của Angular ​

  • Kiến trúc dựa trên thành phần: Xây dựng giao diện qua các thành phần tái sử dụng, tăng khả năng bảo trì và mở rộng mã nguồn.
  • Hỗ trợ TypeScript: Kiểm tra kiểu tĩnh cùng với các tính năng lập trình hướng đối tượng, nâng cao chất lượng và hiệu suất phát triển.
  • Dependency Injection: Đơn giản hóa việc kiểm thử và quản lý các phụ thuộc giữa các thành phần.
  • CLI mạnh mẽ: Hỗ trợ tạo dự án, sinh thành phần, dịch vụ, module, build, test,... thuận tiện qua dòng lệnh.
  • Giải pháp tích hợp sẵn: Router, xử lý form, HTTP client và nhiều module thường dùng được tích hợp sẵn.
  • Tối ưu hiệu năng: Xử lý AOT (biên dịch sớm), tree-shaking... nhằm tối ưu kích thước và hiệu suất ứng dụng.

Kết hợp Angular với môi trường ổn định của ServBay, các lập trình viên có thể toàn tâm phát triển logic nghiệp vụ.

Điều kiện cần thiết ​

Trước khi bắt đầu, hãy đảm bảo bạn đã chuẩn bị:

  1. Cài đặt ServBay: Đã cài và khởi động ServBay thành công (hỗ trợ macOS, Windows).
  2. Kích hoạt Node.js: Trong bảng điều khiển ServBay, hãy cài đặt và bật phiên bản Node.js phù hợp. ServBay cho phép bạn cài nhiều phiên bản Node.js và chuyển đổi dễ dàng.

Thiết lập và vận hành dự án Angular bằng ServBay ​

Chúng ta sẽ dùng Node.js của ServBay để tạo và chạy dự án Angular. Ở chế độ phát triển sử dụng proxy ngược đến server phát triển Angular; ở chế độ sản xuất sẽ build và phục vụ tệp tĩnh qua ServBay.

1. Tạo dự án Angular ​

Trước hết, hãy tạo một dự án mới với Angular CLI.

  1. Cài đặt Angular CLI: Mở Terminal và sử dụng môi trường Node.js do ServBay cung cấp để cài đặt Angular CLI toàn cục. Nếu Node.js của ServBay chưa tự động thêm vào PATH, bạn cần chuyển sang dùng môi trường Node.js của ServBay trước (thông thường ServBay sẽ tự động set PATH).

    bash
    npm install -g @angular/cli

    Lệnh trên sẽ cài đặt lệnh ng toàn hệ thống, để bạn sử dụng Angular CLI mọi lúc.

  2. Tạo dự án Angular mới: Di chuyển đến thư mục gốc website được ServBay khuyến nghị và sử dụng ng new để tạo dự án mới. Nên đặt tên dự án có yếu tố thương hiệu ServBay, ví dụ servbay-angular-app.

    macOS:

    bash
    cd /Applications/ServBay/www
ng new servbay-angular-app

    Windows:

    bash
    cd C:\ServBay\www
ng new servbay-angular-app

    CLI sẽ hỏi bạn một số tuỳ chọn dự án. Hãy nhập/ chọn theo ý muốn:

    ? Would you like to add Angular routing? Yes  # Có thêm routing không, khuyên chọn Yes
? Which stylesheet format would you like to use? CSS # Định dạng stylesheet, ví dụ CSS

    Sau khi hoàn tất, Angular CLI sẽ tạo thư mục servbay-angular-app chứa cấu trúc và tệp dự án:

    • macOS: /Applications/ServBay/www/servbay-angular-app
    • Windows: C:\ServBay\www\servbay-angular-app

  3. Cài đặt phụ thuộc dự án: Vào thư mục dự án và cài đặt các package cần thiết.

    bash
    cd servbay-angular-app
npm install

    Lệnh này sẽ dựa vào tệp package.json để cài các phụ thuộc vào thư mục node_modules.

2. Chỉnh sửa nội dung xuất ra của dự án (tuỳ chọn) ​

Để xác nhận dự án hoạt động, bạn có thể chỉnh sửa trang chủ cơ bản.

  1. Sửa tệp src/app/app.component.html: Mở file servbay-angular-app/src/app/app.component.html bằng editor bạn yêu thích. Xoá/ sửa nội dung chỉ để lại tiêu đề đơn giản, ví dụ "Hello ServBay!".

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>Đây là ứng dụng Angular của bạn vận hành qua ServBay!</p>
</div>

3. Chạy dự án ở chế độ phát triển ​

Trong quá trình phát triển, thường sử dụng server phát triển Angular (ng serve) có tính năng reload nóng. Kết hợp với proxy ngược của ServBay cho phép truy cập qua tên miền cục bộ.

  1. Khởi động server phát triển Angular: Trong thư mục gốc dự án, chạy lệnh sau để khởi động dev server. Hãy dùng một port riêng, ví dụ 8585 để tránh trùng với port mặc định server web của ServBay.

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng serve --port 8585

    Server sẽ chạy trên http://localhost:8585/. Giữ terminal mở để server hoạt động liên tục.

  2. Cấu hình website trên ServBay (proxy ngược): Vào bảng điều khiển ServBay, chuyển đến mục “Website” và thêm website mới dùng proxy ngược đến server Angular.

    • Tên: Ví dụ My Angular Dev Site (chỉ dùng nội bộ ServBay)
    • Tên miền: Nên dùng dạng servbay-angular-dev.servbay.demo. Tên miền này mặc định trỏ về 127.0.0.1.
    • Loại website: Chọn Proxy Ngược (Reverse Proxy).
    • Địa chỉ proxy: Nhập 127.0.0.1.
    • Cổng proxy: Nhập port bạn dùng ở ng serve, ví dụ 8585.

    Lưu và áp dụng các thay đổi.

  3. Truy cập website ở chế độ phát triển: Mở trình duyệt vào https://servbay-angular-dev.servbay.demo.

    Nhờ ServBay hỗ trợ sinh và cấu hình chứng chỉ SSL (ServBay User CA hoặc Public CA), bạn được truy cập HTTPS an toàn, mô phỏng như môi trường thật và dễ phát hiện sớm lỗi liên quan.

4. Build và chạy phiên bản sản xuất ​

Khi hoàn thành phát triển, bạn cần build bản sản xuất tối ưu hoá. Những file này sẽ được phục vụ qua server tĩnh của ServBay.

  1. Build production: Trong thư mục dự án, chạy lệnh sau để build phiên bản production:

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Hoặc trong Angular CLI mới:
# ng build

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng build --prod
# Hoặc trong Angular CLI mới:
# ng build

    Tham số --prod bật tối ưu hoá (AOT, nén, tree-shaking...). File tĩnh sẽ nằm trong dist/servbay-angular-app (tùy config).

  2. Cấu hình website ServBay (dạng tĩnh): Trở lại bảng điều khiển ServBay, thêm website mới hướng về thư mục build sản xuất:

    • Tên: Ví dụ My Angular Production Site

    • Tên miền: Nên dùng như servbay-angular-prod.servbay.demo.

    • Loại website: Chọn Static.

    • Thư mục gốc: Trỏ đến thư mục chứa kết quả build (có file index.html):

      • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
      • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

      Đảm bảo đúng thư mục chứa file index.html.

    Lưu và áp dụng cấu hình.

  3. Truy cập website sản xuất: Mở trình duyệt và truy cập https://servbay-angular-prod.servbay.demo.

    Trang này phục vụ bản sản xuất của dự án Angular qua web server hiệu suất cao (Caddy hoặc Nginx tuỳ cấu hình ServBay). Chứng chỉ SSL được ServBay tự động cấu hình.

Lợi thế khi dùng ServBay phát triển Angular ​

  • Môi trường tích hợp: Dễ dàng cài đặt, quản lý nhiều phiên bản Node.js, không cần tự cấu hình hệ thống phức tạp.
  • Quản lý website linh hoạt: Giao diện trực quan cấu hình proxy ngược và tĩnh, chuyển đổi môi trường khá tiện lợi.
  • Hỗ trợ SSL sẵn có: Môi trường phát triển cục bộ luôn có chứng chỉ SSL, mô phỏng HTTPS như thật, không lo cảnh báo nội dung pha trộn.
  • Hỗ trợ đa công nghệ: Nếu dự án kết hợp backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) hoặc database (MySQL, PostgreSQL, MongoDB, Redis), ServBay đều tích hợp ngọt ngào, tạo môi trường full-stack hoàn chỉnh, liên tục cập nhật các package, kể cả các chức năng trước đây chưa hỗ trợ đều đã bổ sung.
  • Backup và khôi phục: Dễ dàng backup cho cấu hình, website, database, chứng chỉ SSL… bảo vệ an toàn dữ liệu phát triển cục bộ.
  • Đặt lại mật khẩu database: ServBay có sẵn chức năng reset mật khẩu root cho MySQL, MariaDB, PostgreSQL – giải quyết nỗi đau hay gặp với dev.

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

  • Q: Khi chạy ng new hoặc ng serve báo lỗi command not found: ng thì xử lý sao? A: Thông thường là do chưa cài đúng Angular CLI hoặc chưa có trong PATH. Đảm bảo đã cài toàn cục @angular/cli (npm install -g @angular/cli) và môi trường Node.js của ServBay đã thiết lập PATH. Thử khởi động lại Terminal hoặc ServBay nếu cần.
  • Q: ng serve báo lỗi port đã dùng rồi thì làm gì? A: Có thể port (ví dụ 8585) đã bị chương trình khác chiếm dụng. Dùng tham số --port chọn port khác chưa dùng, ví dụ ng serve --port 8586, đồng thời cập nhật cấu hình proxy trong ServBay.
  • Q: Đã cấu hình website ServBay mà truy cập tên miền không lên được trang thì phải kiểm tra gì? A: Kiểm tra các điểm sau:
    • Đảm bảo ServBay đang chạy.
    • Với chế độ phát triển, chắc chắn ng serve đang hoạt động và port khớp với cấu hình proxy ServBay.
    • Với sản xuất, kiểm tra kỹ “thư mục gốc website” trỏ đến đúng thư mục chứa index.html (dist/tên-dự-án).
    • Xem log của ServBay để biết lỗi chi tiết hơn.
    • Tên miền truy cập phải khớp tuyệt đối với cấu hình website trong ServBay.
  • Q: Có thể sử dụng web server khác như Caddy/Nginx/Apache trên ServBay để host bản sản xuất Angular không? A: Hoàn toàn có thể. ServBay hỗ trợ cả Caddy, Nginx (và Apache) làm server tĩnh. Khi cấu hình website dạng static, ServBay sẽ dùng web server bạn đang bật để phục vụ file tĩnh hiệu quả.

Tóm tắt ​

Bằng hướng dẫn này, bạn đã tạo và vận hành dự án Angular thành công trên ServBay. Bạn biết cách dùng proxy ngược tại chế độ phát triển để truy cập server ng serve qua tên miền cục bộ, cũng như build và host phiên bản sản xuất với dịch vụ file tĩnh của ServBay. Việc tận dụng Node.js, quản lý website thuận tiện và SSL tự động từ ServBay sẽ giúp bạn nâng cao hiệu quả phát triển Angular cục bộ. Hỗ trợ đa công nghệ của ServBay còn mang lại nền tảng vững chắc cho Full-stack development.