前回は、AWS CDK で URL の接続回数をカウントするアプリを作成しました。

今回は、テストで作成しているアプリを修正し、テーブルとしてブラウザに表示させます。

テーブルをブラウザに表示させる

cdk-dynamo-table-viewer をインポートします。

※cdk-dynamo-table-viewer は、デモンストレーション目的で作成されたものであり、DynamoDB テーブルのコンテンツを認証なしに誰でもアクセス可能な状態にしてしまうので商用利用しないでくださいとのことです。

まずは、cdk-dynamo-table-viewer をインストールします。

ターミナルをプロジェクトのディレクトリに移動し、 npm install cdk-dynamo-table-viewer を実行します。

lib フォルダの test-aws-cdk-stack.ts を開きます。

TableViewer Construct を追加します。

import { Stack, StackProps, aws_lambda, aws_apigateway } from "aws-cdk-lib";
import { Construct } from "constructs";
import { HitCounter } from "./hitcounter";
import { TableViewer} from "cdk-dynamo-table-viewer"

export class TestAwsCdkStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const hello = new aws_lambda.Function(this, "HelloHandler", {
      runtime: aws_lambda.Runtime.NODEJS_14_X,
      code: aws_lambda.Code.fromAsset("lambda"),
      handler: "hello.handler",
    });

    const helloWithCounter = new HitCounter(this, "HelloHitCounter", {
      downstream: hello,
    });

    new aws_apigateway.LambdaRestApi(this, "Endpoint", {
      handler: helloWithCounter.handler,
    });

    new TableViewer(this, "ViewHitCounter", {
      title: "Hello Hits",
      table: //
    });
  }
}

lib フォルダの hitcounter.ts を開きます。

table をパブリックプロパティとして公開するよう修正しまうす。

import { aws_lambda, aws_dynamodb } from "aws-cdk-lib"
import { Construct } from "constructs"

export interface HitCounterProps {
  downstream: aws_lambda.IFunction
}

export class HitCounter extends Construct {
  public readonly handler: aws_lambda.Function

  public readonly table: aws_dynamodb.Table

  constructor(scope: Construct, id: string, props: HitCounterProps) {
    super(scope, id)

    const table = new aws_dynamodb.Table(this, "Hits", {
      partitionKey: { name: "path", type: aws_dynamodb.AttributeType.STRING },
    })
    this.table = table

    this.handler = new aws_lambda.Function(this, "HitCounterHandler", {
      runtime: aws_lambda.Runtime.NODEJS_14_X,
      handler: "hitcounter.handler",
      code: aws_lambda.Code.fromAsset("lambda"),
      environment: {
        DOWNSTREAM_FUNCTION_NAME: props.downstream.functionName,
        HITS_TABLE_NAME: table.tableName,
      },
    })

    table.grantReadWriteData(this.handler)

    props.downstream.grantInvoke(this.handler)
  }
}

再び lib フォルダの test-aws-cdk-stack.ts を開きます。

先程コメントアウトした部分に、table を設定します。

import { Stack, StackProps, aws_lambda, aws_apigateway } from "aws-cdk-lib"
import { Construct } from "constructs"
import { HitCounter } from "./hitcounter"
import { TableViewer } from "cdk-dynamo-table-viewer"

export class TestAwsCdkStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props)

    const hello = new aws_lambda.Function(this, "HelloHandler", {
      runtime: aws_lambda.Runtime.NODEJS_14_X,
      code: aws_lambda.Code.fromAsset("lambda"),
      handler: "hello.handler",
    })

    const helloWithCounter = new HitCounter(this, "HelloHitCounter", {
      downstream: hello,
    })

    new aws_apigateway.LambdaRestApi(this, "Endpoint", {
      handler: helloWithCounter.handler,
    })

    new TableViewer(this, "ViewHitCounter", {
      title: "Hello Hits",
      table: helloWithCounter.table,
    })
  }
}

ターミナルで、cdk diff を実行し、差分を確認します。

image2

リソースが追加されていました。

ターミナルで cdk deploy を実行し、デプロイします。

ターミナルにエンドポイントが出力されるので、エンドポイントにアクセスすると、

image3

URL 毎のアクセス回数のテーブルが表示されました。

追加課題

ワークショップの追加課題で、Hit 数を降順に並び替える課題があります。

やってみましょう。

lib フォルダの test-aws-cdk-stack.ts フォルダを開きます。

new TableViewerのなかに、sortByを追加します。

hitsの前に『-』が付いているのは、降順にするという意味です。

何もつけないと、昇順になります。

new TableViewer(this, "ViewHitCounter", {
  title: "Hello Hits",
  table: helloWithCounter.table,
  sortBy: "-hits",
})

ターミナルで cdk deploy を実行し、デプロイします。

エンドポイントを再確認すると、

image4

降順にすることができました。

クリーンアップする

以上でワークショップが終了したので、予期せぬ請求を回避するために、CDK スタックをクリーンアップします。

ターミナルで cdk destroy を実行します。

クリーンアップしていいか聞かれるので、『y』を入力し、エンターキーを押します。

image5

image6

クリーンアップされました。

念のため、AWS CloudFormation コンソールにアクセスすると、

image7

TestAwsCdkStack が無くなっていました。

ワークショップに沿っての内容は、ここまでなので、次回はゼロから AWS CDK を構築します。

ブログ一覧