CDKで静的WebSiteホスティング

- 6月 23, 2024

このサイトのGitHubをCloneしてきてCloudFront+S3やってみました(ほぼ丸パクリ)。
1リージョンでしか作成できなかったのでバージニア北部リージョンで作成したACMを使えるようにして東京リージョンでS3を使えるようにしたかったので、やってみました。たぶん、そういうニーズあるの自分くらいでしょうけれども・・・。

修正したやつは以下のGitHubｍに上げてます

https://github.com/Otazoman/static-website-cdk-sample

◆環境構築(node)

$ nvm install --lts --latest-npm
$ nvm alias default 'lts/*'
$ node -v
v20.13.1

◆AWS-CDKインストール

$ cd
$ mkdir aws-cdk
$ cd aws-cdk
$ echo 'lts/iron' > .nvmrc
$ nvm use
$ npm install -g aws-cdk
$ npm install -g typescript
$ cdk version
2.141.0 (build 3d1c06e)

既存のソース使ってるのでクロスリージョンのところでかなり嵌ってしまって、何とか調べながら対応しました。かなり時間かかった。(一応、苦労した箇所の説明)

まず、スタックからhostedzone取得するところで必要になるパラメータを吐き出してやります。

    // for Cross Region
    this.certificateArn =
      certificateConstruct?.certificate.certificateArn || "";
    this.hostedZone = hostedZoneConstruct
      ? {
          hostedZoneId: hostedZoneConstruct?.hostedZone.hostedZoneId,
          zoneName: hostedZoneConstruct?.hostedZone.zoneName,
        }
      : undefined;

スタックを呼び出しているところでバージニアリージョンのACMの証明書ARNとRoute53のhostedZoneを渡してやって

  
const staticsitestack = new CloudfrontS3Stack(app, "CloudfrontS3Stack", {
  env: websiteStackProperty.env,
  crossRegionReferences: true,
  ...websiteStackProperty.props,
  certificateArn: acmstack.certificateArn,
  hostedZoneInfo: acmstack.hostedZone,
});

こんな感じにconstruct入れてたところにクロスリージョンで取得したパラメータから該当のリソース情報を取得して渡してあげる感じに、そしてfromHostedZoneIdに不具合があってわざわざfromHostedZoneAttributesを使わないといけないので余計に大変でした。

export interface CloudfrontS3StackProps
  extends cdk.StackProps,
    WebsiteProperty {
  certificateArn?: string;
  hostedZoneInfo?: HostedZoneInfo;
}

export class CloudfrontS3Stack extends cdk.Stack {
  constructor(scope: Construct, id: string, props: CloudfrontS3StackProps) {
    super(scope, id, props);

    // HostedZone import
    const hostedZoneinfo = props.hostedZoneInfo;
    const hostedZone = hostedZoneinfo
      ? cdk.aws_route53.HostedZone.fromHostedZoneAttributes(
          this,
          "ImportedHostedZone",
          {
            hostedZoneId: hostedZoneinfo.hostedZoneId,
            zoneName: hostedZoneinfo.zoneName,
          }
        )
      : undefined;

    // ACM import
    const certificateArn = props.certificateArn;
    const certificate = certificateArn
      ? cdk.aws_certificatemanager.Certificate.fromCertificateArn(
          this,
          "ImportedCertificate",
          certificateArn
        )
      : undefined;

後はcontents-delivery-construct.tsでconstruct使っているところの型を書き替えて

  hostedZone?: IHostedZone;
  certificate?: ICertificate;

それで何とかクロスリージョンできました。TypeScriptの考え方とかわからないので

これで修正方法が正しいのか分からないけど、なるべく触る範囲を最小にしてと考えるとこういう方法になってしまいました。これでいいのか指摘貰えるとありがたいところです。

そしてたかだかこれだけの修正にすごく時間かかりました。何年もやってるのに全然プログラムもサーバもシステム系の知識も身についていないので、そこいらから切り貼りするしかない感じです。そのうちChatGPTとかClaudeとかgeminiに駆逐されると思います。

当然、今回のプログラムも生成AIに解析してもらって、自分はほとんど何もしていない。まぁそのうち必要ない人間になりそうですね。

◆参考サイト

このブログを検索

アラフィフおやじログ