AWS CDK S3静的ウェブサイトホスティング構築 TypeScript #1
はじめに
AWS CDKの学習をするためにAWSの基礎的なサービスを使用した構築を実践してみることにしました。
今回はAmazon S3の静的ウェブサイトホスティング機能を使用してhtmlページを公開します。
環境
OS：Windows11
IDE：VScode
リポジトリ：GitHub
構築
GitHubリポジトリの作成
※コードをリモートリポジトリで管理しない場合は本手順を飛ばしてかまいません。
前準備としてgitのインストールやGitHubアカウントの作成などが必要です。
任意の名前でリポジトリを作成したらリポジトリのリンクを使用してローカルにクローンします。
git clone <リポジトリURL>.git
CDKの準備
CLIへの認証情報の登録やcdk bootstrapが完了したところから開始します。
リポジトリファイルに移動してCDKプロジェクトの初期化を行います(今回はTypeScriptを使用します)
cdk init -l typescript
完了したらlibファイル直下のstack.tsファイルにコードを書いていきます。
まずは、S3バケットから作成していきます。
今回は静的ウェブサイトホスティングを設定するのでパブリックサクセスを許可する設定とインデックスファイルを指定するパラメータを明示的に記述する必要があります。
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import {
aws_s3 as s3,
aws_s3_deployment as s3_deployment,
} from 'aws-cdk-lib';
export class S3CloudfrontStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props);
const s3Bucket = new s3.Bucket(this, 'WebSiteBucket', {
// バケット名を一意にしやすくするためアカウントIDと作成リージョンを使用
bucketName: `s3-bucket-${cdk.Aws.ACCOUNT_ID}-${cdk.Aws.REGION}`,
// CDKスタック削除時に当S3バケットが削除されるように設定値をtrue
// 設定しないとスタック削除しても残る
autoDeleteObjects: true,
// 上記パラメータ設定時にオブジェクトが残ってるとエラーになるのでremovalPolicyを削除に指定
// これを入れるとオブジェクト削除用のlambdaやらlambdaがS3を操作するためのIAMロールが自動作成される
removalPolicy: cdk.RemovalPolicy.DESTROY,
// パブリックアクセスを許可
// S3バケットを直接見てもらうには必要な設定
publicReadAccess: true,
// ウェブサイトホスティングでIndexファイルになるファイル名を指定
websiteIndexDocument: 'index.html',
// デフォルトではACLが有効なので無効化
blockPublicAccess: new s3.BlockPublicAccess({
blockPublicAcls: false,
ignorePublicAcls: false,
blockPublicPolicy: false,
restrictPublicBuckets: false,
}),
});
この状態でデプロイすると空のS3バケットが作成されるのでindex.htmlファイルも準備します。
このhtmlファイルはウェブサイト用のページとなるファイルなので専用のフォルダを作成してその中に格納します。
私はwebsiteという名前のフォルダを作成して格納しました。
mkdir website && cd website
new-Item -ItemType File -Name "index.html"
index.htmlの中身は最低限とさせていただきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>S3 Static WebSite
</title>
</head>
<body>
<h1>Hello from Amazon S3!</h1>
<p>これはS3のテストページです。</p>
</body>
</html>
index.htmlファイルの準備ができましたが、このままでは空のS3バケットがデプロイされた後にGUIなりCLIなりでファイルを手動アップロードする必要があります。
ファイルの中身が変わる度に都度手動で更新するのも面倒です。
なのでCDK側でS3バケット作成とあわせてファイルも格納してもらうことにします。
// 以下を追加
new s3_deployment.BucketDeployment(this, 'DeploymentIndex', {
// ファイルをアップロードするS3バケットを指定
destinationBucket: s3Bucket,
// アップロードするファイルを指定
// 今回はwebsiteフォルダ内のファイルをアップロードしてもらいます
// 指定するパスはCDKコマンドを実行するディレクトからのパスです(このtsファイルからのパスじゃないので注意)
sources: [s3_deployment.Source.asset('./website')],
// ファイルの格納先です
// 今回はS3バケットのルート直下に配置します
destinationKeyPrefix: '',
})
各ファイルを保存したらデプロイを実行。
実際は事前にcdk synthやdiffで想定通りのデプロイになりそうか確認してください。
cdk deploy
デプロイ後、S3のURLにアクセスしindex.htmlで記述したページが表示されればデプロイ成功です。
片付け
作成したリソースはcdk destroyで削除可能です。
githubのリポジトリと連携している場合は変更を保存しておきましょう。
おわり
今回はAWSCDKを使ってS3静的ウェブサイトホスティングを構築しました。
これから公開経路をCloudFront経由にしたり、ドメインを取得してRoute 53と連携させたり、デプロイをパイプラインで実行できるようにしていきたいと思います。
つづき
Discussion