AWS Startup ブログ

【開催報告&資料公開】Amplify Week – オンラインハンズオン

こんにちは、スタートアップ ソリューションアーキテクトの松田 (Twitter: @mats16k) です。

AWS Startup Day の連動イベントとして、オンラインハンズオン「Amplify Week」を 4/15(水)〜17(金) の３夜連続で行いました！今回はセッション資料と、実際に頂いた質問とその解答の紹介をしていきます。

なお、イベントページに記載があります通り、AWS Startup Day の Amplify 関連セッションを聴講の上での参加を推奨しておりますので、本記事を見てハンズオンに興味を持たれた方もセッションからご覧頂くのがよろしいかと思います。

Amplify Week

概要

今年はオンラインでの開催となりました AWS Startup Day の連動イベントのオンラインハンズオンです。

本ハンズオンでは、お客さまは Twitter ライクなソーシャルメディアアプリケーションの開発を通して、実践的に AWS Amplify について学ぶことが出来ます。各日程で想定されるスタートアップの調達ステージ(シード/アーリー/ミドル/レイターなど)が設定されており、ステージごとに必要な要素を学ぶ構成になっております。３日間参加することで、AWS Amplify を活用した開発が一通り出来るようになるため、爆速で開発したいスタートアップエンジニアのみならず、これからフロントエンドを学びたいサーバサイドエンジニアの方にもおすすめです。

本ハンズオンは、AWS Startup Day で聴講頂ける「これからはじめるAWS Amplify」および「AWS Amplify 実践編」をご覧になった上での参加を推奨しております。セッションとハンズオンを通して、AWS Amplify の理解を深めていきましょう！

 

聴講推奨セッション

 

公開資料

ハンズオン資料: https://amplify-sns.workshop.aws/ja/

ハンズオン動画:

 

実際に頂いた質問と解答

Q. 本ハンズオンで作成したもので、課金が発生するものはありますか？

A. Amazon Cognito, AWS AppSync, Amazon DynamoDB, AWS Lambda, Amazon Elasticsearch Service, AWS Amplify Console が課金が発生するサービスになりますが、AWS には 無料利用枠 がありますので、ハンズオンでの利用であれば枠内に収まるかと思われます。

※ Amazon Elasticsearch Service など一部のサービスの無料利用枠は、アカウント作成後１２ヶ月間のみ対象となります。詳しくは AWS 無料利用枠 を御覧ください。

 

Q. 改行を含む投稿で、改行が反映されないのですが仕様でしょうか？

A. こちらハンズオンにて利用したアプリケーションの実装上の仕様になります。（Amplify や AppSync の仕様ではありません）

 

Q. EC2 でマシンに IAM Role (Administrator Access) を設定しているのですが、amplify init に失敗します。

A. Amplify CLI は EC2 の IAM Role でなく、ローカルの credentials ファイルに記述された profile を参照するため、 IAM User を作成していただき Access Key/Secret Access Key を設定する必要があります。

 

Q. Cognitoのログイン画面のデザインは変更できるのでしょうか？

A. 可能です。詳しくは コチラ をご参照ください。

 

Q. 作成したアカウント情報はどこに保存されているのでしょうか？

A. Cognito の管理画面から確認することができます。詳しくは コチラ をご参照ください

 

Q. GraphQL と REST が選択できましたが、GraphQL を使うほうがメリットがあるのか、それとも場合によっては REST が良いのかなど、どのように判断すれば良いでしょうか？

A. 一概に言うことは難しいですが、GraphQL を利用する場合、アプリケーションのロジックがフロントエンドに寄ることが想定されます。開発者のスキルセットやアプリケーションの性質的に、アプリケーションロジックがフロントエンドとサーバサイドのどちらに寄るのが都合がいいかについて考えることが、ひとつの判断軸になるかと思います。

 

Q. 前提条件でリージョンは us-east-1 を選択するようになっていましたが、ap-northeast-1では支障ありでしょうか？

A. 仕様上は ap-northeast-1 でも問題ないと思われますが、事前に検証していないためハンズオン手順の一部を変更頂く必要がある可能性がございます。

 

Q. Amplify Console でホストした場合は内部的に Amazon CloudFront や Amazon S3 を使用しているのでしょうか？

A. AWS Amplify Console よくある質問 にありますように CloudFront を活用して配信しておりますが、利用される際にはこれらを意識することなくホスティングすることができます。

 

Q. Amplify Console ですが、ホスティングに関しては CloudFront 管理画面には現れないのでしょうか？

A. Amplify Console でホスティングした場合、CloudFront は Amplify Console のサービスに内包されるため、お客様のアカウントの CloudFront リソースとしては表示されません。

 

Q. 「ホスティングは S3 ではなく Amplify Console が推奨」と伺いましたが、理由を教えてください

A. Amazon S3 および Amazon CloudFront を用いた静的サイトのホスティングは数年に渡って多くの実績がある実装パターンですが、より新しい Amplify Console は多くの付加機能・付加価値が得られます。例えば CI/CD、ドメインの管理、Basic 認証、Gitリポジトリとの接続 ＆ Pull Request プレビュー、デプロイ後の CDN キャッシュ自動クリア、Amplify Env との連携などです。これらは、もし S3 でホスティングする場合には自分で個別に設定、実装、運用する必要が出てきますが、Amplify Console ではそれらの機能を提供しています。ぜひ Amplify Console をホスティング手段として検討いただければ幸いです。

 

Q. ハンズオンで作成したリソースはどの AWS アカウントに作成されているのでしょうか？

A. amplify init (または amplify configure) コマンド実行時に IAM User を作成するために AWS マネジメントコンソールにログインする手順があったと思いますが、その際にログインされた AWS アカウントになります。

 

Q. 手順を実施したままなのですが、何かクリーンナップ手順の実施は必要ですか？課金を避けたいと考えております。

A. 「9.1 章 後片付け」をご参照ください。amplify delete コマンドを実行することでリソースを削除できます。

 

Q. src/graphql 配下に自動生成されたファイルを再度生成させるにはどうしたらよいでしょうか？

A. amplify codegen コマンドにて再生成可能です。

 

Q. 5.4 の createPostAndTimeline の Mutation を実行すると、GraphQL error: Not Authorized to access listFollowRelationships on type Query と出ます。

A. 既存APIへのアクセス権の追加 の手順が実施されていることをご確認ください。

 

Q. PostsBySpecifiedUser.js のディレクトリは src/components でしょうか？Day1 の資料を見ると src/containers に保存しているようです。

A. ご指摘の通り src/containers が正しいパスになります。

※ 現在は修正されております。

 

Q. GraphQLのスキーマファイルとしてはタブとスペースどちらが推奨なのでしょうか?

A. GraphQL の Spec としては大きな違いはないと述べられており、推奨ということはないようです。 https://spec.graphql.org/June2018/

※ コチラで用意したファイルのタブとスペースが混在していたための質問になりますが、現在は修正されております。

 

Q. backend/auth 内の Cognito 関連のファイル template.yml, parameters.json を直接編集しても問題ないでしょうか？

A. 問題ありませんが、ENV 情報をパラメーターとして引き渡しているなど、一部お作法があるためご注意下さい。

 

Q. なぜ Lambda を AppSync と DynamoDB の間に挟むのでしょうか？

A. Lambda には次の役割を担ってもらいます。

  1. createPostMutationを行い、Post Tableに新たなPostを作成
  2. FollowRelationship Tableを読み、APIコールしたユーザーのフォロワーを取得
  3. Timeline Tableに、各フォロワーがフォロイーのPost内容を読み取れるよう、アイテムを作成

このように複数のテーブルに読み書きするためには、AppSync の Mapping Template を VTL でご自身で書いていただくか、Lambda を利用していただく必要があります。今回は Lambda Resolver を利用しています。

 

Q. .gitignore に指定しているもの以外で、パブリックなリポジトリにあげる際に気をつけるべきファイルはありますか？

A. Amplify Project に関する情報に関しては、生成される .gitignore のものを守っていただければと思います。

 

Q. すでに稼働中のシステムで使用している Cognito UserPools を、Amplify で作成する新しいアプリケーションで使用することは可能でしょうか？

A. Amplify.configure メソッドの引数に既存の UserPool の情報を渡して使うことができます。詳しくは Re-use existing authentication resource をご参照ください。

 

Q. 要件がふわっとしている場合など、要件変更や今後の機能拡張のことを考えると AppSync => DynamoDB 直接ではなく、 AppSync => Lambda => DynamoDB にしておくことがいいでしょうか？

A. 将来の柔軟性の観点では、「AppSync を利用することで裏側のリソースが柔軟に変更可能になる」と考えていただいたほうがよろしいかと思います。本ハンズオンでも体験頂ける様に、２日目に Lambda を追加実装するという手順になっております。

 

Q. 自分が作業をしている environment を確認するコマンドはありますか？

A. amplify status コマンドで environment についても表示されるかと思います。

 

Q. GraphQLのファイル schema.graphqlを編集してましたが、src/graphql 配下のファイルとの関係（このコマンドのタイミングで参照、更新されるとか）について何かコメント頂けると嬉しいです。

A. schema.graphql ファイルですが、実際に GraphQL スキーマとして参照されることが必要なタイミングで展開されます。具体的には、amplify push, amplify publish , amplify mock api, amplify codegen といったコマンドの実行時に src/graphql のファイルへ展開・生成されます。

 

Q. アプリケーションを作成する際に、API アクセスで他のリソースを操作することがあると思います。(IoT Core の ThingShadow にデータを書き込むなど)この場合、AppSync の Lambda Resolver を使うことは現実的でしょうか？

A. はい、現実的と言えると思います。理想論としては Lambda Resolver はデータの運搬 (Transport) でなく変換 (Transform) をすることが望ましいのですが、IoT Core 等データソースとして直接設定できないものについては、 Lambda Resolver を使って実装することになるかと思います。

 

Q. 3.1 BootStrapからもう１度やる場合、amplify configure で作った IMA User の削除・作り直しは必要でしょうか？

A. IAM User は使いまわして頂いても問題ありません。

 

Q. バックエンドの構築において、AWS SAM と AWS Amplify はどのように使い分けるのが良いでしょうか。

A. すでにご認識いただいている通り、Amplify と SAM は共に CLI でバックエンドを構築できる機能を持ちます。加えて、Amplify はクライアントライブラリを持っており、バックエンドと統合的に実装を行いやすいというメリットがあります。

また、AppSync や AWS が提供する各種 AI サービス (AWS Recognition や Amazon Translate) などの構築が容易に行えることから、こういったサービスのバックエンドを構築する場合に Amplify CLI は有効です。
AWS SAM はサーバレス構成の実装に強みを持ちます。特に API Gateway、Lambda を用いた REST API の構築を行う場合により直感的なインターフェースで実装が可能です。

明確な正解があるわけではありませんが、観点として

  • AppSync や AI サービス、認証など CLI で構築したバックエンドとフロントエンドを統合的に実装したい場合は AWS Amplify
  • サーバレス構成を前提とした REST ベースのサービスのバックエンドのみの構築をしたい場合は AWS SAM

といった切り分けが考えられます。

 

Q. Cognito でアカウント作成を画面から禁止する場合、UI 側だけのカスタマイズ(非表示)だけで問題ないでしょうか？Cognito 側も変更する必要がありますか？

A. バックエンドである Cognito の設定も変更していただく方が良いかと思います。いくつか方法はありますが、現状、amplify cli からの設定変更がサポートされていないため、CloudFormation テンプレートであるamplify/backend/auth/<resource_name>/template.yml を直接変更することで、アカウント作成を禁止することが出来ます。

 

Q. Amplify Mocking で動作時に作成した生データを確認する方法はありますか？

A. 内部的には SQLite を利用しており、Mocking で利用したデータはamplify/mock-data/dynamodb/fake_us-fake-1.db に保存されます。SQLite に対応したツールで参照してみて下さい。

 

Q. このツイートにある @http ディレクティブですが、裏側では API Gateway と Lambda のスタックをつかっているという認識でいいのでしょうか？

https://twitter.com/jagaimogmog/status/1250982398898040832

A. （Jagaです！）@httpディレクティブでセットアップされる HTTP Resolver は REST API のプロキシとして動作するものです。GraphQL のクエリを受け取り、後段の REST API サーバーに投げ、その結果を GraphQL のクエリを投げたクライアントに渡す、というのがお仕事になります。（後段の REST API サーバーの実装方法については HTTP Resolver は関与しないため、API Gateway はもちろん外部の API も接続可能です）

 

Q. Amplify Console は、よく Github の README に表示させるビルドに成功してるかのバッジを提供していますか？

A. “現時点”で Amplify Console には build badge を表示する機能はありません。該当の Iuuse があがっておりますので、こちらもチェック頂ければと思います。

 

このブログの著者

Kazuki matsuda松田 和樹 (Kazuki Matsuda)

コンテナやビッグデータが得意分野なスタートアップソリューションアーキテクト。好きなサービスは AWS Fargate。最近は AWS Amplify が好きです。