Triển khai ứng dụng Angular lên Azure

Mỗi doanh nghiệp đều cần một cơ sở hạ tầng đám mây đáng tin cậy và có thể mở rộng. Azure chính là giải pháp mạnh mẽ và linh hoạt cho việc lưu trữ ứng dụng của bạn.

Hãy tưởng tượng ứng dụng Angular của bạn, hiện đang bị giới hạn trong môi trường phát triển, sẽ ngay lập tức có sẵn cho người dùng trên toàn cầu nhờ vào Azure.

Tại sao triển khai ứng dụng Angular lên Azure?

Azure cho phép ứng dụng Angular của bạn mở rộng một cách dễ dàng, giúp xử lý lưu lượng người dùng ngày càng tăng mà không gặp rắc rối gì. Hiệu suất được cải thiện này sẽ trực tiếp góp phần vào trải nghiệm khách hàng tốt hơn và từ đó giữ chân khách hàng hiệu quả hơn.

Không chỉ dừng lại ở độ tin cậy, Azure còn tăng cường bảo mật cho doanh nghiệp của bạn, bảo vệ cả dữ liệu kinh doanh quan trọng và thông tin nhạy cảm của khách hàng.

Để hiểu rõ hơn về quy trình triển khai, chúng ta cũng cần nắm rõ bản chất của ứng dụng Angular. Angular là một framework phát triển ứng dụng web mạnh mẽ được phát triển và duy trì bởi Google, là nền tảng quan trọng cho việc tạo ra các ứng dụng đơn trang (SPA) với giao diện người dùng tương tác.

Angular tận dụng các mẫu HTML, TypeScript, và kiến trúc dựa trên thành phần để cung cấp các giải pháp có thể mở rộng và dễ bảo trì trong phát triển web.

Các đặc điểm chính của ứng dụng Angular bao gồm cấu trúc dựa trên thành phần, cho phép sử dụng lại và dễ dàng quản lý các khối xây dựng, từ đó đơn giản hóa quá trình quản lý dự án. Việc ràng buộc dữ liệu hai chiều đảm bảo rằng các thay đổi trong giao diện người dùng sẽ ngay lập tức phản ánh trong dữ liệu ứng dụng và ngược lại, mang đến trải nghiệm người dùng mượt mà.

Yêu cầu trước khi triển khai: Tài khoản Azure, GitHub, Node và Angular CLI

Trước tiên, bạn sẽ cần một Tài khoản Azure. Đây là cánh cửa mở ra nhiều dịch vụ phong phú của Azure, từ máy ảo cho đến hosting ứng dụng. Nếu bạn chưa có, hãy truy cập vào trang web Azure và nhấn vào "Bắt đầu miễn phí" để thiết lập. Một tài khoản Azure miễn phí cung cấp đủ tài nguyên để triển khai và thử nghiệm ứng dụng Angular của bạn trước khi nâng cấp.

Tiếp theo, việc Thiết lập Tài khoản GitHub là rất quan trọng. GitHub sẽ là kho lưu trữ chính cho mã nguồn ứng dụng Angular của bạn, giúp việc triển khai tự động lên Azure trở nên dễ dàng. Nếu bạn chưa có tài khoản GitHub, việc tạo một tài khoản rất đơn giản. Azure tích hợp hoàn hảo với GitHub, cho phép bạn tự động hóa quy trình triển khai từ kho mã của mình. Khi tài khoản đã sẵn sàng, hãy tạo một kho lưu trữ mới dành riêng cho ứng dụng Angular của bạn để chứa tất cả các tệp dự án.

Đối với phát triển, việc Cài đặt Node.js và npm là điều không thể thiếu. Node.js cho phép bạn thực thi mã JavaScript bên ngoài trình duyệt web, trong khi npm (Node Package Manager) rất quan trọng để quản lý các gói và phụ thuộc của dự án. Bạn có thể tải xuống phiên bản ổn định mới nhất của Node.js từ trang web chính thức của nó. npm được bao gồm trong Node.js, và bạn có thể xác minh cả hai cài đặt bằng cách kiểm tra phiên bản trong terminal của bạn.

Đảm bảo bạn có các phiên bản ổn định mới nhất sẽ giúp ngăn ngừa các vấn đề tương thích.

Cuối cùng, việc Cài đặt Angular CLI là điều cực kỳ quan trọng. Angular CLI (Command Line Interface) là một công cụ mạnh mẽ giúp đơn giản hóa mọi khía cạnh của phát triển Angular, từ tạo dự án đến kiểm tra cục bộ. Bạn có thể cài đặt nó toàn cục bằng cách sử dụng một lệnh npm đơn giản trong terminal của bạn. Khi đã cài đặt xong, việc xác minh phiên bản sẽ xác nhận rằng bạn đã sẵn sàng để tạo và chuẩn bị ứng dụng Angular của mình cho việc triển khai lên Azure.

Các bước thực tiễn để triển khai Angular lên Azure

Bước đầu tiên quan trọng nhất là:

Tạo một Kho lưu trữ trên GitHub: Khi đặt tên cho kho lưu trữ, hãy chọn một cái tên rõ ràng và mô tả giúp bạn nhanh chóng xác định dự án sau này. Kho lưu trữ này sẽ là trung tâm cho dự án Angular của bạn.
Thiết lập ứng dụng Angular: Tạo một dự án Angular mới bằng cách sử dụng Angular CLI với lệnh ng new my-app, quá trình này sẽ tạo ra cấu trúc cơ bản, bao gồm tất cả các tệp và cấu hình cần thiết.

Trước khi triển khai, luôn là một ý tưởng tốt khi kiểm tra ứng dụng của bạn cục bộ bằng cách khởi động máy chủ cục bộ với lệnh ng serve --open. Điều này cho phép bạn tương tác với ứng dụng, xác minh chức năng của nó và đảm bảo mọi thứ hoạt động như mong đợi.

Đẩy ứng dụng Angular lên GitHub: Việc commit những thay đổi này sẽ lưu giữ dự án của bạn tại thời điểm cụ thể đó, kèm theo một thông điệp mô tả để duy trì lịch sử rõ ràng.
Tạo một Ứng dụng Web Tĩnh trên Azure: Dịch vụ Static Web App của Azure rất phù hợp để lưu trữ các ứng dụng web như dự án Angular, cung cấp tích hợp đơn giản với GitHub.

Cổng thông tin Azure

Chọn "Tạo Tài Nguyên".
Trong thanh tìm kiếm, gõ "Static Web App" và tiếp tục.
Trong phần "Cơ bản", cung cấp các thông tin cần thiết như đăng ký Azure của bạn, một nhóm tài nguyên (một контейнер cho tất cả các tài nguyên của ứng dụng), một tên duy nhất cho Static Web App của bạn và loại kế hoạch (Azure cung cấp một tầng miễn phí hào phóng).
Chọn "GitHub" làm nguồn mã của bạn. Điều này dẫn đến việc ủy quyền Azure truy cập vào tài khoản GitHub của bạn, sau đó bạn sẽ chỉ định tổ chức GitHub của mình, kho lưu trữ cho ứng dụng Angular của bạn và nhánh mà bạn muốn triển khai (thông thường là nhánh "main").
Cấu hình Chi tiết Xây dựng: Trong cài đặt xây dựng, bạn sẽ chọn "Angular" từ menu thả xuống "Build Presets". Điều này thông báo cho Azure rằng dự án của bạn là một ứng dụng Angular, yêu cầu nó tự động áp dụng các lệnh xây dựng chính xác.
Xác nhận và tạo Static Web App của bạn.

Khởi chạy ứng dụng Angular của bạn trên Azure

Khi quá trình triển khai được kích hoạt, Azure sẽ bắt đầu xây dựng ứng dụng Angular của bạn trong nền. Quá trình này, có thể mất vài phút, liên quan đến việc biên dịch ứng dụng của bạn và chuẩn bị cho lưu trữ trực tiếp.

Bạn có thể theo dõi tiến trình qua tab "Actions" trong kho lưu trữ GitHub của bạn, nơi GitHub tự động quản lý quy trình triển khai.

Khi quá trình triển khai thành công, Azure sẽ cung cấp một URL duy nhất nơi ứng dụng Angular của bạn đang hoạt động. Liên kết này có thể được tìm thấy trong cổng thông tin Azure, cụ thể là trong phần "Tổng quan" của tài nguyên Static Web App của bạn.

Kết luận, việc triển khai ứng dụng Angular lên Azure Static Web Apps là một quy trình đơn giản mà khi được thực hiện theo từng bước, giúp ứng dụng của bạn từ môi trường phát triển cục bộ đến một nền tảng có thể truy cập toàn cầu. Giải pháp triển khai mạnh mẽ nhưng dễ sử dụng này đảm bảo rằng ứng dụng Angular của bạn không chỉ có thể mở rộng và an toàn mà còn sẵn sàng cho một khán giả quốc tế. Làm chủ quy trình này là một bước quan trọng để mở khóa sự đổi mới hơn nữa và cho phép mở rộng sản phẩm mạnh mẽ cho doanh nghiệp của bạn.

Bạn có thể theo dõi tôi trên GitHub, nơi tôi đang tạo ra những dự án thú vị.

Hy vọng bạn thích bài viết này, đừng quên cho ❤️.
Hẹn gặp lại lần sau 👋

Giorgio Boa

Giorgio Boa là một nhà phát triển full stack và hệ sinh thái front-end là niềm đam mê của anh. Anh cũng là một diễn giả công khai quốc tế, hoạt động trong hệ sinh thái mã nguồn mở, anh yêu thích việc học hỏi và nghiên cứu những điều mới mẻ.

Triển khai ứng dụng Angular lên Azure dễ dàng