Azure Static Web App

Web app

Với kiến trúc phổ biến là tách riêng phần backend API và frontend UI, mỗi phần thường sẽ đc deploy trên các server (hay cụm server) khác nhau để đảm bảo tính tách biệt và cung cấp khả năng scale riêng biệt từng phần.

Khái web application (gọi ngắn là web app) không phân biệt giữa frontend hay backend, mà nó chỉ chung chung là những application chạy trên nền web.
(hiểu đơn giản hơn, nó là bất kì service gì được host trên cloud và được expose ra 1 network, tương tác qua lại bằng HTTP)

Khi deploy một frontend app, ta tiến hành bundle asset (*) và tạo 1 con proxy server. Trong đó, proxy server có 3 nhiệm vụ chính:

• Serve static asset
• Lưu trữ/tương tác với các service bên thứ 3 mà cần đăng ký các secret/credential
• Proxy tới backend API (như vậy sẽ giúp backend API có thể chạy private ở mạng kín mà không cần expose ra ngoài internet)

(*) Asset bundling: frontend có thể được code bởi rất nhiều framework như React, Angular, Vue, etc. Nhưng dù có dùng framework gì đi chăng nữa thì output cuối cùng vẫn là html, css và js. Quá trình bundle gồm việc compile code từ framework thành code js thuần túy, ngoài ra cũng sẽ minify code (làm code nhỏ hơn bằng việc xóa các khoảng trắng, thay thế tên biến thành kí tự ngắn).

Như vậy, nếu một frontend app không cần sử dụng tới các secret/credential bên thứ 3 hay backend API vốn dĩ đã được expose ra ngoài Internet, thì sự tồn tại của 1 proxy server là không cần thiết. Thay vào đó, ta có thể bundle sẵn frontend app rồi host phần bundle dưới dạng static asset, cực kì đơn giản và tiết kiệm chi phí.

Host web app như static asset

Để host một frontend app dưới dạng static asset, trước hết, ta thực hiện bundle. Mọi framework đều đã có config sẵn cho việc này, trong nhiều trường hợp, ta chỉ cần điền biến environment variable và chạy npm run build.

Tuy nhiên, ta vẫn có thể tự build bằng các công cụ phổ biến như esbuild

Kết quả phần build thường sẽ như sau:

/project-root
  /src
  /build
    abc123.js
    xyz123.css
    index.html

Sau khi có file bundle, ta sẽ upload lên Azure Blob Storage và expose index.html ra public. Như vậy là gần xong.

Tuy nhiên, chỉ như trên thì sẽ không support được việc routing trên frontend app, để workaround thì có vài giải pháp:

• Bundle mỗi route thành 1 trang html (như vậy thì sẽ không đáp ứng được các ứng dụng SPA)

• Sử dụng hash router (không được support bởi các trình duyệt cũ và ảnh hưởng đến SEO)

Sẽ rất tuyệt vời nếu tồn tại 1 service có khả năng xử lý phần routing này.

Deploy với Azure Static Web App

Azure Static Web App (SWA) là giải pháp tối ưu cho việc host frontend app dưới dạng static. Ngoài xử lý routing, dịch vụ này cũng tích hợp CDN cũng như nhiều công cụ khác cho việc phát triển như CICD, extension, etc.

Có 3 cách để sử dụng SWA:

• Sử dụng VS Code

• Thông qua Azure portal

• Thông qua SWA CLI