お絵描きするだけでアプリが作れる!? 新機能AWS Application Composerを試してみた

この記事は　[AWS Community Builders Advent Calendar 2022](https://adventar.org/calendars/7633) ３日目の記事です。

※AWS Community Buildersについてはこちらをご覧ください。

https://aws.amazon.com/jp/developer/community/community-builders/

---

[AWS re:Invent 2022](https://reinvent.awsevents.com/)にて昨日未明、アマゾンのCTOワーナー氏の基調講演が大変盛り上がりました。
恒例の茶番劇（失礼ｗ）から始まり、主にサーバーレス系の新機能がもりもりお披露目。

中でも今回は、注目を集めた **AWS Application Composer** を軽く紹介しつつ実際に触ってみます！
![スクリーンショット 2022-12-02 2.02.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/1e767aab-a5d9-4c98-6d95-a1d5dbdea2cd.png)


# 未来を感じる新機能「Application Composer」

https://aws.amazon.com/jp/blogs/compute/visualize-and-create-your-serverless-workloads-with-aws-application-composer/

簡単に言うと、 **「キャンバス風のGUIでAWSサービスアイコンをポチポチ動かして、アーキテクチャ図をお絵描きするだけで実際のアプリケーション用リソースが構築＆管理できてしまう」** というビックリ機能です。

上記AWS Newsブログのほか、クラスメソッドさんも分かりやすい日本語記事を書いてくれているので是非ご覧ください。

https://dev.classmethod.jp/articles/aws-application-composer/


# 実際に使ってみる

すでに東京リージョン含め、プレビュー版が提供されています。
マネコンから検索すると出てきました。
![スクリーンショット 2022-12-03 15.56.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/223699ad-89e4-fe09-09e7-1dd3e6ab3319.png)

Application Composerコンソールのトップ画面。
`Create project` してみます。
![スクリーンショット 2022-12-03 15.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/04e1b6bc-7a75-df0e-b931-3d8b6af1ad29.png)

プロジェクト作成画面。
作業端末のローカルフォルダーを自動同期してくれる「Local file system connection mode」なる設定があるようです。今回はオフにしておきます。
![スクリーンショット 2022-12-03 16.01.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/86a86698-4478-ac68-eac6-d3ba0569fd17.png)

こんなキャンバス風の専用コンソールが出現します。
右上にクイックツアーも表示してくれます。
![スクリーンショット 2022-12-03 16.02.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/0d125a31-1eaa-04b7-c1a3-9f0dc9f74d0d.png)

よくあるSPAなWebアプリでも作ってみましょうか。
左ペインからS3バケットをドラッグ＆ドロップして、右ペインで設定を入れます。ホスティング機能を有効にしました。
![スクリーンショット 2022-12-03 16.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/3521fd43-962f-1283-a64b-2d4610b0e14c.png)

こんな感じで、REST APIベースのサーバーレス構成を組んでみました。
![スクリーンショット 2022-12-03 16.11.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/770d7150-be2d-5c64-570f-564d085fbe4d.png)

右上の `Menu` から `Save Changes` すると、ローカル端末上にYAMLファイルを保存できます。
これを使ってSAM CLIで実際のリソースをデプロイしてね、という使い方のようです。
![スクリーンショット 2022-12-03 16.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/33a4c411-4ab7-b6cc-d225-eeb8d8a24159.png)

ちなみにYAMLの中身は以下のようになっていました。
```yaml
Resources:
  WebServer01:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Sub ${AWS::StackName}-webserver-${AWS::AccountId}
      WebsiteConfiguration:
        IndexDocument: index.html
  BFF:
    Type: AWS::Serverless::Api
    Properties:
      Name: !Sub
        - ${ResourceName} From Stack ${AWS::StackName}
        - ResourceName: BFF
      StageName: Prod
      DefinitionBody:
        openapi: '3.0'
        info: {}
        paths:
          /:
            get:
              x-amazon-apigateway-integration:
                httpMethod: POST
                type: aws_proxy
                uri: !Sub arn:${AWS::Partition}:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${API.Arn}/invocations
              responses: {}
      EndpointConfiguration: REGIONAL
      TracingEnabled: true
      Auth:
        Authorizers:
          Auth:
            UserPoolArn: !GetAtt Auth.Arn
  API:
    Type: AWS::Serverless::Function
    Properties:
      Description: !Sub
        - Stack ${AWS::StackName} Function ${ResourceName}
        - ResourceName: API
      CodeUri: src/Function
      Handler: index.handler
      Runtime: nodejs16.x
      MemorySize: 3008
      Timeout: 30
      Tracing: Active
      Events:
        BFFGET:
          Type: Api
          Properties:
            Path: /
            Method: GET
            RestApiId: !Ref BFF
      Environment:
        Variables:
          TABLE_NAME: !Ref DB
          TABLE_ARN: !GetAtt DB.Arn
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref DB
  APILogGroup:
    Type: AWS::Logs::LogGroup
    DeletionPolicy: Retain
    Properties:
      LogGroupName: !Sub /aws/lambda/${API}
  DB:
    Type: AWS::DynamoDB::Table
    Properties:
      AttributeDefinitions:
        - AttributeName: id
          AttributeType: S
      BillingMode: PAY_PER_REQUEST
      KeySchema:
        - AttributeName: id
          KeyType: HASH
      StreamSpecification:
        StreamViewType: NEW_AND_OLD_IMAGES
  Auth:
    Type: AWS::Cognito::UserPool
    Properties:
      AdminCreateUserConfig:
        AllowAdminCreateUserOnly: false
      AliasAttributes:
        - email
        - preferred_username
      UserPoolName: !Sub ${AWS::StackName}-Auth
Transform: AWS::Serverless-2016-10-31
```

さすがに開発資源を多少なりとも作り込まないとデプロイは出来ない気がしますが、Cloud9で試してみます。
環境を立ち上げ、先ほどのYAMLを `template.yaml` という名前でアップロードして `sam build` を実行。ここまでは通ります。
![スクリーンショット 2022-12-03 16.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/bc8741e5-de1d-a4c6-5383-6371153cd4e4.png)

そして `sam deploy --guided` を走らせると、案の定「APIがねーよ！」エラーで終了してしまいました。
逆に考えると、あとはアプリケーション資材だけ置いてあげれば、先ほどのキャンバスでお絵描きしたアーキテクチャーをお手軽にデプロイ出来るということですね。これはかなり未来的では!?
![スクリーンショット 2022-12-03 16.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633856/c81d774e-f93b-0352-ed69-f0e384a42773.png)


# まとめ
このApplication Composerで作成できるリソースはまだサーバーレス系が中心ですが、こんな風に様々なAWSリソースをGUIでローコード構築できるようになれば、ますますインフラエンジニアは今後不要になるかも？と思えてしまいます。

今回のre:Inverntでは、他にもインフラレイヤーを抽象化するような新機能がいくつも登場したこともあり、今後のキャリアを色々と考えさせられると同時に、クラウドが描く未来に非常にワクワクしました。

#### VPCのNWレイヤーを抽象化する **「VPC Lattice」**

https://qiita.com/minorun365/items/7f73aa1fe1ef2ca0c2c7

#### ECSのサービス間通信を手軽に実現する **「ECSサービスコネクト」**

https://qiita.com/minorun365/items/f450ed195e2e8c3e1c10