最近、AWS Amplify Studioという便利なツールが注目を集めています。AWS Amplify Studioは、ローコード開発のアプローチを取り入れており、誰でも簡単にWebサイトを作成できるクラウドベースのプラットフォームです。私も最近、AWS Amplify Studioを使って自分のWebサイトを作ってみました。この記事では、その手順と経験を共有したいと思います。
AWS Amplify Studioとは？
AWS Amplify Studioは、AWSが提供するローコード開発環境です。これを使えば、プログラミングの知識がなくても、直感的なインターフェースを通じて簡単にWebサイトを構築できます。バックエンドの処理やインフラストラクチャのセットアップも自動化されており、開発者はビジネスロジックに集中できます。
ウェブサイト構築の手順
以下は、AWS Amplify Studioを使用してWebサイトを構築する基本的な手順です。
プロジェクトの作成: AWS Amplifyコンソールにアクセスし、新しいプロジェクトを作成します。プロジェクトには名前と説明を付けてスタートします。
テーブルデータ定義: アプリが使用するデータモデルを定義します。テーブル名とフィールドの一覧を設定します。これをデプロイすることにより、DynamoDB、AWS AppSyncに対してテーブル定義と、Webサイトからのアクセス用インタフェース（GraphQL）が自動生成されます。
Webページデザインの追加①: Figmaで作成したモックページを取り込んで、Webページとすることができます。この画面の項目とデータベースのフィールドをバインドすることにより、簡単にページが作れます。
Figmaの画面
Amplify Studioの画面
Webページデザインの追加②: Figmaのページとは別に、作成したテーブルに対するデータ追加・更新のページが、Amplify Studio内に自動で作成されてきます。入力項目の要素を選択したり、項目位置を変えたりはできますが、ページレイアウトのカスタマイズ性はそれほど高くなく、色などは変更できません。ただ、マスタ業務など、単純に入力するだけなら、都合は良いと思います。
Webサイトをローカルでビルド: ローカル環境にreact.jsやvue.js等の開発環境を用意して、AWSのAmplify CLI機能を使って、デザインしたページとデータモデルを、ソースコードとして取得します。react.jsを指定した場合は、デザインした部品が「コンポーネント」として生成されるため、これをラップ（overrides）して、ビジネスロジックや、細かな定義を加えてページを完成させます。
サイトのデプロイ: ページが完成したら、AWS Amplify Studioのデプロイ機能を使用してWebサイトを公開します。これにより、誰でもアクセス可能なWebサイトが完成します。
実際にやってみると、この5番の開発になかなかクセがあり、ドキュメントも十分にないこともあって苦戦しました。2021年からのGAなので、ネット情報もすくなく。。。
やってみた所感
今回、初めて触るreactの勉強も兼ねていたので、時間がかかりましたが約2週間ほどで、次のような内容を作ってみました。
実際に触っていた感じ、使いどころが限られる気がしました。
× 業務で使用するアプリケーションには不向き。よく見る「表」デザインの画面などは、Figmaからのコンポーネント起こしで作りづらい。
〇 会社のブランディングページのような、シンプルな構成のページか、Todoアプリのように、単純にデータ登録を繰り返すだけなら、PCとスマホの両環境でできるのでよい。
〇 初期の立ち上げは慣れれば非常に簡単。従来、API Gateway、Lambda、DynamoDBのストリームなどで構築していたバックエンドの構成が一発で出来上がる。
具体的な手順の説明は、後述のサイトに丸投げます＾＾
