Step 4: Infrastructure as Code

Overview

This example use IaC backed component from @dinghy/tf-aws to not only generate same diagramm as Step 3: draw.io, but also terraform code.

Source

app.tsx

app.tsx

import { Stack } from "@dinghy/base-components";
import * as awsGeneralResources from "@dinghy/diagrams/entitiesAwsGeneralResources";
import { Waf } from "@dinghy/diagrams/entitiesAwsSecurityIdentityCompliance";

import {
    AwsCloud,
    AwsInstance,
    AwsLb,
    AwsPostgres,
    AwsRegion,
    DataAwsVpc,
    useAwsSubnet,
    useAwsSubnets,
    vpc,
} from "@dinghy/tf-aws";

export default function App() {
    return (
        <WebApp>
            <Client />
            <Cloud>
                <PublicSubnet>
                    <LoadBalancer />
                    <Firewall />
                </PublicSubnet>
                <PrivateSubnet>
                    <Application />
                    <Postgres />
                </PrivateSubnet>
            </Cloud>
        </WebApp>
    );
}

const Postgres = (props: any) => <AwsPostgres {...props} />;

const WebApp = (props: any) => <Stack {...props} />;

const Client = (props: any) => (
    <awsGeneralResources.Client _dependsOn="Load Balancer" {...props} />
);

const Cloud = (props: any) => (
    <AwsCloud {...props}>
        <AwsRegion _display="invisible" region="eu-west-1">
            <DataAwsVpc _display="invisible" id="vpcid1">
                {props.children}
            </DataAwsVpc>
        </AwsRegion>
    </AwsCloud>
);

const PublicSubnet = (props: any) => (
    <vpc.AwsPublicSubnet cidr_block="10.0.0.0/16" {...props} />
);

const PrivateSubnet = (props: any) => (
    <vpc.AwsPrivateSubnet cidr_block="10.10.0.0/16" {...props} />
);

const LoadBalancer = (props: any) => {
    const { awsSubnets } = useAwsSubnets();
    return (
        <AwsLb
            subnets={awsSubnets.map((s) => s.id)}
            _dependsOn={["Firewall", "Application"]}
            {...props}
        />
    );
};
const Firewall = (props: any) => <Waf {...props} />;

const Application = (props: any) => {
    const { awsSubnet } = useAwsSubnet();
    return (
        <AwsInstance
            subnet_id={awsSubnet.id}
            ami="ami-005e54dee72cc1d00"
            _dependsOn="Postgres"
            {...props}
        />
    );
};

Rendered

Diagram

output/app.png

Terraform Code

The terraform code snippet is for illustration only.

output/app/app.tf.json

{
  "terraform": {
    "required_providers": {
      "aws": {
        "source": "aws",
        "version": "5.94.1"
      }
    }
  },
  "provider": {
    "aws": [
      {
        "default_tags": [
          {
            "tags": {
              "iac:stack-title": "Web App",
              "iac:stack-name": "web-app"
            }
          }
        ],
        "region": "eu-west-1"
      }
    ]
  },
  "data": {
    "aws_vpc": {
      "vpcid1": {
        "id": "vpcid1"
      }
    }
  },
  "resource": {
    "aws_subnet": {
      "awssubnet_publicsubnet": {
        "cidr_block": "10.0.0.0/16"
      },
      "awssubnet_privatesubnet": {
        "cidr_block": "10.10.0.0/16"
      }
    },
    "aws_lb": {
      "awslb_loadbalancer": {
        "subnets": [
          "${aws_subnet.awssubnet_publicsubnet.id}"
        ]
      }
    },
    "aws_instance": {
      "awsinstance_application": {
        "subnet_id": "${aws_subnet.awssubnet_privatesubnet.id}",
        "ami": "ami-005e54dee72cc1d00"
      }
    },
    "aws_db_instance": {
      "awsdbinstance_postgres": {
        "engine": "postgres"
      }
    }
  }
}