Amazon Web Services ブログ
AWS Amplify によるフルスタック開発の進化
高速でパーソナライズされた体験を提供するために、Web アプリケーションの構築とレンダリング方法は、長年にわたって大きく進化してきました。その過程で、Web アプリケーションを構築する開発者の役割も、この進化を反映して変化してきました。本記事では、フルスタックの Web 開発の進化過程と、急速に変化する Web アプリケーションエコシステムやユーザーのニーズに対し、開発者が AWS Amplify を使って適応する方法について説明します。
Server-Side Rendering の黎明期
1990 年代とインターネットの初期段階では、Web アプリケーションは主にサーバー側でレンダリングされるアプリケーションでした。これは、HTML ファイルがサーバーに格納され、ブラウザクライアントがダウンロードする静的コンテンツからはじまりました。動的なコンテンツを提供するために、開発者はサーバープログラミング言語 (ASP、Java、PHP、Ruby など) を使って HTML をレンダリングするようになりました。これによって、アプリケーションをユーザーごとに動的に変化させることができるようになりました。アプリケーションは、データベースからデータを取得し、エンドユーザー向けにカスタマイズした状態でそのデータを提供できるようになりました。アプリケーションのユーザー数が増加するにつれ、パフォーマンスが課題となりました。ユーザーは、すべてのインタラクションにおいてページ全体のリロードが必要となったため、ユーザー体験が低下しました。加えて、開発者はサーバーに関連する運用、セキュリティ、スケーラビリティなども管理する必要がありました。
Client-Side Rendering (CSR) と Single Page Application (SPA) の台頭
2000 年代には、Asynchronous JavaScript and XML (AJAX) と呼ばれるクライアントサイドレンダリングの基礎となるアプローチが登場しました。これにより、ページのリロードなしでデータを非同期に取得できるようになりました。2010 年代中頃には、より高速でパーソナライズされた Web 体験の探求が続きました。それにより、React や Vue などの JavaScript ベースのフレームワークが登場しました。これらのフレームワークは、Single Page Application (SPA) を構築する革新的なアプローチを導入しました。
従来のマルチページアプリケーションでは、ユーザーの操作ごとにサーバーが新しいページ全体を送信する必要がありましたが、SPA ではユーザーインターフェイスコンポーネントを最初にロードし、その後ユーザーがアプリケーションと対話するときに動的にコンテンツを表示します。これにより、ユーザーの操作がより効率的でシームレスになりました。
このアプローチは、アプリケーションをより効率的に管理する方法を示しました。ここでは、フロントエンドはバックエンドから切り離されています。さらに、エッジ・コンピューティングの進歩を活用し、コンテンツ・デリバリー・ネットワーク (CDN) にデプロイすることで、インフラストラクチャを管理することなくスケーリングし、グローバルトラフィックへの対応を向上させることができます。
Server-Side Rendering (SSR) の再浮上
Client-Side Rendering はユーザ体験を向上させましたが、いくつかの課題が生じました。
まず、初期レンダリングでコンテンツを取得してからクライアントサイドでレンダリングするため、動的コンテンツの描画に時間がかかるようになりました。さらに、初期レンダリングが空の HTML になるため、コンテンツがなく検索エンジンに最適化されないことがあります。
その結果、機能強化されたサーバー側のアプローチが新しく登場しました。まず、Static Site Generations (SSG) です。ビルド時に静的コンテンツを生成します。静的ファイルは CDN から提供できるため、アプリケーションのグローバルトラフィック処理能力も向上します。次に、Server-Side Rendering (SSR) がアプリケーションで再び使われるようになり、ユーザーのリクエスト時にコンテンツを生成します。これにより、最新の状態に更新された個別のコンテンツを高速に提供できます。これらのアプローチは、サーバーレスコンピューティングの登場により恩恵を受けています。サーバーレスコンピューティングを使えば、基盤となるインフラストラクチャを心配することなくコードを実行できます。
フルスタックフレームワークの台頭
Client-Side Renderingと Server-Side Rendering にはそれぞれ長所と短所があることをお話ししました。そのため、顧客にとって最高の体験を提供するにはどう構築すべきか判断するのは難しくなります。結果として、開発者はこれらのレンダリングアプローチの利点を活かせるフレームワークを多く利用するようになっています。今日では、Next.js (React を使用するアプリケーション向け) や Nuxt (Vue.js を使用するアプリケーション向け) などのフルスタックフレームワークは、データフェッチ、レンダリング、キャッシングについてそれぞれの考えに基づいたアプローチを提供しています。これらは単一のコードベースで対応できるので、複数のスタックやデプロイが必要なケースの大変さが軽減されます。例えば、以下のようなものがあります。
- Next.js API ルートは、
/api/フォルダ内に関数を置くだけで、直感的に公開 API を作成できます。 - Next.js App Router および React Server Component (RSC) では、
use clientとuse serverという指示を使用して、コンポーネントをレンダリングする場所を指定できます。
イテレーションの速度と、変化するお客様のニーズに適応することが成功の鍵となります。
フルスタックフレームワークの台頭により、開発者はコードを書くことから優れた製品を作ることへと、継続的にフォーカスする点をを移していくことができます。
AWS Amplify : フルスタックの Web、モバイル、AI アプリを構築するために必要な全て
フレームワークに加えて、開発者はニーズに応じた適切なクラウド インフラストラクチャにイテレーションとデプロイを簡単に行えるプラットフォームが必要です。AWS Amplify は、AWS のクラウドバックエンドに接続するための使いやすいライブラリとホスティング プラットフォームを提供します。これには API、ストレージ、認証が含まれます。アプリケーションが成長すると、Amplify は AWS Cloud Development Kit (CDK) で定義されたインフラストラクチャでの拡張性を提供します。Amplify を使えば、開発者は深いクラウド専門知識なしにアプリケーションを数百万人のユーザーにスケールアップできます。Amplify は、Next.js や Nuxt などの一般的なフレームワークに対して ゼロコンフィグデプロイをサポートし、Amazon S3、Amazon CloudFront、AWS Lambda 全体にわたるデプロイを処理します。
re:Invent 2023 で、AWS Amplify は Gen 2 の開発者体験のパブリックプレビューを発表しました。これは現在 一般提供 されています。開発者コミュニティからのフィードバックを受け入れた変更により、より迅速なイテレーションと自信を持ったリリースが可能になりました。これには、CLI ツールの面倒さを避ける コードファーストの開発者体験 と、Amazon Q Developer のようなサービスからの AI アシスタンスが含まれています。
また、ローカルテストを通じて素早くイテレーションできるパーソナルクラウドサンドボックスや、フロントエンドとバックエンドの両方を 1 か所で管理できるファイルベースの規約などの機能も含まれています。
生成 AI 時代への進化
生成 AI の進化に伴い、開発者は高速なユーザー体験の実現という再び新たな課題に直面しています。まず、生成 AI の基盤モデルは応答に長い時間がかかる可能性があるため、非同期や streaming パターンを検討する必要があります。さらに、ユーザーの会話履歴のようなメモリを管理する必要が出てくる可能性があります。これらの課題はモダンなフレームワークやプラットフォームの重要性を示しています。
AWS Amplify の各機能を活用することで、お客様に魅力的なエクスペリエンスを提供するための機能を統合し、適応できるようになります。ここでは Amplify が AWS AppSyncとデータベースや API への非同期のクエリを提供する、マネージド GraphQL サービスと、主要な基盤モデルへの API アクセスを提供するAmazon Bedrock を活用しています。詳しくは、このフルスタックアプリケーションのサンプルを参照してください。
まとめ
本記事では、Web でのアプリケーション開発の進化について学びました。まず Server-Side アプリケーション、 Client -Side アプリケーションの起源に立ち返り、その後の Server-Side アプローチの適応について掘り下げました。フルスタックフレームワークを使ってクラウドでアプリケーションを構築・スケーリングする方法、サーバーレス、エッジコンピューティング、そして生成 AI などの新しいテクノロジーを活用する方法を探りました。最終的にはこの進化により、高速で、個人に最適化された、AI 駆動のユーザー体験を構築できるようになります。
まずは、AWS Amplify の新しいコードファーストの開発者体験でフルスタックの Web アプリケーションを構築してみましょう。
本記事は、「The evolution of full-stack development with AWS Amplify」を翻訳したものです。