LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@canta1sei

AWS CDK CloudFront OAC実装で詰まった話 - AI間の知識格差を実感した開発体験記

Last updated at Posted at 2025-08-20

はじめに

AWS CDKを使ってCloudFrontとS3でSPAをホスティングする際、Origin Access Control (OAC)の実装でハマった経験を共有します。特に興味深いのは、Gemini CLI では解決困難だった問題が、Claude で即座に解決したという点です。同じ問題で困っている方、そしてAI間の知識差について興味がある方の参考になれば幸いです。

LLMのバージョンは以下です。（2025/08/20現在）

  • Gemini: gemini-2.5-flash
    geminiCLIを使用してproの制限が来て自動で切り替わったバージョンです。proであればこのトラブルには直面していなかったかもしれないです。

  • Claude: Claude Sonnet 4
    ブラウザのチャットです。

問題の発生

プロジェクト構成

ビンゴアプリの開発で、以下のようなAWS CDK TypeScriptプロジェクトを作成していました：

project-root/
├── infra/
│   ├── package.json (CDK v2.211.0)
│   ├── cdk.json
│   └── lib/
│       └── infra-stack.ts
├── lambda/
└── frontend/

エラー内容

以下のコードでTypeScriptコンパイルエラーが発生：

const oac = new cloudfront.CfnOriginAccessControl(this, 'OAC', {
  originAccessControlConfig: {
    name: 'OAC for Frontend Bucket',
    originAccessControlOriginType: 's3',
    signingBehavior: 'always',
    signingProtocol: 'sigv4',
  },
});

const distribution = new cloudfront.Distribution(this, 'CloudFrontDistribution', {
  defaultBehavior: {
    origin: new origins.S3BucketOrigin(frontendBucket, {
      originAccessControlId: oac.attrId, // ← ここでエラー
    }),
    // ...
  },
});

エラーメッセージ:

Property 'originAccessControlId' does not exist on type '...'

Gemini CLI での挑戦と限界

最初のアプローチ

Gemini CLIに相談したところ、以下のような対応を提案されました：

  1. パッケージのアップデート提案

    npm update aws-cdk-lib constructs

  2. 型定義ファイルの問題疑い

    • @types/nodeのバージョン確認
    • tsconfig.jsonの設定見直し

  3. CDKバージョンの互換性調査

    • 古いCDKバージョンでの実装方法の提案

Geminiの限界に到達

数回のやり取りを経て、Geminiから以下の回答が：

「この問題は複雑で、環境固有の要因が多く関わっている可能性があります。**専門家へのヒアリングをお願いします。**AWS CDKの専門知識を持つエンジニアにご相談いただくことをお勧めします。」

この時点で、技術的な問題解決においてAIにも限界があることを実感しました。

Claude での即座解決

問題の的確な分析

Claudeに同じ問題を相談したところ、最初のレスポンスで核心を突いた回答が得られました：

  1. 根本原因の特定

    • originAccessControlId プロパティが存在しないこと
    • 手動OAC作成が不要であることを指摘

  2. 正しい実装方法の提示

    // ❌ 間違った方法（手動OAC作成）
const oac = new cloudfront.CfnOriginAccessControl(this, 'OAC', {...});

// ✅ 正しい方法（CDK推奨）
origin: origins.S3BucketOrigin.withOriginAccessControl(frontendBucket),

  3. なぜこの問題が起こるかの説明

    • CDKドキュメントの古い例と新しい例の混在
    • OAI → OAC移行期の混乱

最終的な解決コード

export class InfraStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // S3バケット
    const frontendBucket = new s3.Bucket(this, 'FrontendBucket', {
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    // CloudFront（OACは自動作成される）
    const distribution = new cloudfront.Distribution(this, 'CloudFrontDistribution', {
      defaultBehavior: {
        origin: origins.S3BucketOrigin.withOriginAccessControl(frontendBucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        responseHeadersPolicy: cloudfront.ResponseHeadersPolicy.SECURITY_HEADERS,
      },
      defaultRootObject: 'index.html',
      errorResponses: [
        {
          httpStatus: 403,
          responseHttpStatus: 200,
          responsePagePath: '/index.html',
        },
        {
          httpStatus: 404,
          responseHttpStatus: 200,
          responsePagePath: '/index.html',
        },
      ],
    });
  }
}

技術的解説

OAC（Origin Access Control）とは

Origin Access Control は、CloudFrontからS3バケットへの安全なアクセスを制御する仕組みです：

  • OAI（Origin Access Identity）の後継
  • より強力なセキュリティ機能
  • AWS推奨の最新方式

CDK v2でのOAC実装パターン

❌ 避けるべきパターン

// 手動でOAC作成（不要な複雑性）
const oac = new cloudfront.CfnOriginAccessControl(this, 'OAC', {
  originAccessControlConfig: {
    name: 'OAC for Frontend Bucket',
    originAccessControlOriginType: 's3',
    signingBehavior: 'always',
    signingProtocol: 'sigv4',
  },
});

// 存在しないプロパティを使用
origin: new origins.S3BucketOrigin(frontendBucket, {
  originAccessControlId: oac.attrId, // ← このプロパティは存在しない
}),

✅ 推奨パターン

// CDKが自動でOACを作成・設定
origin: origins.S3BucketOrigin.withOriginAccessControl(frontendBucket),

なぜこの混乱が起こるのか

  1. ドキュメントの世代混在

    • 古いOAI実装例
    • 新しいOAC実装例
    • 移行期の実装例

  2. CDKの抽象化レベル

    • 低レベルAPI（CfnXxx）
    • 高レベルAPI（withOriginAccessControl）

  3. 急速な進化

    • AWSサービスの頻繁なアップデート
    • CDKライブラリの進化

AI間の知識格差について

観察された違い

項目 Gemini CLI Claude
問題特定 環境・バージョン問題として認識 API使用方法の問題として認識
解決アプローチ 環境修正中心 正しい実装方法の提示
専門知識 一般的なトラブルシューティング CDK固有のベストプラクティス
結果 解決に至らず 即座に解決

学んだ教訓

技術面

  1. CDKの正しいパターンを学ぶ

    • 公式ドキュメントの最新版を参照
    • コミュニティの実装例を複数確認
    • 高レベルAPIを優先的に使用

  2. エラーメッセージを正確に読む

    • プロパティが存在しない → API設計の確認
    • 型エラー → 実装方法の見直し

  3. AWS進化への対応

    • 定期的な知識アップデート
    • 非推奨機能の把握

AI活用面

  1. 複数AIの並行活用

    • それぞれに得意分野がある
    • セカンドオピニオンの重要性

  2. 問題の切り分け

    • 環境問題 vs 実装問題
    • 一般的問題 vs 特殊問題

  3. AI の限界認識

    • 万能ではない
    • 専門分野での知識差は存在する

まとめ

今回の経験を通して、以下のことが明らかになりました：

  1. 同じAIでも専門知識に差がある

    • 特定分野での深い知識
    • 問題解決アプローチの違い

  2. AWS CDKの複雑性

    • 進化の速さが混乱を生む
    • 正しいパターンの重要性

  3. 継続的学習の必要性

    • 技術者もAIも常にアップデートが必要
    • 複数の情報源の活用

技術的な問題に直面した際は、一つの回答で諦めず、複数の視点からアプローチすることが重要だと実感しました。そして何より、AIの得意分野を理解して適切に使い分けることで、開発効率を大幅に向上させることができます。

同じような問題で困っている方の参考になれば幸いです。

参考資料

環境情報

  • AWS CDK: v2.211.0
  • Node.js: v18+
  • TypeScript: v5.9.2
  • OS: Ubuntu (WSL2)
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?