見出し画像

Amplify SNS Workshopをやった感想

Amplify SNS Workshopとは、「Twitterライクなソーシャルメディアアプリケーションの開発を通して、実践的に AWS Amplify について学ぶことが出来る」ハンズオンです。

対象者を初心者としているので、とっつきやすいと思います。下記のページを見ながら試してみました。

Amplifyについて

「AWS Startup Day 2020 技術系セッション | これからはじめる AWS Amplify 」で紹介されてるので見てみてください。

開発環境について

始める前にNode.js/npm、Java、Amplify CLIのインストールが必要です。自分はJavaの環境がなかったので下記noteの手順でインストールしました。

Amplify Mockingについて

ローカル環境で動作確認ができる機能です。

amplify mock api コマンドを実行するとエンドポイントが作成され、ブラウザからAPI に対して GraphQL クエリなどをローカルで実行できます。

詳しくはこちら↓

悩んだこと

スクリーンショット 2020-07-11 16.33.22

amplify mock api コマンド実行後、作成されたエンドポイントへアクセスしても表示されなくて悩みました。

画像2

running at で表示された http://192.168.11.4:20002 ではなく http://localhost:20002 へアクセスすることで表示されました・・😓

画像3

資料にこう書いてあったから分からなかった・・。

AppSync Mock endpoint is running at http://XXX.XXX.XXX.XXX:20002と表示されます。http://XXX.XXX.XXX.XXX:20002の部分をコピーして、ブラウザの検索バーに貼り付けアクセスします。
https://amplify-sns.workshop.aws/ja/30_mock/20_post_back_end.html

無事起動すると、ブラウザからPostを作成することができます。操作方法はハンズオン資料に丁寧に書かれているので迷わずできました。

フロントエンド開発

ハンズオン資料にあるReactのコードを書くと、こんな画面が実装できます。

スクリーンショット 2020-07-11 17.49.02

・サインイン
・投稿(140文字以内)
・投稿一覧表示
・ユーザーごとの投稿一覧表示
・サインアウト

ちゃんと文字数オーバーするとエラーがでます。

スクリーンショット 2020-07-11 17.52.34

その後、数コマンド実行するだけで簡単にデプロイができました🎉

AWSコンソールから反映を確認

作成したwebページ側からコメントを投稿するとDynamoDBに内容が反映されています。

スクリーンショット 2020-07-12 11.30.28

また、Amplify Console を見るとデプロイしたサイトが反映されてました。

スクリーンショット 2020-07-12 11.30.57

さいごに

AmplifyもGraphQLも初めて触ったので、「ハンズオン資料を見ながらやったらなんか出来た・・」という感想です。

とてもお手軽でよいのですが、理解が浅くほんとうに実務で使える技術なのか判断が付きませんでした。

個人開発や、簡単なものをお手軽にデプロイしたい時にはよいかもしれません。


スキ頂けると嬉しいです〜