Webアプリ / モバイルアプリを高速に開発。「AWS Amplify」をグラレコで解説

Amplify CLI (コマンドライン・インターフェース) をお使いの開発環境にインストールし、amplify init コマンドでプロジェクトの初期化を行った後、バックエンドを作成するコマンド (amplify add カテゴリ名) を入力することで、バックエンドの作成が対話形式で行えます。カテゴリ名には、api (API) / auth (認証) / storage (ストレージ) / function (関数) などがあります。例えば、API を作成したい場合は amplify add api と入力することでAPIの作成が行えます。

上記 1. で作成したバックエンドを、実際に Web アプリ / モバイルアプリから利用できるようにするのが Amplify ライブラリです。 Web アプリ向けには JavaScript ライブラリが用意されており、モバイルアプリ向けには Android / Flutter / iOS 対応ライブラリが用意されています。

Web アプリ / モバイルアプリでよく使う「ログイン機能」「画像のアルバム表示」「チャットボット」といった機能を、コードを書く事無くサクッと実装できるのが Amplify UI コンポーネントです。JavaScript フレームワーク・ライブラリである Angular / Ionic / React / React Native / Next.js / Vue 向けに、それぞれ UI コンポーネントが用意されています。

Web アプリをホスティング・公開するには Amplify コンソールを使います。Amplify コンソールには、以下のような機能が備わっています。

• 静的 Web アプリのホスティング機能 (GitHub などのコードリポジトリと接続し、手動または自動デプロイ (CI/CD) の設定が可能)
• プルリクエストが送られるたびに自動的に Web アプリのプレビュー用 URL を生成する「Web プレビュー」機能 (自動デプロイ (CI/CD) を設定した場合に利用可能)
• Web アプリのメトリクスを表示する機能 (リクエスト数、ダウンロード / アップロードされたデータ量 (バイト)、エラー数、レイテンシー等)

また、2021 年 5 月 18 日に Amplify コンソールにおける Next.js を用いた SSR (サーバーサイドレンダリング) のサポートが発表 されました。ページのレンダリングをクライアント側ではなくサーバー側で行うことにより、検索エンジンへの最適化やパフォーマンスの改善が期待できます。

本記事の冒頭で、Amplify CLI を使ったアプリのバックエンドの作成方法を紹介しましたが、より直感的に GUI (グラフィカル・ユーザ・インターフェース) 上でバックエンドを作成できるよう、2020 年 12 月に AWS re:Invent 2020 で発表された新機能が Admin UI です。

Admin UI を使うと、作成したいバックエンドのタイプ (現在はデータモデルおよび認証機能のみ作成可能) を GUI 上でクリックして選択するだけで、Amplify CLI と同様にバックエンドを作成することができます。

また、Admin UI では、バックエンド作成機能の他、コンテンツ管理およびユーザー管理機能も提供しています。アプリのコンテンツ (テキストや画像など) を追加・変更したい場合や、ユーザー管理を行いたい場合に、Admin UI の管理画面から簡単に行うことができます。