【静的サイト編】プロフィールサイトAWS移行メモ 〜インフラ初心者を添えて〜

My_profile-cdk/
├── bin/
│   └── my_profile-cdk.ts
├── function/
│   └── cf2/
│       └── directory-index.js
├── lib/
│   └── constructs/
│   │   └── dns-construct/
│   │   │   └── hosted-zone-construct.ts
│   │   └── edge-cert-construct/
│   │   │   └── certificate-construct.ts
│   │   └── website-constructs/
│   │       └── bucket-construct.ts
│   │       └── cdn-construct.ts
│   └── stacks/
│   │   └── dns-stack.ts
│   │   └── edge-cert-stack.ts
│   │   └── website-stack.ts
│   └── my_profile-cdk-stage.ts
├── parameters/
│   └── dns-parameter.ts
│   └── edge-cert-parameter.ts
│   └── website-parameter.ts
├── test/
│   └── cdk-workshop.test.ts
├── .gitignore
├── .npmignore
├── cdk.json
├── jest.config.js
├── package.json
├── README.md
└── tsconfig.json

import { Construct } from "constructs";
import { aws_s3 as s3, RemovalPolicy } from "aws-cdk-lib";
import { BucketProperty } from "@/parameters/website-parameter";
 
export interface BucketConstructProps extends BucketProperty {}
 
export class BucketConstruct extends Construct {
  readonly bucket: s3.Bucket;
 
  constructor(scope: Construct, id: string, props: BucketConstructProps) {
    super(scope, id);
 
    this.bucket = new s3.Bucket(this, "Bucket", {
      bucketName: props?.bucketName,                             // 新規作成時のバケット名
 
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,         // 公開アクセスをブロック
      enforceSSL: true,                                          // SSL 強制
      encryption: s3.BucketEncryption.S3_MANAGED,                // サーバー側暗号化（SSE-S3）
      objectOwnership: s3.ObjectOwnership.BUCKET_OWNER_ENFORCED, // ACLを無効化して所有権をバケット側に強制
 
      versioned: false,                                          // バージョニングはオフ
 
      removalPolicy: RemovalPolicy.DESTROY,                      // Destroy 方針
      autoDeleteObjects: true,                                   // Destroy 時に中身も消す
    });
  }
}
 

import { Construct } from "constructs";
import {
  aws_cloudfront as cf,
  aws_cloudfront_origins as origins,
  aws_route53 as r53,
  aws_route53_targets as targets,
  aws_s3 as s3,
  Duration,
} from "aws-cdk-lib";
import { ContentsDeliveryProperty } from "@/parameters/website-parameter";
import type { ApiOriginForContact } from "@/lib/stacks/website-stack";
 
export interface CdnConstructProps extends ContentsDeliveryProperty {
  contentBucket: s3.IBucket;
  certificate: import("aws-cdk-lib/aws-certificatemanager").ICertificate;
  hostedZone: r53.IPublicHostedZone;
  apiOriginForContact: ApiOriginForContact;
}
 
export class CdnConstruct extends Construct {
  readonly distribution: cf.Distribution;
 
  constructor(scope: Construct, id: string, props: CdnConstructProps) {
    super(scope, id);
 
    // レスポンスヘッダポリシー（セキュリティ系）
    const headers = new cf.ResponseHeadersPolicy(this, "SecurityHeaders", {
      securityHeadersBehavior: {
        contentTypeOptions: { override: true },                 // X-Content-Type-Options: nosniff
        frameOptions: {                                         // X-Frame-Options: DENY
          frameOption: cf.HeadersFrameOption.DENY,
          override: true,
        },
        referrerPolicy: {                                       // Referrer-Policy
          referrerPolicy: cf.HeadersReferrerPolicy.NO_REFERRER,
          override: true,
        },
        strictTransportSecurity: {                              // HSTS（HTTPS常用）
          accessControlMaxAge: Duration.days(365),              // max-age=31536000
          includeSubdomains: true,                              // includeSubDomains
          preload: true,                                        // preload（Chromium HSTSプリロード）
          override: true,                                       // オリジン応答より優先
        },
      },
    });
 
    // キャッシュポリシー（静的サイト向け）
    const defaultCache = new cf.CachePolicy(this, "DefaultCache", {
      cachePolicyName: "default-html-aware",                   // 一意な名前
      defaultTtl: Duration.hours(1),                           // HTML等の既定TTL
      minTtl: Duration.seconds(0),                             // 即時上書きも許容
      maxTtl: Duration.days(7),                                // 最長でも7日
      enableAcceptEncodingBrotli: true,                        // Brotli対応
      enableAcceptEncodingGzip: true,                          // gzip対応
      cookieBehavior: cf.CacheCookieBehavior.none(),           // クッキーをキーに含めない
      headerBehavior: cf.CacheHeaderBehavior.none(),           // ヘッダをキーに含めない
      queryStringBehavior: cf.CacheQueryStringBehavior.none(), // クエリをキーに含めない
    });
 
    // ディレクトリインデックス補完用の CloudFront Function
    let rewriteFn: cf.Function | undefined = undefined;
    if (props.enableDirectoryIndex === "cf2") {
      const filePath = require.resolve("@/functions/cf2/directory-index.js");
      rewriteFn = new cf.Function(this, "DirectoryIndexFn", {
        code: cf.FunctionCode.fromFile({ filePath }),
      });
    }
 
    // CloudFront Distribution
    this.distribution = new cf.Distribution(this, "Distribution", {
      defaultBehavior: {
        origin: origins.S3BucketOrigin.withOriginAccessControl(            // OACでS3を私的アクセス
          props.contentBucket
        ),
        viewerProtocolPolicy: cf.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,   // HTTP→HTTPS
        responseHeadersPolicy: headers,                                    // セキュリティヘッダ
        functionAssociations: rewriteFn                                    // ディレクトリ補完
          ? [
              {
                eventType: cf.FunctionEventType.VIEWER_REQUEST,
                function: rewriteFn,
              },
            ]
          : undefined,
        compress: true,                                                    // 自動圧縮
        cachePolicy: defaultCache,                                         // 上記キャッシュ方針
        allowedMethods: cf.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,          // 読み取り系のみ許可
      },
      defaultRootObject: "index.html",                                     // ルート(/)はindex.html
      certificate: props.certificate,                                      // TLS終端
      domainNames: [props.domainName],                                     // ALTN(CNAME)
      errorResponses: [                                                    // 403/404は404.htmlへ
        {
          httpStatus: 404,
          responseHttpStatus: 404,
          responsePagePath: "/404.html",
          ttl: Duration.minutes(5),
        },
        {
          httpStatus: 403,
          responseHttpStatus: 404,
          responsePagePath: "/404.html",
          ttl: Duration.minutes(5),
        },
      ],
      priceClass: cf.PriceClass.PRICE_CLASS_200,                           // コスト/性能バランス
      minimumProtocolVersion: cf.SecurityPolicyProtocol.TLS_V1_2_2021,     // TLS最低バージョン
      httpVersion: cf.HttpVersion.HTTP3,                                   // HTTP/3対応
    });
 
    ...
 
  }
}
 

$ cdk synth

$ ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
$ echo $ACCOUNT_ID

$ cdk bootstrap aws://$ACCOUNT_ID/ap-northeast-1
$ cdk bootstrap aws://$ACCOUNT_ID/us-east-1

$ cdk diff MyProfileCdkStage/*

$ cdk deploy MyProfileCdkStage/DnsStack \
             MyProfileCdkStage/EdgeCertStack \
             MyProfileCdkStage/WebsiteStack \
             --concurrency 1

$ curl "https://awscli.amazonaws.com/awscli-exe-linux-aarch64.zip" -o "awscliv2.zip"
$ unzip awscliv2.zip
$ sudo ./aws/install

$ aws configure
AWS Access Key ID [None]: アクセスキー
AWS Secret Access Key [None]: アクセスキーのシークレット
Default region name [None]: ap-northeast-1
Default output format [None]: json

import type { NextConfig } from "next";
 
const nextConfig = {
  output: "export", 
  // …他の設定…
};
 
export default nextConfig;

$ npm run build

aws s3 sync ./out s3://BUCKET_NAME --delete

$ curl https://miyazaki-profile.com/ -IL
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 71820
Connection: keep-alive
Date: Tue, 09 Sep 2025 15:22:47 GMT
Last-Modified: Sun, 07 Sep 2025 11:49:08 GMT
ETag: "0d1d64387c0b5c629c6e8d1b5a99d985"
x-amz-server-side-encryption: AES256
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Miss from cloudfront
Via: 1.1 ee3c32726dc221e283f04d948b7d3908.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRT12-P6
Alt-Svc: h3=":443"; ma=86400
X-Amz-Cf-Id: FK686AJWWNqQhR1njavf56RWujenXsbPguIYu6orObzvLH9Qme5xjA==
X-Frame-Options: DENY
Referrer-Policy: no-referrer
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
 
$ curl https://miyazaki-profile.com/ -IL
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 71820
Connection: keep-alive
Date: Tue, 09 Sep 2025 15:23:22 GMT
Last-Modified: Sun, 07 Sep 2025 11:49:08 GMT
ETag: "0d1d64387c0b5c629c6e8d1b5a99d985"
x-amz-server-side-encryption: AES256
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Hit from cloudfront
Via: 1.1 7eb63f1cbf80baae1aabab4881c29f24.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRT12-P6
Alt-Svc: h3=":443"; ma=86400
X-Amz-Cf-Id: uyXWXV6cQQgOxGcVY8oj12ox7cmnJv1ewDNzGFb2cPDsXeUYYA0NwQ==
Age: 6
X-Frame-Options: DENY
Referrer-Policy: no-referrer
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload