ha6_6ruブログ

主にフロントエンドの技術ネタを中心にしていく予定です。

Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境

はじめに

この記事は Vue Advent Calendar 2020 の 25 日目の記事です。
Vue.jsを使ったアプリケーション開発とは少し趣旨を変えて、Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境について整理します。
スクエア free セミナー 第118回 Ｗｅｂサイト構築の新潮流 - YouTube で話した内容を整理してまとめたものです。

Webフロントエンドのアーキテクチャ

f:id:ha6_6ru:20201225001324p:plain

Webフロントエンドのアーキテクチャとしては、Single Page Application、Server Side Rendering、Static Site Generation（Static Site Generator）の3つが主流ですね。ここではそれぞれのアーキテクチャについては解説しません。

WebフロントエンドアーキテクチャのVue.jsベースの実装技術

f:id:ha6_6ru:20201225001649p:plain

SPAとSSRについては改めて解説することもないと思うので、説明は省略します。SSGで人気のツールには、Hugoのように所謂3大JavaScriptフレームワークに依存しないものもあります。Vue PressやNuxtJSは、Vue.jsのコンポーネントを活用することができるので、Vue.jsの開発者にはおススメです。

Webフロントエンドのアーキテクチャとその用途

f:id:ha6_6ru:20201225002946p:plain

企業内で使う業務システムを代表とするエンタープライズWebアプリケーションでは、高速なイントラネットが用意されていることやSEO対策が不要ということもあり、SPAが適しています。 ​
コンシューマー向けのWebアプリケーションになると、パフォーマンスやSEO対策の必要性に応じてSSRが優位になることがありますが、 サーバーリソースの効率性やスケールのしやすさ、開発の容易性から、多くの場合はSPAが適しています。SSRを適用すべきなのは、静的サイトではないWebアプリケーションにおいて、First Meaningful Paintを高速化したい場合や動的にOGPを設定したいケースがあげられます。 SSGは、ブログやニュースなどの投稿、外部リソースの更新をトリガーに更新するWebサイト、ランディングページのように従来から静的サイトとして作られていたものが適しています。

Webフロントエンドのアーキテクチャとその実行環境

Webフロントエンドのアーキテクチャに対して、クラウドサービスをフル活用した実行環境について紹介します。

SPAコンテンツ配信

f:id:ha6_6ru:20201225004326p:plain

Azureでは前段にCDNを構え、ビルドで生成した静的コンテンツはAzureのストレージサービスであるBlob Storageを使ってホスティングします。​Azureでは、Static Web AppsというサーバーレスのFaaSをセットにした静的コンテンツ配信用のサービスがプレビュー公開中で、今後はStatic Web Appsが主流になっていくと思います。 ​ AWSでは前段にCloudFrontを構え、ビルドで生成した静的コンテンツはAWSのストレージサービスであるS3を使ってホスティングします。​
CDNまたはCloudFrontでは、キャッシュやファイル圧縮の機能など、図に記載した機能を利用します。また、SPAの場合はクライアントサイドルーティング用の設定を忘れないようにしましょう。
​ここで紹介したストレージサービスではなく、Webサーバーでコンテンツを配信することもできますが、静的コンテンツのホスティング環境を使うことで、非常にお手軽でハイパフォーマンスな構成を実現できます。​

API

f:id:ha6_6ru:20201225004432p:plain

SPAとSSR、SSG(Jamstack)で使うAPIはサーバレス（FaaS）で構成することができます。AzureではFunctions、AWSではLambdaです。
また、Open ID Connectを使い、別に用意したOpen IDプロバイダー兼認可サーバーに認証認可を移譲する形で認証認可をサポートすることもできます。​認証認可はAzureではAPI Managementで、AWSではAPI Gatewayで構成します。​

SSRコンテンツ配信

f:id:ha6_6ru:20201225004453p:plain

SSRの場合は、サーバー側でHTMLを生成するためのWebサーバー機能が必要ですので、Webサーバーとして、Node.jsが動作する環境を用意しましょう。
Azureでは、Node.jsをランタイムとして利用できるAzure App Serviceが手軽に利用できます。
AWSではFargateを使い、Docker上でNode.jsをセットアップして使うのがおススメです。制約はあるものの、Lambdaで動作させることもできます。

SSG（Jamstack）

f:id:ha6_6ru:20201225004517p:plain

SSGのコンテンツの配信方法はSPAと同じ構成で実現できます。​SSGはJamstackで使われるケースが増えていますので、Jamstackの構成についても紹介します。
Azure PipelineまたはAWS Amplifyを使ってGitHubにプッシュされたことをトリガーに、静的サイトをビルド、デプロイします。ビルドに使うのは、実装技術で出てきたVuePress、NuxtJSですね。

おわりに

2020年はVue.js 3.0がリリースされましたが、VuetifyなどのUIコンポーネントライブラリやその他周辺ライブラリのVue.js 3対応は現時点でまだ揃っていません。2021年はVue.js 3を使った本格的な開発に取り組みたいですね。
Vue.js 3.0に向けた準備には、是非こちらの著書もよろしくお願いします。

f:id:ha6_6ru:20201225012239j:plain:w250

amzn.to