AWS環境でAI関連のシステムのPOC（１）

はじめに

2024年は、生成AIをクラウド環境で動かして試行錯誤するハンズオンを通じて、アウトプットできたらと思っています。POCの内容としては、Webアプリケーションから画像キャプション生成サービスを試す予定です。

システムの概要

ユーザーが画像をアップロードすると、BLIPモデルでキャプションを生成し、それを表示するシステムを検討しています。

概要図は初めてPlantUMLを使って描画しました。配置に少し手間取りましたが、見やすい図が作成できたと思います。

PlantUMLとは

PlantUMLは、シンプルな記法で様々なダイアグラムを迅速に作成できるオープンソースのツールです。
https://plantuml.com/ja/

実際のPlantUML

@startuml architecture overview
!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v17.0/dist
!include AWSPuml/AWSCommon.puml
!include AWSPuml/General/Users.puml
!include AWSPuml/Groups/AWSCloud.puml
!include AWSPuml/Groups/Generic.puml
!include AWSPuml/Groups/GenericAlt.puml
!include AWSPuml/NetworkingContentDelivery/Route53.puml
!include AWSPuml/NetworkingContentDelivery/VPCInternetGateway.puml
!include AWSPuml/NetworkingContentDelivery/VPCNATGateway.puml
!include AWSPuml/NetworkingContentDelivery/ElasticLoadBalancingApplicationLoadBalancer.puml
!include AWSPuml/Database/DynamoDB.puml
!include AWSPuml/SecurityIdentityCompliance/CertificateManager.puml
!include AWSPuml/Compute/EC2.puml
!include AWSPuml/Storage/SimpleStorageService.puml
!include AWSPuml/Groups/VPC.puml
!include AWSPuml/Groups/PublicSubnet.puml
!include AWSPuml/Groups/PrivateSubnet.puml
!include AWSPuml/Containers/ElasticContainerService.puml
!include AWSPuml/Containers/Fargate.puml
!include AWSPuml/Containers/ElasticContainerRegistry.puml
!include AWSPuml/Containers/ElasticContainerRegistryImage.puml

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.4.0
!includeurl ICONURL/common.puml
!includeurl ICONURL/font-awesome-5/gitlab.puml

title アーキテクチャ概要図

skinparam shadowing false
hide stereotype
skinparam linetype ortho
skinparam rectangle {
    BackgroundColor AWS_BG_COLOR
    BorderColor transparent
}

!procedure $stepnum($number) 
<back:royalblue><color:white><b> $number </b></color></back>
!endprocedure

rectangle "$UsersIMG()\nユーザ" as users

AWSCloudGroup(cloud){
  GenericGroup(components1,Environmental specific resources(dev, staging, production)){
    rectangle "$Route53IMG()\nCustomDNS" as route53
    rectangle "$SimpleStorageServiceIMG()\nS3 Images" as s31
    rectangle "$CertificateManagerIMG()\nACM TLS Certificate" as acmcertificate   
    VPCGroup(vpc,VPC){
      PublicSubnetGroup(publicSubnet,Public Subnet A/B) {
        rectangle "$EC2IMG()\nBastion" as bastion
        rectangle "$VPCInternetGatewayIMG()\nInternet Gateway" as internetgateway 
        rectangle "$ElasticLoadBalancingApplicationLoadBalancerIMG()\nLoad Balancer" as loadbalancer 
        rectangle "$VPCNATGatewayIMG()\nNAT Gateway" as natgateway
      }
      PrivateSubnetGroup(privateSubnet,Private Subnet A/B){
        rectangle "$ElasticContainerServiceIMG()\nECS" as ecs
        rectangle "$DynamoDBIMG()\nDynamo DB\nDatabase" as dynamodb2
      }
    }
  }
  GenericGroup(components2,Shared resources(dev, staging, production)){
    rectangle "$DynamoDBIMG()\nDynamoDB\nTF Lock" as dynamodb1
    rectangle "$ElasticContainerRegistryIMG()\nECR" as ecr2 
    rectangle "$SimpleStorageServiceIMG()\nS3 tf state" as s32
  }
}
agent "BLIP-2 Model on Replicate\n[API]" as api1
together {
  FA5_GITLAB(gitlab,gitlab) #OrangeRed
  rectangle "$UsersIMG()\nAdmins" as admins
}

'# ユーザアクセス
users-->route53 : $stepnum("1") : DNS
users-->internetgateway : $stepnum("2") : HTTPS 
users-->s31 : HTTPS\n(Retrieve images)

admins-->bastion : SSH
admins-->gitlab : HTTPS

internetgateway-->loadbalancer : $stepnum("3") : HTTPS

loadbalancer-->acmcertificate
loadbalancer-->ecs : $stepnum("4") : HTTP

natgateway-->ecr2 : TCP\n(Pull Docker images)
natgateway-->s31 : HTTPS\n(S3 image upload)

gitlab-->dynamodb1
gitlab-->s32
gitlab-->ecr2 : TCP\n(Push Docker images)

ecs-->dynamodb2
ecs-->natgateway : HTTPS(S3 Image upload)/TCP(Pull Docker Images)
natgateway-->api1

@enduml

まとめ

今回はPlantUMLでシステムの概要図を作成しました。次回は実際にアプリケーションを構築し、生成AI APIを試してみたいと思います。