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 cách tạo, cấu hình và triển khai một dự án Angular trong môi trường phát triển web cục bộ ServBay. Chúng ta sẽ tận dụng môi trường Node.js mạnh mẽ của ServBay, cùng tính năng quản lý website (trước đây gọi là "máy chủ") linh hoạt để dễ dàng thiết lập môi trường phát triển và sản xuất, đồng thời đảm bảo truy cập an toàn qua tên miền tùy chỉnh và chứng chỉ SSL. ServBay tích hợp đa dạng các gói phần mềm cần thiết cho phát triển (trước đây gọi là "dịch vụ"), bao gồm Node.js, PHP, Python, Go, Java, cơ sở dữ liệu,… rất lý tưởng cho phát triển full-stack cục bộ.

Angular là gì? ​

Angular là một framework frontend mã nguồn mở do Google phát triển, dùng để xây dựng ứng dụng đơn trang (SPA) hiệu suất cao, động. Được phát triển trên nền TypeScript, Angular cung cấp một bộ công cụ toàn diện cùng phương pháp phát triển cấu trúc, rất phù hợp cho các dự án quy mô lớn, doanh nghiệp.

Những tính năng nổi bật và lợi ích của Angular ​

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

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

Yêu cầu trước khi bắt đầu ​

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

  1. Cài đặt ServBay: Đã cài đặt và khởi chạy ServBay thành công trên macOS.
  2. Kích hoạt gói Node.js: Trong bảng điều khiển ServBay, đảm bảo bạn đã cài và kích hoạt gói Node.js với phiên bản cần thiết. ServBay hỗ trợ 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 với ServBay ​

Chúng ta sẽ sử dụng môi trường Node.js trên ServBay để tạo và chạy một dự án Angular. Ở chế độ phát triển, chúng ta sẽ cấu hình proxy ngược từ ServBay đến máy chủ Angular; ở chế độ sản xuất, sẽ build dự án và dùng ServBay phục vụ tệp tĩnh.

1. Tạo dự án Angular ​

Đầu tiên, cần khởi tạo một dự án Angular mới bằng Angular CLI.

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

    bash
    npm install -g @angular/cli

    Lệnh này sẽ cài lệnh ng vào hệ thống, cho phép bạn sử dụng Angular CLI toàn cục.

  2. Tạo dự án Angular mới: Chuyển vào thư mục gốc web được ServBay khuyến nghị /Applications/ServBay/www và sử dụng lệnh ng new để tạo dự án mới. Đặt tên dự án mang dấu ấn ServBay, ví dụ servbay-angular-app.

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

    Angular CLI sẽ hỏi một số thiết lập. Hãy trả lời/ chọn theo ý muốn:

    ? Would you like to add Angular routing? Yes  # Có thêm routing không, nên chọn Yes
? Which stylesheet format would you like to use? CSS # Chọn kiểu stylesheet, ví dụ CSS

    Sau khi hoàn tất, Angular CLI sẽ tạo thư mục servbay-angular-app đầy đủ cấu trúc dự án trong /Applications/ServBay/www.

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

    bash
    cd servbay-angular-app
npm install

    Lệnh npm install sẽ đọc các phụ thuộc trong package.json và cài vào thư mục node_modules.

2. Chỉnh sửa nội dung hiển thị Angular (tuỳ chọn) ​

Để kiểm tra dự án chạy thành công, bạn có thể sửa giao diện trang chủ.

  1. Sửa file src/app/app.component.html: Mở file servbay-angular-app/src/app/app.component.html bằng trình soạn thảo yêu thích. Xóa/sửa nội dung cho đơn giản, ví dụ chỉ hiển thị tiêu đề "Hello ServBay!".

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

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

Khi phát triển, thường sử dụng máy chủ development của Angular CLI (ng serve) với tính năng reload tự động. Sau đó, dùng proxy ngược của ServBay để truy cập qua domain nội bộ.

  1. Khởi động Angular dev server: Trong thư mục gốc dự án (/Applications/ServBay/www/servbay-angular-app), chạy lệnh sau để khởi động dev server. Hãy chọn port ví dụ 8585 để tránh trùng với port web mặc định của ServBay.

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

    Lệnh này sẽ biên dịch dự án của bạn và khởi chạy máy chủ tại http://localhost:8585/. Hãy giữ Terminal mở để server tiếp tục hoạt động.

  2. Cấu hình website ServBay (proxy ngược): Mở bảng điều khiển ServBay, vào phần “Website” (trước đây là “Host”) và thêm cấu hình website mới nhằm proxy một domain cục bộ sang server dev của Angular.

    • Name (Tên): Ví dụ My Angular Dev Site (chỉ để hiển thị trong ServBay)
    • Domain (Tên miền): Nên dùng domain thử nghiệm gắn với thương hiệu ServBay, ví dụ servbay-angular-dev.servbay.demo. ServBay sẽ tự ánh xạ domain .servbay.demo về 127.0.0.1.
    • Website Type: Chọn Reverse Proxy (Proxy ngược).
    • Proxy Address (Địa chỉ Proxy): Nhập 127.0.0.1.
    • Proxy Port (Cổng Proxy): Cùng port bạn đã dùng khi ng serve, ví dụ 8585.

    Lưu lại cấu hình và áp dụng thay đổi của ServBay.

  3. Truy cập website development: Mở trình duyệt và vào địa chỉ bạn vừa cấu hình, ví dụ https://servbay-angular-dev.servbay.demo.

    Vì bạn truy cập qua ServBay, và ServBay mặc định hỗ trợ sinh & cấu hình chứng chỉ SSL (thông qua ServBay User CA hoặc ServBay Public CA), bạn có thể truy cập an toàn qua HTTPS cho website dev này. Điều này mô phỏng chính xác trải nghiệm HTTPS sản xuất, giúp phát hiện sớm các sự cố liên quan bảo mật.

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

Sau khi hoàn tất phát triển, bạn cần build ra phiên bản tối ưu để triển khai. Build này tạo bộ tệp tĩnh dùng để phục vụ qua server tĩnh. Ta sẽ dùng ServBay để phục vụ thư mục tĩnh đó.

  1. Build bản production: Trong thư mục dự án (/Applications/ServBay/www/servbay-angular-app), chạy:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Hoặc với Angular CLI phiên bản mới:
# ng build

    Cờ --prod (mặc định trên các CLI mới) sẽ kích hoạt tối ưu như AOT, nén mã, tree-shaking... Kết quả sẽ nằm trong dist/servbay-angular-app (tên thư mục con tùy cấu hình dự án, thường là tên dự án).

  2. Cấu hình website ServBay (dịch vụ tĩnh): Vào bảng điều khiển ServBay, phần cấu hình website, thêm một website mới, trỏ domain thử nghiệm đến thư mục tĩnh bạn vừa build.

    • Name (Tên): Ví dụ My Angular Production Site
    • Domain (Tên miền): Nên dùng domain thử nghiệm khác mang thương hiệu ServBay, ví dụ servbay-angular-prod.servbay.demo.
    • Website Type: Chọn Static (Dịch vụ tĩnh).
    • Website Root Directory (Thư mục gốc): Dẫn đến thư mục xuất bản build đã tạo. Thông thường là /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Đảm bảo đây là thư mục chứa file index.html.

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

  3. Truy cập website production: Mở trình duyệt, truy cập domain bạn cấu hình, ví dụ https://servbay-angular-prod.servbay.demo.

    Đây là bản production của dự án Angular, được phục vụ dưới dạng file tĩnh qua server hiệu năng cao của ServBay (Caddy hoặc Nginx, tùy cấu hình). ServBay sẽ tự động cấu hình chứng chỉ SSL để đảm bảo truy cập an toàn.

Lợi thế của ServBay trong phát triển Angular ​

  • Môi trường tích hợp: Cài đặt/quản lý phiên bản Node.js dễ dàng, không cần cấu hình thủ công PATH phức tạp.
  • Quản lý website linh hoạt: Chuyển đổi nhanh giữa chế độ proxy ngược (dev) và tĩnh (production) trên giao diện thân thiện.
  • SSL tích hợp sẵn: Cấp và cấu hình SSL tự động cho môi trường phát triển, mô phỏng HTTPS sản xuất và loại bỏ cảnh báo mixed-content.
  • Hỗ trợ đa ngôn ngữ/lập trình: Nếu dự án của bạn sử dụng backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot ...) hoặc database (MySQL, PostgreSQL, MongoDB, Redis), ServBay tích hợp sẵn và cập nhật liên tục, đáp ứng phát triển full-stack cục bộ. Những tính năng trước đây chưa hỗ trợ thì nay đã hoàn thiện.
  • Sao lưu & phục hồi dữ liệu: Dễ dàng backup cấu hình, website, cơ sở dữ liệu, SSL – giúp an toàn dữ liệu cục bộ.
  • Đặt lại mật khẩu database: Có chức năng reset mật khẩu root cho MySQL, MariaDB, PostgreSQL,... - giải quyết vấn đề thường gặp của lập trình viên.

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

  • Q: Khi chạy ng new hay ng serve báo command not found: ng phải làm gì?
    A: Thường do chưa cài/ thiết lập đúng Angular CLI. Hãy đảm bảo đã cài @angular/cli toàn cục (npm install -g @angular/cli) và môi trường Node.js của ServBay đã có trong PATH. Thử khởi động lại Terminal hoặc ServBay nếu cần.
  • Q: ng serve báo cổng bị chiếm (port in use) thì xử lý sao?
    A: Có thể port bạn chọn (vd. 8585) đã bị chương trình khác dùng. Đổi port khác với ng serve --port 8586 rồi nhớ cập nhật lại proxy port trong cấu hình website ServBay.
  • Q: Đã cấu hình website trong ServBay mà vào domain không thấy chạy?
    A: Hãy kiểm tra:
    • Đảm bảo ServBay đang chạy.
    • Với chế độ dev, hãy chắc chắn ng serve đang nghe trên port và trùng với cấu hình proxy trên ServBay.
    • Với production, kiểm tra kỹ thư mục gốc chỉ đến đúng folder chứa index.html (thường là dist/tên-dự-án).
    • Xem log của ServBay để tìm lỗi chi tiết hơn.
    • Kiểm tra tên miền truy cập đúng với tên miền đã cấu hình trên ServBay.
  • Q: Có thể dùng server khác (Caddy/Nginx/Apache) trên ServBay để phục vụ bản Angular production không?
    A: Được. ServBay hỗ trợ Caddy, Nginx, hoặc Apache để phục vụ file tĩnh ở chế độ production. Bạn chỉ cần chọn server phù hợp; ServBay sẽ tự động điều phối và tối ưu.

Tổng kết ​

Với các hướng dẫn trên, bạn đã có thể tạo và vận hành một dự án Angular từ phát triển đến production trên ServBay. Bạn biết cách sử dụng proxy ngược truy cập server dev qua domain cục bộ ở chế độ phát triển, cũng như build và phục vụ tệp tĩnh sản xuất nhờ ServBay. Kết hợp môi trường Node.js mạnh mẽ, giao diện quản lý website tiện lợi, tích hợp SSL, ServBay giúp tăng hiệu quả phát triển dự án Angular cục bộ đáng kể. Đồng thời, với hệ sinh thái full-stack mạnh mẽ, ServBay là nền tảng vững chắc cho mọi dự án của bạn.