このハンズオンでは AWS Amplify という Web フロントエンド、モバイルアプリの開発を加速させるサービスを中心としたハンズオンになります。AWS Amplifyや関連するサービスの概要をご理解いただくとともに、AWS Amplify を使用したWeb サイトの構築方法について実際に手を動かして理解を深めることができます。
ハンズオン全体の流れ、前提、ゴールを説明した上で、AWS Amplifyについてご紹介します。
本ハンズオンを進めていくために Cloud9を用いた環境構築を行います。冒頭に解説を行った上で Cloud9 環境の立ち上げや設定、ボリュームの変更を行っていきます。
Node.js や AWS Amplify、Reactアプリケーションが動作する環境を整備していきます。内容の確認やコマンドのコピーに以下の Amplify Docs もご利用いただけます。
Tutorial - Prerequisites - React - AWS Amplify Docs
Tutorial - Set up fullstack project - React - AWS Amplify Docs
API カテゴリーを利用した GraphQL API の構築を行います。コマンドやソースコードのコピーに以下の Amplify Docs を利用します。
Tutorial - Connect API and database to the app - React - AWS Amplify Docs
Auth カテゴリーを利用したログイン機能の構築を行います。コマンドやソースコードのコピーに以下の Amplify Docs を利用します。
Tutorial - Add authentication - React - AWS Amplify Docs
ここまでで構築した Web アプリケーションを Hosting 機能を利用して外部から通信できる状態にします。
Tutorial - Deploy and host app - React - AWS Amplify Docs
ハンズオンで作成したリソースの削除を行い、本ハンズオンのまとめを行います。Next Actionにつなげていただくための参考資料についても紹介します。