Qmonus Value Stream Docs

Appearance

CDNと統合されたフルマネージドな環境にSingle Page Application (SPA) を構築する ​

概要 ​

このアーキテクチャで達成できる要件 ​

  • フルマネージドなサービスを利用したい
  • グローバル CDN を利用してコンテンツを高速に配信したい

構成図 ​

構成説明 ​

  • WebアプリケーションをデプロイするAzure Static Web Appsを作成します。
  • Azure Static Web AppsにデプロイしたWebアプリケーションへアクセスするためのドメイン名を、Azure DNSへCNAMEへ登録します。

処理フロー ​

  1. クライアントからアプリケーションへのFully Qualified Domain Name (FQDN) が、Azure DNSによって解決される。
  2. 解決された結果を基に、クライントからAzure Static Web Appsへリクエストが送信される。
  3. Azure Static Web Appsへホスティングされたアプリケーションがクライアントへロードされる。

他方式との比較 ​

Azure App Service ​

  • アプリケーションをホスティングするサービスとしてAzure App Serviceを利用する選択肢を考えられます。
  • Azure App Serviceを用いた方式は、以下の場合に適しています。
    • Node.jsなどのバックエンドサーバを統合してホストしたい。

Azure Blob Storage + Azure CDN ​

  • アプリケーションをホスティングするサービスとしてAzure Blob Storage + Azure CDNを利用する選択肢を考えられます。
  • Azure Blob Storage + Azure CDNを用いた方式は、以下の場合に適しています。
    • シンプルな設定で静的コンテンツを安価に配信したい。

AssemblyLineの構成 ​

このアーキテクチャでは、以下のAssemblyLineが生成されます。

  • Azure Frontend Application
    • Webアプリケーションをデプロイする。

Azure Frontend Application ​

このAssemblyLineは、以下のPipelineから構成されます。

  • deploy
    • WebアプリケーションをデプロイするためのAzure Static Web Appsリソースを作成します。
  • publish-site
    • Azure Static Web Appsへ静的ファイルをデプロイします。

Architecture Decision Records ​

Azure DNSを利用して独自ドメインを設定する ​

Context ​

  • Azure Static Web Appsは、リソースが作成されると自動生成ドメインが提供されます。
    • 自動生成ドメインはランダムな文字列で構成されるため、ブランドイメージを統一できない、覚えづらいためユーザ体験が低下するといった問題があります。

Decision ​

  • Azure Static Web Appsで自動生成されたドメインに対して、Azure DNSを利用して別名の独自ドメインを設定します。
    • 公開するアプリケーションに対して任意のドメイン設定することで、ブランドイメージの統一やユーザ体験の向上を達成できます。

非機能要件 ​

可用性 ​

冗長化構成 ​

ロケーション構成 ​

  • Azure Static Web Apps: デフォルトはEast Asia。パラメータで変更可能。

運用・保守性 ​

バックアップ ​

Azure Static Web Appsではバックアップ機能は提供されていません。コードベースのバックアップはソースコード管理システムを使うなどしてユーザ側で管理することが推奨されます。

保守 ​

  • SSL証明書の自動更新
    • 作成したCNAMEレコードを利用してAzure Static Web Appsにカスタムドメインが登録され、無料のSSL/TLS証明書が自動的に作成されます。
    • 発行された証明書の期限は半年であり、自動更新されます。

セキュリティ ​

通信 ​

  • 本アーキテクチャではデフォルトで通信するデータをHTTPSを利用して暗号化します。

アクセス制限 ​

  • アクセス制限方法
    • Azure Static Web AppsではMicrosoft Entra IDとGithubの承認プロバイダを利用して、認証認可プロセスを構築できます。詳細はAzure Static Web Apps の認証と認可からご確認いただけます。

ログ ​

  • Azure Static Web Appsページから「監視」->「メトリック」から以下のメトリック確認できます。詳細はMicrosoft.Web/staticsitesで確認いただけます。
    • BytesSent
    • CdnPercentageOf4XX
    • CdnPercentageOf5XX
    • CdnRequestCount
    • CdnResponseSize
    • CdnTotalLatency
    • DataApiErrors
    • DataApiHits
    • FunctionErrors
    • FunctionHits
    • SiteErrors
    • SiteHits

Last updated: