Cách tốt nhất để lưu trữ Ứng dụng Trang đơn (SPA) trong Microsoft Azure

Dịch vụ ứng dụng Azure truyền thống so với chức năng Azure V2 với proxy so với trang web tĩnh lưu trữ Azure (Bản xem trước)

Tôi thường xuyên cần triển khai các trang web tĩnh (ví dụ: trang web của công ty chúng tôi https://www.media-lesson.com) hoặc Ứng dụng trang đơn và tôi vẫn luôn tìm cách cải thiện chi phí và thời gian triển khai.

Microsoft vừa công bố bản xem trước công khai về lưu trữ trang web tĩnh cho Azure Storage thêm một tùy chọn khác để lưu trữ một ứng dụng trang duy nhất (SPA) trên Azure.

Ngay trước khi Microsoft bổ sung hỗ trợ trở lại cho Proxy trong Azure Chức năng Runtime 2.0.11776-alpha vào ngày 14 tháng 5, cung cấp cách lưu trữ trang web tĩnh trong Lưu trữ Azure và chuyển tiếp lưu lượng truy cập thông qua tuyến proxy của Chức năng Azure.

Cả hai tùy chọn mới đều thêm vào cách lưu trữ truyền thống của trang web (tĩnh) trong Dịch vụ ứng dụng Azure. Thậm chí còn có nhiều tùy chọn lưu trữ trang web trong Azure, ví dụ: sử dụng Container, Docker, Kubernetes, Máy ảo, v.v. nhưng tôi sẽ tập trung vào Triển khai dễ dàng và hiệu quả về chi phí cho các ứng dụng trang đơn.

Và vì chúng tôi đang đánh giá các tùy chọn lưu trữ nên nó cũng đáng để so sánh việc triển khai thủ công và tự động bằng cách sử dụng Visual Studio Team Services (VSTS) cho các dịch vụ được đề cập.

Vì vậy, hãy để Câu trả lời cho những câu hỏi này để giúp quyết định sử dụng dịch vụ nào khi lưu trữ Ứng dụng Trang đơn:

  1. Cần bao nhiêu nỗ lực để tự triển khai và tự động triển khai một ứng dụng?
  2. Cần bao nhiêu cấu hình?
  3. Làm thế nào để nó quy mô?
  4. Nó thực hiện như thế nào?
  5. Nó có giá bao nhiêu?

Ứng dụng thử nghiệm

Vì vậy, hãy bắt đầu thử nghiệm này bằng cách tạo một SPA đơn giản dựa trên Angular bằng Angular CLI làm ứng dụng thử nghiệm để triển khai và thử nghiệm trên 3 dịch vụ khác nhau: ng testapp mới - xuất hiện Xin lưu ý rằng tôi đang trực tiếp thêm tính năng định tuyến vào ứng dụng sử dụng tham số --outout. Tôi thấy đây là khía cạnh quan trọng cần kiểm tra khi xem xét các tùy chọn lưu trữ vì việc định tuyến có thể là một thách thức cấu hình trong một số môi trường như Dịch vụ ứng dụng vì chúng tôi cần định cấu hình máy chủ web để cho phép xử lý tuyến bằng ứng dụng khách của chúng tôi thay vì phía máy chủ.

Để kiểm tra đầy đủ định tuyến chúng ta cũng cần phải có một số tuyến đường mẫu. Do đó, hãy thêm một ngôi nhà và một thành phần về ứng dụng của chúng tôi bằng cách sử dụng CLI: ng tạo thành phần nhà và ng tạo thành phần về. Tiếp theo, chúng ta cần có hai tuyến đường trong app-định tuyến.module.ts để cho phép điều hướng giữa hai thành phần:

Cuối cùng, một số nút điều hướng để cho phép người dùng điều hướng giữa hai thành phần trong app.component.html:

Hãy để xây dựng ứng dụng của chúng tôi tại địa phương để chuẩn bị triển khai thủ công bằng cách sử dụng ng build --prod, cung cấp cho chúng tôi thư mục xây dựng nhỏ này:

Tất nhiên chúng tôi cũng muốn làm khô triển khai tự động như là một phần của quá trình triển khai liên tục. Do đó, hãy để ứng dụng của chúng tôi đẩy ứng dụng của chúng tôi vào kho lưu trữ VSTS và thiết lập định nghĩa xây dựng với 3 tác vụ sau:

cài đặt npm

xây dựng npm

Xuất bản tạo phẩm xây dựng từ đường dẫn đến ứng dụng

Dịch vụ ứng dụng Azure

Dịch vụ ứng dụng Azure là dịch vụ PaaS (Nền tảng là dịch vụ) và cách lưu trữ nội dung web cổ điển trên Azure. Sử dụng dịch vụ ứng dụng, chúng tôi cần chăm sóc cấu hình và nhân rộng dịch vụ của chúng tôi bằng tay. Để kiểm tra điều này, hãy tạo ra một dịch vụ ứng dụng mới trong Cổng thông tin Azure. Tôi chọn lớp S1 cho bài kiểm tra này vì nó là lớp cấp nhập cảnh cho các ứng dụng sản xuất.

Định cấu hình định tuyến

Do tính chất của nó trong việc cung cấp PaaS, các nhà phát triển phải quan tâm đến cấu hình của máy chủ web bên dưới (trong trường hợp Windows, nó IIS IIS). Điều này có nghĩa là để cho phép định tuyến bên trong ứng dụng Angular của chúng tôi, chúng tôi phải cung cấp tệp web.config hướng dẫn cho máy chủ web cách xử lý định tuyến hoặc lưu trữ ứng dụng góc trong ứng dụng ASP.Net Core 2.1 với phần mềm trung gian SpaService được bật. Đây là một mẫu đơn giản của web.config với định tuyến SPA:

Triển khai thủ công

Để triển khai thủ công, hãy sử dụng FTP, chỉ cần sử dụng FTP để tải lên nội dung của thư mục dist của chúng tôi và web.config vào thư mục wwwroot của dịch vụ ứng dụng. Thông tin đăng nhập FTP có thể được tải xuống trong cổng thông tin Azure trong tab tổng quan về dịch vụ ứng dụng bằng cách nhấp vào Tải xuống Nhận hồ sơ xuất bản.

Triển khai liên tục bằng Dịch vụ nhóm Visual Studio

Việc thiết lập định nghĩa phát hành trong VSTS để triển khai ứng dụng lên dịch vụ ứng dụng khá đơn giản vì chúng ta chỉ cần một định nghĩa phát hành trống với một nhiệm vụ:

Để định cấu hình điểm cuối dịch vụ FTP, hãy nhấp vào, hãy nhấp vào trên Manage Manage và thêm điểm cuối chung mới có cùng thông tin đăng nhập để triển khai thủ công.

Hàm Azure

Trong biến thể này, chúng tôi sẽ sử dụng Azure Storage như một cửa hàng rẻ tiền cho các tệp tĩnh của chúng tôi và Ứng dụng chức năng Azure có proxy để phục vụ SPA cho người dùng. Điều này cho phép chúng tôi tự động mở rộng quy mô (khi sử dụng gói tiêu thụ), kết hợp SPA của chúng tôi với các chức năng khác (ví dụ: các lệnh gọi API) trong một tên miền và quản lý ứng dụng của chúng tôi theo kiểu không có máy chủ.

Vì vậy, chúng ta cần tạo Ứng dụng chức năng và Tài khoản lưu trữ (được tạo tự động khi tạo Ứng dụng chức năng). Tiếp theo, chúng ta cần tạo một thùng chứa blob có tên là web web trong tài khoản lưu trữ, nơi chúng ta sẽ triển khai các tệp của mình sau này.

Phép thuật định tuyến bây giờ xảy ra theo cách chúng tôi định cấu hình proxy để chuyển tiếp yêu cầu từ ứng dụng chức năng của chúng tôi đến tài khoản lưu trữ. Vì vậy, chúng ta sẽ cần 2 proxy:

Người đầu tiên chuyển tiếp yêu cầu đến url cơ sở tới index.html của chúng tôi

và thứ hai để chuyển tiếp yêu cầu cho các tài sản tĩnh khác như tệp javascript hoặc bảng định kiểu đến vị trí của chúng trong tài khoản lưu trữ.

Triển khai thủ công

Để triển khai theo cách thủ công, hãy nhấp vào các Container Container trong tài khoản lưu trữ trong cổng thông tin Azure và chọn thùng chứa web web mà chúng tôi vừa tạo. Bây giờ hãy để tải lên các tập tin từ bản dựng cục bộ.

Triển khai liên tục bằng Dịch vụ nhóm Visual Studio

Để kiểm tra điều này, chúng ta cần tạo một định nghĩa phát hành thứ hai trong VSTS với mẫu quy trình trống và thêm tác vụ Sao chép tệp AzureBlob:

Lưu trữ Azure

Đây là tùy chọn mới nhất vừa mới được đưa vào xem trước công khai. Ý tưởng là sử dụng bộ lưu trữ để lưu trữ SPA vì không cần một máy chủ web thực sự để chỉ phục vụ các tệp tĩnh đủ điều kiện cho biến thể này cho máy chủ buzzword. Vì vậy, hãy để Lừa tạo một tài khoản lưu trữ mới (mục đích chung v2) và sau đó kích hoạt tính năng trang web tĩnh:

Đây là tất cả cấu hình chúng ta cần. Quy mô lưu trữ tự động và định tuyến cũng hoạt động ra khỏi hộp. Điểm cuối chính là url SPA SPA của chúng tôi. Tốt đẹp!

Triển khai thủ công

Để triển khai theo cách thủ công, nhấp vào Container Container, trong tài khoản lưu trữ trong cổng thông tin Azure và chọn vùng chứa Container $ web (được tạo tự động khi bật trang web tĩnh). Bây giờ, hãy cho phép tải lên các tệp từ bản dựng cục bộ:

Và đó là điều đó!

Triển khai liên tục bằng Dịch vụ nhóm Visual Studio

Để kiểm tra điều này, chúng ta cần tạo định nghĩa phát hành thứ ba trong VSTS với mẫu quy trình trống và thêm tác vụ Sao chép tệp AzureBlob:

Đảm bảo chọn phiên bản 2. * (xem trước) nếu không, tiếng rên triển khai không thành công vì ký tự của $ $ trong tên container không được phép trước đó.

Hiệu suất

Để có được ý tưởng về hiệu suất, hãy để chạy một số bài kiểm tra tải đạn pháo trên 3 triển khai của chúng tôi. Đây là kết quả của tôi khi thực hiện 1.000, 10.000 và 100.000 yêu cầu:

Có một lợi ích hiệu suất mạnh mẽ khi sử dụng Azure Storage và tránh thành phần máy chủ web trong khi Chức năng và Dịch vụ ứng dụng chạy ở tốc độ tương đương. Điều này có ý nghĩa khi cả hai chia sẻ cùng một cơ sở hạ tầng cơ bản. Tôi có một chút ngạc nhiên khi ứng dụng Chức năng đang chạy chậm hơn cả Dịch vụ ứng dụng.

Tôi thấy điều này thậm chí còn xa lạ khi so sánh tổng thời gian chạy để hoàn thành bài kiểm tra 100.000 yêu cầu. Việc này mất khoảng 46 giây để hoàn thành Azure Storage và 14 phút và 27 giây cho Dịch vụ ứng dụng và thậm chí 17 phút và 2 giây cho ứng dụng Chức năng. Tôi đã mong đợi ứng dụng Chức năng tăng tốc theo thời gian vì tôi đang mong đợi ứng dụng này tự động mở rộng theo chiều ngang. Mà không có vẻ như làm việc trong kịch bản này.

Vì vậy, chúng tôi có một người chiến thắng rõ ràng trong kỷ luật này: Lưu trữ thực sự nhanh chóng!

Chi phí

Làm cho chi phí đúng là khó khăn vì tất cả đều có các mô hình thanh toán khác nhau. Ở đây, tính toán ví dụ của tôi về chi phí hàng tháng cho 100.000 yêu cầu / ngày ở khu vực Tây Âu (mà tôi không chắc chắn 100% là nó hoàn thành và chính xác!):

Dịch vụ ứng dụng

1x S1 Instance ở Tây Âu chạy Windows (1 lõi, RAM 1,75 GB, Bộ nhớ 50 GB) = 61,56 € / tháng

Ứng dụng chức năng (+ Lưu trữ)

SPA của chúng tôi bao gồm 5 tệp * 100.000 yêu cầu / ngày * 31 = 7.500.000 yêu cầu mỗi tháng. Tổng kích thước của ứng dụng của chúng tôi là khoảng 0,33 MB, chiếm 0,98 TB tổng lưu lượng truy cập mỗi tháng. Thời gian thực hiện tối thiểu là 100ms (sẽ đủ cho mục đích proxy của chúng tôi) để chúng tôi có thể xử lý 10 yêu cầu / lần thực hiện thứ hai.

1x Ứng dụng chức năng với 1.550.000 lần thực thi với thời gian thực hiện là 1 giây mỗi tháng (mỗi bộ nhớ dưới 128 MB) để xử lý các yêu cầu đi qua proxy = 0,17 € / tháng

1x Lưu trữ Mục đích chung Khối V2 Tài khoản lưu trữ Blob với dự phòng LRS và tầng truy cập nóng. Dung lượng 1 GB (thực sự chúng tôi chỉ cần 300kb nhưng đó là kích thước nhỏ nhất có sẵn), 100 Thao tác ghi, 100 thao tác danh sách, 15.000.000 hoạt động đọc và truy xuất dữ liệu 0,98 TB = 5,64 € / tháng

Tổng cộng: 5,81 € / tháng.

Lưu trữ

Đối với việc lưu trữ, chúng tôi chỉ thực hiện tính toán tương tự như trên:

1x Lưu trữ Mục đích chung Khối V2 Tài khoản lưu trữ Blob với dự phòng LRS và tầng truy cập nóng. Dung lượng 1 GB (thực sự chúng tôi chỉ cần 300kb nhưng đó là kích thước nhỏ nhất có sẵn), 100 Thao tác ghi, 100 thao tác danh sách, 15.000.000 hoạt động đọc và truy xuất dữ liệu 0,98 TB = 5,64 € / tháng

Phần kết luận

  • Lưu trữ một SPA trong Lưu trữ thuần túy là cách chạy rẻ nhất và hiệu quả nhất trong Azure
  • Lưu trữ một SPA trong một ứng dụng chức năng với các proxy có chi phí bổ sung tối thiểu nhưng hiệu suất giảm mạnh. Đây là loại lạ như tôi nên quy mô theo chiều ngang. Tôi chắc chắn sẽ nghiên cứu thêm ở đây
  • Lưu trữ một SPA trong Dịch vụ ứng dụng đòi hỏi nỗ lực cấu hình bổ sung để hỗ trợ định tuyến (trở nên phức tạp hơn khi kết hợp với các API Web)

Lưu trữ một SPA trong Bộ lưu trữ sẽ không có vấn đề gì đối với các tình huống phát triển, thử nghiệm và dàn dựng vì nó rất nhanh để thiết lập và trong hầu hết các trường hợp thậm chí là miễn phí cho các tình huống đó. Tôi đã không tìm thấy bất kỳ nhược điểm nào vì vậy sẽ lặn sâu hơn một chút và xem liệu chúng ta cũng có thể sử dụng nó trong sản xuất.

Xin vui lòng cung cấp thông tin phản hồi.