Amplify CLI version 8.3.1 を使って Amplify 入門ハンズオンやってみた
テクニカルサポートチームの川崎です。
Amplify 入門ハンズオンについて
私たちのチームが担当するAWSサービスの1つに AWS Amplify があります。
お客様からお問い合わせをいただくのですが、 正直なところ、以前はサービスの全体像を掴みかねており、お問い合わせの内容を、深く理解するのが難しいサービスとなっていました。
Amplify学習リソース集 を参考に、 サービスの理解を深めていたのですが、 掲載されているリンクに 「AMPLIFY SNS WORKSHOP」 という非常に内容の深いコースがあります。
こちらは、私の個人的な感想ですが、その分野の初心者が最初に取り組むには少々ハードルが高い内容 となっていました。
2022年2月に Amplifyの入門ハンズオン が公開されました。 フロントエンドが専門でなくても、非常に取り組みやすい内容になっていましたので、 さっそくチームのメンバーと共に取り組んでみました。
Amplify CLI バージョン8 がリリースされました
2022年4月7日に Amplify CLI の バージョン 8 がリリースされました。
ChangeLog によると、 Amplify CLI のバージョン8.0.0 は、 インストール時に依存関係をたどる代わりに、 バイナリ実行可能ファイルをダウンロードするようになりました。 そのおかげで、インストール時間や実行時間が短縮され、 クライアントマシンでのストレージ使用量も削減された、とのことです。
Change Log
npm install -g @aws-amplify/cli now downloads a binary executable instead of traversing npm for all dependencies.
Benefits:
pkg cli decreases installation time by 92.63% from 216.81s to 15.974s.
pkg cli enjoys a 32.9% runtime performance benefit for example on the amplify --version command, from 1.608s to 1.079s.
pkg cli decreases storage use on client machines by 35.71% from 924M to 594M.
pkg cli guarantees parity across all users for a specific version regardless of consumption mechanism (npm vs raw pkg cli download)
pkg cli guarantees dependencies are tested, preventing supply chain attacks a la ua-parser-js and colors.
Amplify CLI の直近バージョンのリリース履歴
8.3.1 2022-05-27 8.3.0 2022-05-24 8.2.0 2022-05-10 8.1.0 2022-04-29 8.0.3 2022-04-27 8.0.2 2022-04-18 8.0.1 2022-04-11 8.0.0 2022-04-07 7.6.26 2022-03-23 7.3.0 2021-11-15 6.0.0 2021-09-18 5.0.0 2021-06-16 4.37.0 2020-12-01
改めて 入門ハンズオンについて
Amplify 入門ハンズオンは、 AWS Hands-on for Beginners シリーズのコンテンツとして、 2022年2月に公開されました。
AWS Hands-on for Beginners シリーズ （別名：初心者向けハンズオン）は、2022年5月現在、22個のコンテンツが提供されています。
AWSの多様なサービスを反映して、 非常に幅広い内容となっており、 スキルアップしたい方にオススメのコンテンツです。 オンデマンド形式で提供されているので、 わからなかった部分を繰り返し確認できるのが、サービスを深く理解できる理由ではないかと考えています。
Amplify 入門ハンズオン の公開後に、Amplify CLI の新バージョンがリリースされていますので、 以下の内容では、バージョン情報を反映しています。
Amplifyの構成要素の変更
Amplify 入門ハンズオンのスライドでは、Amplify の構成要素は次の内容でした。
- Amplify ライブラリ
- Amplify CLI
- Amplify Console
- Amplify Admin UI
※ Amplify 入門ハンズオンのスライドより引用
先日行われた AWS Summit Online 2022 の Amplify セッションの資料では、下記の内容に変更されておりました。
Level Up! AWS Amplify〜 爆速かつスケーラブルなフルスタック Web / モバイルアプリケーションの開発 〜(AWS-47)
※ AWS Summit Online 2022の無料登録が必要です。
AWS Amplify の主要機能 (p.5)
- Amplify CLI
- Amplify Libraries
- Amplify Studio
- Amplify Hosting
「Amplify Console」は 「Amplify Hosting」と名称が変更になったようです。 また「Amplify Admin UI」の機能は「Amplify Studio」へと、発展的に統合されたようです。
名称が変わっても、混乱しないようにしたいですね。
ハンズオン実行
それでは、ハンズオンのスライドを確認しながら、手順を実行していきます。
インストールするモジュールのバージョンを下記の内容に変更しました。
環境構築の流れ
- Node.js 環境のセットアップ（インスタンスにインストール済み）
- $ node -v
- Amplify CLI のインストールとセットアップ
- $ npm install -g @aws-amplify/cli@8.3.1
- $ amplify configure
- Reactアプリの作成
- $ npx create-react-app hands-on-todo
- Amplify Project の初期化コマンド
- $ amplify init
- Amplify Framework のインストール
- $ npm install aws-amplify@4.3.23 @aws-amplify/ui-react@2.18.2
FE/API/DB編の手順
- Amplify CLI でAPI の追加
- $ amplify add api
- AWS への反映
- $ amplify status
- $ amplify push
- Amplify Docs 内にあるサンプルコードを追加
- 動作確認
- $ npm start
Auth編の手順
- Amplify CLI でAuth の追加
- $ amplify add auth
- AWS へ反映
- $ amplify status
- $ amplify push
- Amplify Docs 内の記載内容の通りにコードを修正
- 動作確認
- $ npm start
Hosting編の手順
- アプリケーションのホスティング
- $ amplify add hosting
- クラウドリソースの変更とホスティングするアプリのビルド、デプロイ
- $ amplify publish
- 動作確認
まとめ
Amplify CLI の開発の進展に伴い、インストールするモジュールのバージョン変更などを行いました。
私は、フロントエンドが専門ではないので、 当初は Amplify を理解するのは難しかったです。
このハンズオンを1回やっただけでは、理解が追いつかなかったのですが、 ハンズオンを3周ほど実行することで、理解が深まりました。
amplify add *
で、サクッと 機能が追加できてしまうのは、Amplify の素晴らしさだと思います。
Amplify は奥が深く、まだまだ進化中ですので、今後も理解を深めていきたいですね。
本ブログの内容が、みなさまのお役に立てたら幸いです
アノテーション株式会社について
アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。
