AWS CDK Ver.2 PythonでCloudFrontとS3による静的サイトホスティングを作ってみた

今回の記事では、下の構成図のように、CloudFrontとS3を使って静的サイトをホスティングするリソースをCDK Ver.2 pythonを使って作成していきます。

全コードはGithubを参照してください。
Githubはここ

前提条件

• AWS CDK v.2 がインストールされていること
• Python 3.x がインストールされていること
• AWSアカウントがあり、AWS CLIが設定されていること

※Cloud9を使うとこの辺りがPassできるため、Cloud9を使って今回の記事の内容は作成しています。

構築手順

1.CDKアプリの初期化

先ずはCDKアプリの初期化を行います。

$ mkdir cdk-lambda-rds-proxy
$ cd cdk-lambda-rds-proxy
$ cdk init --language python

2. 必要なパッケージをインストール

ここでは、CDKアプリを初期化した際に作成された.venvを有効化しています。

$ source .venv/bin/activate
$ pip install -r requirements.txt

3. スタックの作成

from aws_cdk import (
    Stack,
    aws_s3 as s3,
    aws_cloudfront as cf,
    aws_cloudfront_origins as cf_origins,
    aws_s3_deployment as s3deploy,
)
from constructs import Construct


class CdkStaticSiteCfStack(Stack):

    def __init__(self, scope: Construct, id: str, **kwargs) -> None:
        super().__init__(scope, id, **kwargs)

        # S3 Bucket
        bucket = s3.Bucket(
            self, 
            "MyStaticSiteBucket"
        )

        # CloudFront
        distribution = cf.Distribution(
            self,
            'Distribution',
            default_behavior=cf.BehaviorOptions(
                origin=cf_origins.S3Origin(bucket)
            ),
            default_root_object='index.html',
        )

        # Deploy site contents to S3 Bucket
        s3deploy.BucketDeployment(
            self, 
            "BucketDeployment",
            sources=[s3deploy.Source.asset("./website")],
            destination_bucket=bucket,
            distribution=distribution,
            distribution_paths=["/*"]
        )

4. HTMLファイルの作成

websiteフォルダを作成し、その中にindex.htmlを作成して以下の内容を記述します。

<h1>Hello CDK!</h1>

5. CDKアプリをデプロイ

Stackの準備が完了したため、デプロイします。

$ cdk deploy

デプロイ完了後にCloudFrontのディストリビューションを確認すると、以下のように「cloudfront.net」のドメイン名が表示されていることが確認できます。

アクセスすると以下のような表示となり、HTMLファイルが表示されていることが確認できます。

まとめ

この記事では、LambdaのCloudFrontとS3を使って静的ウェブサイトをホスティングするリソースをCDKで作成する方法について紹介しました。基本的なサーバレス構成においてよく使われる構成だと思いますので、参考になれば幸いです。