PlantUML Web Server

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified.puml>
!include <awslib/Compute/all.puml>
!include <awslib/mobile/all.puml>
!include <awslib/general/all.puml>
!include <awslib/GroupIcons/all.puml>
!include <awslib/Storage/all.puml>
!include <awslib/ManagementAndGovernance/all.puml>
!include <awslib/CustomerEngagement/all.puml>
!include <awslib/MachineLearning/all.puml>
!include <awslib/NetworkingAndContentDelivery/all.puml>
!include <awslib/Database/all.puml>
!include <awslib/ApplicationIntegration/all.puml>
!include <awslib/ApplicationIntegration/SNS.puml>
!include <awslib/CustomerEngagement/SESEmail.puml>
!include <logos/github-icon>
!include <logos/chrome>

Users(Developeers, "Developeers", " ")

package "GitHub" {
  "<$github-icon>\nfrt (Next.js)" as GitHubFrt
  "<$github-icon>\nres (Resouces)" as GitHubRes
  "<$github-icon>\napi (Express.js)" as GitHubApi
}

Developeers-->GitHub: push

Users(Users, "Users", " ")

package "AWS" {
  package "frt" {
    EC2ContainerRegistry(ECR_Frt, "Elastic Container Registry Frt", "")

package "Elastic Beanstalk Frt" {
      ElasticBeanstalk(EB_Frt, "Elastic Beanstalk (Frt)", "")
      ElasticLoadBalancing(ELB_Frt, "Elastic Load Balancing (Frt)", "")
      EC2(EC2_Frt_1, "EC2-Frt-1", "")
      EC2(EC2_Frt_N, "EC2-Frt-...n", "")

ELB_Frt-->EC2_Frt_1: forward
      ELB_Frt-->EC2_Frt_N: forward
      EB_Frt-->ECR_Frt: pull
      EB_Frt-->EC2_Frt_1: deploy
      EB_Frt-->EC2_Frt_N: deploy
    }

GitHubFrt--->ECR_Frt: push
    GitHubFrt--->EB_Frt: deploy
  }

package "res" {
    CloudFront(CF_Res, "CloudFront", "")
    SimpleStorageServiceS3(S3, "S3", "")
    GitHubRes--->S3: sync
    GitHubRes--->CF_Res: Invalidate
    CF_Res->S3: load
  }

package "RDS" {
    Route53RouteTable(Route53_LoadBalancing, "Route53 Load Balancing", "")
    RDS(RDSPrimary, "RDS Primary", "")
    RDS(RDSReplica1, "RDS Replica 1", "")
    RDS(RDSReplicaN, "RDS Replica ...n", "")

Route53_LoadBalancing--->RDSReplica1: SELECT
    Route53_LoadBalancing--->RDSReplicaN: SELECT
    RDSPrimary-->RDSReplica1: sync
    RDSPrimary-->RDSReplicaN: sync
  }

package "api" {
    EC2ContainerRegistry(ECR_Api, "Elastic Container Registry Api", "")

package "Elastic Beanstalk Api" {
      ElasticBeanstalk(EB_Api, "Elastic Beanstalk (Api)", "")
      ElasticLoadBalancing(ELB_Api, "Elastic Load Balancing (Api)", "")
      EC2(EC2_Api_1, "EC2-Api-1", "")
      EC2(EC2_Api_N, "EC2-Api-...n", "")

ELB_Api-->EC2_Api_1: forward
      ELB_Api-->EC2_Api_N: forward
      EB_Api-->ECR_Api: pull
      EB_Api-->EC2_Api_1: deploy
      EB_Api-->EC2_Api_N: deploy
      EC2_Api_1-->RDSPrimary: INSERT
      EC2_Api_1-->Route53_LoadBalancing: SELECT
    }

GitHubApi--->ECR_Api: push
    GitHubApi--->EB_Api: deploy
  }

}

"<$chrome>\nBrowser" as Browser

Users-->Browser: access
Browser-->ELB_Frt: 1. request html
Browser-->CF_Res: 2. request static resources
Browser-->ELB_Api: 3. request ajax
@enduml

🎉 Discover the future PlantUML Web Editor! 🚀 PNG SVG ASCII Art