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

2021-06-02
AWS グラレコ解説

Author : 安田 茂樹, 伊藤 ジャッジ向子


Webアプリ / モバイルアプリとは ?

Web アプリとは、インストール不要で、普段使っている Web ブラウザから利用可能なアプリケーションのことです。一方、モバイルアプリとは、スマートフォンなどの端末にインストールするアプリケーションのことを指します。

一例として、動画配信サービスの Amazon Prime Video (プライムビデオ) では、Web ブラウザから利用可能な Web アプリと、スマートフォンにインストールして利用可能なモバイルアプリの両方が提供されています。

また、Web アプリ / モバイルアプリは、通常 「フロントエンド」と「バックエンド」の 2 つの部分から構成されます。「フロントエンド」とは、ユーザーと直接やりとりをする部分を指し、ユーザーに向けて情報を表示したり、ユーザーから入力を受け付けたりします。一方、「バックエンド」とは、フロントエンドから送信されたデータの処理をサーバー上で行う、ホスティングや API、データベースなどを指します。

従来、Web アプリ / モバイルアプリ開発においてはフロントエンドの開発を担当する「フロントエンドエンジニア」と、バックエンドやインフラの開発を担当する「バックエンドエンジニア」が役割分担をして開発を行ってきました。しかし、最近では本記事で紹介する AWS Amplify などを用いることで役割の境界線が曖昧になっていることもあり、「フルスタックエンジニア」と呼ばれるアプリケーション全般にわたる開発を担当するエンジニアも増えてきています。


AWS Amplify とは ?

AWS では、バックエンドの知識や経験が無くても、簡単な操作でバックエンドを作成し、フロントエンドと接続できる AWS Amplify というサービスを提供しています。

AWS Amplify は以下のツールとサービスで構成されています。

Amplify CLI

Amplify
ライブラリ

Amplify UI
コンポーネント

Amplify
コンソール

Admin UI

本記事では、これらを使ったアプリケーション開発の流れを紹介します。


AWS Amplify を使ったアプリケーション開発の流れ

AWS Amplify では、一般的に以下の手順でアプリケーションの開発を行います。

1. Amplify CLI でバックエンドを作成

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

img_awsgeek-amplify_01

2. ライブラリを使ってアプリからバックエンドを利用

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

img_awsgeek-amplify_02

3. UI コンポーネントでアプリのログイン機能などを実装 (オプション)

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

img_awsgeek-amplify_03

Web アプリをホスティングする Amplify コンソール

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

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

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

img_awsgeek-amplify_04

GUI でバックエンドの作成や管理ができる Admin UI

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

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

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

img_awsgeek-amplify_05

料金について

Amplify CLI / ライブラリ / UI コンポーネント / Admin UI を使用する場合は、基盤として使用する AWS のサービスに対してのみ料金が発生し、これらの機能の使用自体には料金は発生しません。

一方、Amplify コンソールで静的 Web ホスティングを利用する場合は、従量制料金が発生します。静的 Web ホスティングの料金の詳細に関しましては  こちら をご確認下さい。

また、Amplify コンソールで Next.js の SSR ホスティングを利用する場合、SSR が使用する Amazon S3 + Amazon CloudFront + Lambda@Edge の料金が別途発生します。 Next.js の SSR ホスティングで発生する料金に関しましては こちら をご覧ください。


最後に、全体の図を見てみましょう。

img_awsgeek-amplify_full

本記事では、高速に Web アプリ / モバイルアプリ開発が行える AWS Amplify について紹介しました。AWS Amplify を使うことで、「差別化につながらない重労働」を回避でき、本質的な開発に集中することができます。

AWS Amplify についての詳細は、こちら をご覧下さい。

また、AWS Amplify に興味のある方はぜひ AWS Amplify Japan User Group のイベント をチェックしてみてください。


builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

この連載記事のその他の記事はこちら

選択
  • 選択
  • 今話題のブロックチェーンをAWSで実現する仕組みをグラレコで解説 »
  • サーバーレスって何が便利なの ? AWS でサーバーレスを構築するためのサービスをグラレコで解説 »
  • 機械学習のワークフローってどうなっているの ? AWS の機械学習サービスをグラレコで解説 »
  • 外部から AWS のバックエンドサービス利用を実現する仕組みをグラレコで解説 »
  • AWS でデプロイの自動化を実現するベストプラクティスをグラレコで解説 »
  • コンテナを使ってモノリスを分割する方法をグラレコで解説 »
  • クラウドへ移行する理由とそのステップをグラレコで解説 »
  • Windows ワークロードをクラウドへ移行するためのベストプラクティスをグラレコで解説 »
  • サーバーレスのイベントバスって何 ? Amazon EventBridge をグラレコで解説 »
  • サーバーレスで SaaS を構築する方法をグラレコで解説 »
  • 「あなたへのおすすめ」はどう生成するの ? Amazon Personalize で簡単に実現する方法をグラレコで解説 »
  • クラウド設計・運用のベストプラクティス集「AWS Well-Architectedフレームワーク」をグラレコで解説 »
  • 特定の顧客セグメントにメッセージ送信。「Amazon Pinpoint」の仕組みをグラレコで解説 »
  • アプリにユーザー認証機能を簡単に追加できる「Amazon Cognito」をグラレコで解説 »
  • わずか数分で WordPress サイトを構築できる「Amazon Lightsail」をグラレコで解説 »
  • 異なるアプリケーション同士の疎結合を実現。「Amazon SQS」をグラレコで解説 »
  • Web アプリを高速に開発できる「AWS Amplify」をグラレコで解説 »
  • 機械学習の知識ゼロでもテキストデータを分析。Amazon Comprehend をグラレコで解説 »
  • ビジネスデータをまとめて可視化 & 分析。Amazon QuickSight をグラレコで解説
  • 人工衛星の地上局を 1 分単位で利用。AWS Ground Station をグラレコで解説
  • カオスエンジニアリングで本当にカオスにならないための進め方をグラレコで解説
  • GraphQL API を簡単に作成 & 運用。AWS AppSync をグラレコで解説
  • IoT 環境を必要な機能を選択するだけで構築。AWS IoT をグラレコで解説
  • 高い可用性と耐久性のオブジェクトストレージ。Amazon S3 をグラレコで解説
  • サーバーレスでイベント駆動型アプリケーションを実現。AWS Lambda をグラレコで解説
  • データサイエンス教育の強い味方。Amazon SageMaker Studio Lab をグラレコで解説
  • 高速で柔軟な NoSQL データベースサービス。Amazon DynamoDB をグラレコで解説

筆者プロフィール

photo_yasuda

安田 茂樹
アマゾン ウェブ サービス ジャパン合同会社
テクニカルコンテンツマネージャー

2014 年にアマゾンジャパン合同会社に入社後、デバイス試験部門にて発売前の数多くの Amazon デバイスの試験に携わる。2019 年より現職。
趣味は新しいガジェットを試すこと、旅行、食べ歩き。

イラスト作成者プロフィール

photo_ito_judge

伊藤 ジャッジ向子(さきこ)
アマゾン ウェブ サービス ジャパン株式会社
ソリューションアーキテクト

2016 年にアマゾン ウェブ サービス ジャパン株式会社テクニカルサポート部入社。AWS Snowball 等のストレージ系サービスのサポート、ならびに IoT サービスをメインにサポートを行い、2019 年にソリューションアーキテクト部門のテクニカルライターを経験後、2020 年より現職。
趣味はインドアでは小さなセンサーと Raspberry Pi でおもちゃを作ること。アウトドアでは犬を連れてのハイキングとキャンプ。

監修者プロフィール

photo_wachi-daijiro

和智 大二郎
アマゾン ウェブ サービス ジャパン株式会社
Developer Relations Engineer (Web)

2020 年より現職にて、AWS 上での開発者体験の改善を通じたアプリケーション開発者の生産性向上を目的に、戦略の立案や AWS Amplify の開発、日本の Amplify コミュニティ運営のサポートなどに従事。

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する