メインコンテンツに移動
AWS ワークショップシリーズ

AWS Amplify Gen2 を使ったウェブアプリケーション構築の学び方

2024-02-01 | AWS ワークショップ<br>Author : 安達 翔平 (さばみそ)

はじめに

AWS に限らず技術を学ぶ一番の方法は「触ってみる」ことですよね ? とはいえ、初心者の方が新しい技術を何もガイダンスなしで触ってみるのは少し難しいかもしれません。ワークショップやハンズオンはそのような時にガイドに沿って「まずは触ってみる」ことができる便利な方法です。そのため、AWS も多くのワークショップを公開していますが、「自分が学びたいことのために何を選んだら良いかわからない」というお声も多く聞くようになりました。

このシリーズではそのような方のために、AWS の技術者がそれぞれおすすめのワークショップを紹介していきます。今回は、Solutions Architect 安達 翔平 (さばみそ)  による 「Amplify Gen2 Workshop」のご紹介です。


X ポスト » | Facebook シェア » | はてブ »

builders.flash メールメンバー登録

毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。 
今すぐ特典を受け取る »

AWS Workshops

皆さん、ワークショップやハンズオンは好きですか ? AWS では AWS Summit や re:Invent などで実施されているワークショップを皆さんが後から見て復習したり、ご自身の環境でお試しいただけるように Web ページで公開しています (一部対応していないワークショップもあります)。

AWS Workshops のページにいくとそのようなワークショップを探すことができます。また、日本語のコンテンツは日本の AWS メンバーの有志が JP Contents Hub というページでまとめてくれています。これらを使ってぜひ皆さんの興味や課題に応じたハンズオンを見つけ、勉強のお役に立てていただければ幸いです。

AWS Amplify って何?

AWS Amplify (Amplify) は、フルスタックのウェブアプリケーションとモバイルアプリケーションを数時間で構築することができるフレームワークや機能を提供しています。Amplify には、CLI や コンソールベースの第一世代と、TypeScript や JavaScript を使って表現することができる第二世代があります。第二世代については、AWS re:Invent 2023 でパブリックプレビューとして公開されています。

今回ご紹介する Amplify Gen2 Workshop では、パブリックプレビュー中の第二世代にフォーカスを当てたワークショップになっています。第二世代について、さらに詳細を知りたい方は、こちらの Blog もご覧ください。

こんな人にオススメ !

このワークショップは、「第二世代の Amplify を使って、素早く AWS でアプリケーションを構築する方法を学ぶ」ためのワークショップです。特に、こんな人にオススメです。

  • AWS について詳しくないが、AWS でアプリケーションを構築したい人

  • Amplify について興味があり、どういうことができるか詳しく知りたい人

  • Amplify 第一世代を利用していたが、第二世代についても興味がある人

どんなことを学べるの?

ウェブやモバイルアプリケーションを構築する際に、考えなければいけない代表的な点がいくつか挙げてみました。

  • DB に対するデータの操作

  • アプリケーションに対する認証・認可の実装

  • データを入力するためのフォームの構築

  • アプリケーションのホスティング環境の構築

  • Continuous Integration (CI) / Continuous Delivery (CD) パイプラインの構築

もちろん、これだけでなく考えなければいけない点は多くあると思います。しかし、挙げた点については、近年では必須の項目として、どのようなアプリケーションにも組み込まれています。

RetailStore ECサイトを例に

このワークショップでは、React と Next.js で構築された RetailStore という架空の EC サイトを題材に、Amplify を使って上記で挙げた項目を素早く実現する方法を学ぶことができます。

Amplify 第一世代で試してみたい方は、こちらの Amplify Gen1 Workshop から学んでいただけます。(内容に差異はほとんどありません)

それでは、いくつかのセクションを具体的に説明してみたいと思います。

Screenshot of the AWS Retail Store demo application displaying a recommended products user interface with product categories on the left and featured items such as an office chair, indoor plant, white heels, accent table, and Valentine candies. Powered by AWS, this UI is for demonstration purposes.

RetailStore のアーキテクチャ図

データモデルとフォームの構築

RetailStore では、データを表すために "Product" と "Category" の 2 つのモデルが必要です。データモデルの定義は、AWS AppSync によって提供される GraphQL API を使って定義していきます。また、データストアは、Amazon DynamoDB (DynamoDB) を利用し、GraphQL で操作されたデータは、全て DynamoDB に格納されるように構築します。

認証・認可

RetailStore では、ユーザーがアカウントを作成してログインできるようにします。Amplify は Amazon Cognito と統合してビルトインの認証コンポーネントを提供していますので、そちらを使った認証・認可の実装を体験します。

認証・認可のメカニズムは、どのアプリケーションでも必須の要件となってきています。しかし、アプリケーションの本質ではないにも関わらず認証・認可の実装は難しく、セキュリティも非常に重要です。さらに、認証基盤の運用なども考えると本来使うべきリソースを割り当てることが難しくなります。Amazon Cognito は、認証・認可の機能をマネージドで提供しており、運用負荷を低減できます。このワークショップで、マネージドな認証・認可の機能をどのように利用できるのかも一緒に体験いただけます。

Screenshot showing a demo Next.js login interface as part of an AWS Amplify Gen2 workshop, featuring a sign in modal for a RetailStore application with fields for email and password.

ホスティング

アプリケーションが構築できると、インターネットに公開するために、サーバー等のリソースが必要になります。Amplify では、Amplify Hosting という機能で、アプリケーションのホスティングを提供しています。このセクションでは、Retail Store を素早くホスティングする方法を体験いただけます。また、Amplify Hosting では、CI/CD も提供しており、ソースコードの変更から自動デプロイまでを体験できます。

CI/CD パイプラインは、近年のアプリケーション開発の現場では、広く採用されている手法です。CI/CDパイプラインがあることで、アプリケーションの変更からビルド、テスト、本番環境へのリリースまで自動で行うことができます。この手法を取り入れることで、バグを素早く発見したり、リリース頻度の向上や、自動化によるエンジニアの作業効率化が期待できます。まだ、CI/CD パイプラインを体験したことがない方であれば、ぜひこのセクションを体験していただき、ソースコードの変更からの自動デプロイの開発者体験を感じてください。

Screenshot of the AWS Amplify Gen 2 workshop interface showing the 'Choose source code provider' step. The interface displays options for starting with an existing app, adding Amplify backend features, customizing backend features, and pushing changes to source control providers like GitHub, BitBucket, CodeCommit, and GitLab.

自分で試すには ?

このワークショップを皆さんの手元で実際に試してみたい場合は、こちら の「ご自分の AWS アカウントを使用される場合」タブに手順を掲載しています。初期セットアップの AWS CloudFormation テンプレートをご用意しておりますので、それを使うことで簡単にセットアップできるようになっています。

一方で、いくつかのAWS サービスを利用しますので、AWS 利用料もかかってきます。不要なコストが掛からないよう、試したあとは必ずリソースを削除するようにお願いいたします。

なお、builders.flash のメールメンバーに登録いただくと毎月抽選で 300 名の方にハンズオンをお試しいただくための無料クーポンを差し上げておりますので、ぜご登録いただいて、当選を狙ってみるのも良いですね !

時間やスキルは?

このワークショップを全て完了させるためには、約 90 分の時間が必要です。また、スキルについては、基本的なアプリケーション開発と JavaScript の知識があれば問題ありません。

まとめ

いかがでしたでしょうか ?
この投稿では、開発者の方が、Amplify 第二世代を使って素早くアプリケーションを構築する Amplify Gen2 Workshop をご紹介しました。

クラウド化が進む中で、アプリケーション開発とクラウド技術の境界線が曖昧になってきており、クラウドを利用することで、アプリケーション開発をより楽にすることができます。Amplify は、普段インフラに携わらない方々でも AWS で素早くアプリケーションを構築できるための強力な機能を提供しています。

ぜひ、これをきっかけにクラウドを活用したアプリケーションの開発も検証いただければと思います。

筆者プロフィール

安達 翔平 (さばみそ)
アマゾン ウェブ サービス ジャパン合同会社
ISV/SaaS ソリューションアーキテクト

Web系の自社サービス、請負開発を経験後、ISV/SaaS 領域のお客様をメインにアーキテクトしてます。
趣味は、サウナ、ロックフェス、スノーボードです。ホームサウナは、ニューウィング錦糸町です。

A person stands at a podium labeled 'AWS Summit Tokyo,' delivering a presentation on stage with a microphone headset. The background includes event signage and dark lighting, highlighting the speaker.