Zenn
🐙

AWS App Studioを使って商用レベルのアプリを2時間で作成・デプロイする

2024/12/03に公開
AWS
reinvent2024
appstudio
tech

概要

AWS re:Invent 2024 の「AIM326-R Build & Deploy an enterprise-grade app in two hours with AWS App Studio」参加レポです。タイトルの通り、App Studioというローコードプラットフォームを利用して
2時間でエンタープライズレベルのアプリを作成するというセッションでした。

App Studio とは

App Studioとは、AWSを利用した、ローコードプラットフォームで下記のコンセプトでサービスを作成できる。

  • UI
    • Page
    • Components
  • Logic
    • Autometion
      （おそらく裏でStepFunctionsが動いている？）
    • Action
  • Data
  • Fileds
  • Data Actions
  • Connector
    AWSのサービスや外部のサードパーティサービスとのインターフェース
    App Studioのコンセプト

AppStudioの特徴

セッションの中では、下記の２つを押していました。

  • 200以上の AWSのサービス及び、3rdパーティサービスと統合
  • IAMやOuthを利用したセキュリティの確保

AppStudioは誰に向けたサービスなのか

セッション内では、「Technical professionals who were familler with cloud, but dont write code full time」と紹介されていました。直訳すると「クラウドに精通しているが、フルタイムでコードを書くわけではない技術専門家」

ハンズオンの紹介

概要

AppStudioを使って下記の４つのモジュール（≒機能？）を持つ領収書管理アプリを作成するハンズオンでした。
ハンズオンを通して、Connector、UI、Logicの作成とデプロイまで体験できたので、紹介します。

  • Receipt Processing
  • Campaign Generator
  • Embed Visuals using QuickSigh
  • Embed 3rd Party Charts

ハンズオンで作成するシステム概要

Connector作成（S3）

まず他のAWSサービスや外部のサービスと接続するための「Connector」という部品を作ります。
AppStuudioのUIを選択していって最後にS3名などの情報を入力する。
Connector作成01
Connector作成02
Connector作成03

UI作成（S3アップロード）

下記の画像のように事前に定義されたコンポーネントを配置するだけでS3に画像をアップロードする機能が作れました。
アップロード先のS3は事前に作成した、Connectorというインターフェースの部品を指定する。
UI作成
UI作成

Logic作成(S3からのデータ取得)

ロジック作成画面の使用感はほぼほぼStep Functionsと変わらないかなという印象でした。
UI作成
UI作成
Logic作成

デプロイ

App Studioのコンソールのデプロイボタンを押すとPublish Centerという画面に遷移して、10分程度でテスト環境に自動でデプロイされます。デプロイ完了メールが来るのが個人的には便利だなーと思いした。デプロイ後はURLをクリックすると環境にアクセスできるようになります。(Publish Centerでの本番環境にもデプロイまでは試せなかったです。)
デプロイ

感想

簡易的なUIデザインとAWSを活用してバックエンドを実装できるツールといった感じでした。ただ、UIは限られているので、凝ったデザインにしたいみたいな要件がある場合は難しそう...
セッション終わりにApp StudioのAnshika TandonさんにFigmaやAdobe XDのようなデザインツールからインポートしてコンバートできるようなプラグインはないか聞いてみましたが、現在はないものの技術的には可能だと思うとのことで、今後検討するとのことでした。

Discussion