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ị:
- Cài đặt ServBay: Đã cài và khởi động ServBay thành công (hỗ trợ macOS, Windows).
- 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.
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).
bashnpm install -g @angular/cli
1Lệ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.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:
bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Windows:
bashcd C:\ServBay\www ng new servbay-angular-app
1
2CLI 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
1
2Sau 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
- macOS:
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.
bashcd servbay-angular-app npm install
1
2Lệnh này sẽ dựa vào tệp
package.json
để cài các phụ thuộc vào thư mụcnode_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.
Sửa tệp
src/app/app.component.html
: Mở fileservbay-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>
1
2
3
4
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ộ.
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:
bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Windows:
bashcd C:\ServBay\www\servbay-angular-app ng serve --port 8585
1
2Server sẽ chạy trên
http://localhost:8585/
. Giữ terminal mở để server hoạt động liên tục.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.
- Tên: Ví dụ
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.
Build production: Trong thư mục dự án, chạy lệnh sau để build phiên bản production:
macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # Hoặc trong Angular CLI mới: # ng build
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-angular-app ng build --prod # Hoặc trong Angular CLI mới: # ng build
1
2
3
4Tham số
--prod
bật tối ưu hoá (AOT, nén, tree-shaking...). File tĩnh sẽ nằm trongdist/servbay-angular-app
(tùy config).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
.- macOS:
Lưu và áp dụng cấu hình.
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ặcng serve
báo lỗicommand 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.