Giới thiệu

Mỗi doanh nghiệp đều cần một hạ tầng đám mây đáng tin cậy và có khả năng mở rộng, và 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 trở nên dễ dàng tiếp cận với người dùng trên toàn cầu nhờ vào Azure.

Tại sao nên 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 dễ dàng", giúp nó "xử lý lưu lượng người dùng đang tăng" mà không gặp khó khăn gì.

Hiệu suất được cải thiện này trực tiếp góp phần vào trải nghiệm khách hàng tốt hơn và do đó, "giữ chân khách hàng" hiệu quả hơn.

Ngoài sự đáng tin cậy, Azure còn cung cấp cho doanh nghiệp những biện pháp bảo mật mạnh mẽ, 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, cũng cần phải hiểu rõ bản chất của một ứng dụng Angular. Angular, một framework ứng dụng web mạnh mẽ được phát triển và duy trì bởi Google, là nền tảng cho việc tạo ra các ứng dụng một trang (SPA) động với giao diện người dùng tương tác.

Angular tận dụng các template HTML, TypeScript và kiến trúc dựa trên thành phần mạnh mẽ để cung cấp các giải pháp có khả năng 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 tạo ra các khối xây dựng có thể tái sử dụng và tự chứa, giúp đơn giản hóa 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 giao diện người dùng sẽ được phản ánh ngay lập tức 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à.

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

Đầu tiên và quan trọng nhất, bạn sẽ cần một Tài khoản Azure. Đây là cánh cửa dẫn bạn đến với các dịch vụ phong phú của Azure, từ máy ảo đến lưu trữ ứng dụng quản lý. Nếu bạn chưa có, hãy truy cập vào trang web Azure và nhấp 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à kiểm tra ứng dụng Angular của bạn trước khi mở rộng.

Tiếp theo, việc Thiết lập Tài khoản GitHub là rất cần thiết. GitHub là kho chứa chính cho mã nguồn ứng dụng Angular của bạn, giúp bạn dễ dàng triển khai tự động lên Azure. Nếu bạn chưa có tài khoản GitHub, việc tạo một tài khoản là rất đơn giản. Azure tích hợp liền mạch với GitHub, cho phép bạn tự động hóa quy trình triển khai trực tiếp từ kho chứa mã nguồn của bạn. Khi tài khoản của bạn đã sẵn sàng, bạn sẽ tạo một kho mới dành riêng cho ứng dụng Angular của mình để lưu trữ 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à 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 cho việc quản lý các gói và phụ thuộc của dự án. Bạn có thể tải 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à rất 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 phát triển Angular, từ việc 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 một lệnh npm đơn giản trong terminal. Khi đã cài đặt, 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 tế để triển khai Angular lên Azure

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

Tạo một kho chứa trên GitHub: Khi đặt tên cho kho của bạn, hãy chọn một cái tên rõ ràng và mô tả để giúp bạn nhanh chóng nhận diện dự án sau này. Kho này sẽ là trung tâm cho dự án Angular của bạn.
Thiết lập ứng dụng Angular của bạn: Tạo một dự án Angular mới bằng cách sử dụng Angular CLI 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 ý kiến hay để 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ộ 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 rằng mọi thứ trông như mong đợi.

Đẩy ứng dụng Angular lên GitHub: Cam kết những thay đổi này về cơ bản lưu 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 Static Web App trên Azure: Dịch vụ Static Web App của Azure cực kỳ phù hợp để lưu trữ các ứng dụng web như dự án Angular, cung cấp tích hợp trực tiếp với GitHub.

Cổng Azure

Chọn "Tạo tài nguyên".
Trong thanh tìm kiếm, nhập "Static Web App" và tiến hành.
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, nhóm tài nguyên (một container 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 loại 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 cho 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 bạn, kho chứa 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 cho Azure biết 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 thích hợp.
Xác nhận và tạo Static Web App của bạn.

Khởi động ứ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" và chuẩn bị cho "lưu trữ trực tuyến".

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

Sau khi 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 Azure, cụ thể trong phần "Tổng quan" của tài nguyên Static Web App của bạn.

Thực hành tốt nhất khi triển khai ứng dụng Angular lên Azure

Kiểm tra kỹ lưỡng trước khi triển khai: Trước khi đưa ứng dụng lên môi trường sản xuất, hãy chắc chắn rằng bạn đã kiểm tra đầy đủ chức năng và hiệu suất của nó.
Sử dụng công cụ giám sát: Azure cung cấp nhiều công cụ giám sát để theo dõi hiệu suất ứng dụng của bạn và phát hiện các vấn đề kịp thời.
Duy trì mã nguồn rõ ràng: Sử dụng các cam kết rõ ràng và mô tả để theo dõi lịch sử phát triển của ứng dụng.

Những cạm bẫy thường gặp

Không kiểm tra ứng dụng trước khi triển khai: Điều này có thể dẫn đến việc phát hiện lỗi nghiêm trọng sau khi ứng dụng đã được đưa vào hoạt động.
Thiếu bảo mật: Đảm bảo rằng bạn đã cấu hình đầy đủ các biện pháp bảo mật cần thiết cho ứng dụng của mình.

Kết luận

Triển khai ứng dụng Angular của bạn lên Azure Static Web Apps là một quy trình đơn giản mà, khi được thực hiện từng bước, sẽ đưa ứ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ó khả năng mở rộng và bảo mật mà còn sẵn sàng phục vụ cho một đối tượng 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 và cho phép có thể mở rộng sản phẩ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 lập trình viê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ế, tích cực trong hệ sinh thái mã nguồn mở, anh yêu thích việc học và nghiên cứu những điều mới mẻ.

Triển khai ứng dụng Angular lên Azure đơn giản