こんにちは、ゲームソリューショングループのsoraです。
今回は、Amplifyで手軽にアプリを作って試す「Amplify Vue Workshop」をやってみたことについて書いていきます。
コースの概要
Amplifyを使って、Webアプリのホスティング、認証機能の実装を行います。
オプションとして、チャットの実装やAIサービスを使ったAI機能の実装、地図アプリの実装などがあります。
※Amplify Vue Workshopから引用
構成図の中で複数サービスが出てきますが、CodeCommitとAmplify以外は全てAmplify CLIでコマンドを実行するだけで作成が可能です。
以下がコースの概要です。
コースの所要時間は約3時間です。
- 前提知識/条件
- 環境構築/Vue アプリの作成
- ホスティング
- 認証の実装
- チャットの実装（オプション）
- AI の実装（オプション）
- 地図の実装（オプション）
- 片付け
必要な前提知識
フロント部分をVueで作成するもののコピペで完結するため、バックエンドやインフラエンジニアの方も前提知識なしでAmplifyを体験することができます。
私もVueの知識はほとんどありませんが、Amplifyの動きの部分は理解することができました。
コースの各章の紹介
どういったものを実装しながら学べるのかを紹介します。 実際に実装しながら、詳細に学びたい方は実際に受講してみてください。
1.前提知識/条件
Amplifyとはなにか、Amplifyのコンポーネントなどの説明があります。
- Amplify CLI：Amplifyでバックエンドをインタラクティブに作成・管理するCLI
- Amplify Libraries：AmplifyアプリとAWSを結合するためのOSSライブラリ
- Amplify Hosting：サーバレスなWebアプリをホスティングするサービス CICDの機能も持つ
- Amplify Studio：Amplifyでバックエンドとコンテンツを管理するためのツール
2.環境構築/Vue アプリの作成
Cloud9上に環境を構築する流れが記載されています。
ローカル環境で実施することも可能です。
Amplify CLIでは、以下コマンドでアプリへの機能追加や更新を行います。
# アプリへの機能追加
$ amplify add <category-name>
# 機能の設定更新
$ amplify update <category-name>
# 機能の削除
$ amplify remove <category-name>
# プロジェクト全体の削除
$ amplify delete3.ホスティング
Amplify Hostingを使って、CodeCommitにpushした内容をS3とCloudFrontを使って配信します。
個別にCodePipelineなどでCI/CDの自動化をせずとも、Amplify HostingでCI/CDの機能も実現できるのは便利だと感じました。
この項目では、マネジメントコンソール上でAmplifyやCodeCommitを操作する必要がありますが、以降はAmplify CLIで構築できてしまいます。
4.認証の実装
Cognitoを利用して、認証機能を実装します。
# Auth機能の追加
$ amplify add auth
# AWS上へ反映
$ amplify push機能追加時の設定は、インタラクティブに選択していくことで設定できます。
個別にconfigファイルを修正したり、マネジメントコンソールで設定を入れたりする必要はありません。
5.チャットの実装（オプション）
GraphQLのエンドポイントにAppSync、データストアにDynamoDBを使用して、チャットアプリを実装します。
# GraphQL APIと自動設定されるデータベースの作成
$ amplify add api
# AWS上へ反映
$ amplify pushここでも機能追加時の設定は、インタラクティブに選択していくことで設定できます。
6.AI の実装（オプション）
以下の機能をそれぞれ実装していきます。
AIサービスを使って動くものが作れるので、AIサービスを学ぶこともできました。
全てAmplify CLIのコマンドは同じですが、インタラクティブに選択していく部分で選択するものによって、様々な機能を実現することができます。
テキスト翻訳
Translateを使って、入力した英語の文章に対して、リアルタイムで日本語に翻訳する機能を実装します。
# テキスト翻訳の機能の追加
$ amplify add predictions画像内の物体検知・画像内のテキスト検知
Rekognitionを使って、アップロードした画像の物体検知を行い、画像内のものが何であるかを特定します。
同じくRekognitionを使って、画像内のテキストの検知も行います。
# 画像内の物体検知やテキスト検知をする機能を追加
$ amplify add predictionsテキスト解析
Comprehendを使って、入力した文字に対して、言語の判定やキーフレーズの判定などの文章解析を行います。
# 文章解析の機能を追加
$ amplify add predictionsテキストスピーチ
Pollyを使って、入力した文章を音声で再生することができます。
# テキストスピーチの機能を追加
$ amplify add predictions7.地図の実装（オプション）
Locationでマップを作成して地図を表示します。
# Geoカテゴリをセットアップ
$ amplify add geo最後に
今回は、Amplifyで手軽にアプリを作って試す「Amplify Vue Workshop」をやってみたことを記事にしました。
Amplifyを触ってみたい方におすすめで、少しAIサービスも実装する部分もあるため、AWSのAIサービスを使って動くものが見たい方にもおすすめです。
興味がある方はぜひ試してみてはいかがでしょうか？
3
