AWS

【AWS】AWS Cloud Development Kit(AWS CDK)でカウントした回数をブラウザに表示する

作成日：2021年12月18日

更新日：2021年12月19日

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

【AWS】AWS Cloud Development Kit(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 を追加します。

ts
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 をパブリックプロパティとして公開するよう修正しまうす。

ts
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 を設定します。

ts
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　を実行し、差分を確認します。

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

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

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

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

追加課題

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

やってみましょう。

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

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

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

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

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

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

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

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

クリーンアップする

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

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

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

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

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

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

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

【AWS】AWS Cloud Development Kit(AWS CDK)をゼロから構築する

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【AWS】AWS Cloud Development Kit(AWS CDK)でカウントした回数をブラウザに表示する

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

追加課題

クリーンアップする

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する