【作業日報】静的webサイトをS3にデプロイ！claude codeを用いて開発テストまでの手順

日記

Posted at 2025-06-11

Geminiで作成してます。
主に筆者が見返しに使ってます。

併せて以下も興味あれば
【未完成】静的webサイトをS3にデプロイ！claude codeを用いて開発テストまでの手順

日報

2025年06月04日

・本日の実施内容

本日は、静的なWebサイトをS3でホスティングし、将来的にはGitHub Actionsを用いた自動デプロイパイプラインを構築するための初期環境設定、およびAWSの認証に関するベストプラクティスの学習と設定準備を中心に行いました。具体的には、AWS CLIのローカル設定、S3バケットの作成と基本的なファイル操作、Gitリポジトリの初期化とGitHubとの連携、そしてセキュリティ向上のためAWS IAM Identity Centerの導入準備を進めました。

・AWS

AWS CLI環境設定
- AWS CLIのバージョン確認 (aws --version) を実施しました。
- 長期的な認証情報（アクセスキーID、シークレットアクセスキー）を使用するプロファイル 0603game-tano を aws configure --profile 0603game-tano コマンドで設定しました。
  - デフォルトリージョン: ap-northeast-1
  - デフォルト出力形式: json
- direnv ツールを導入し、プロジェクトディレクトリ 0603game に入った際に自動的に AWS_PROFILE=0603game-tano が設定されるよう .envrc ファイルを構成しました。これにより、ディレクトリ外では認証情報が無効となり、セキュリティが向上することを確認しました。
- 設定したプロファイルで aws sts get-caller-identity --profile 0603game-tano を実行し、IAMユーザー 0603game-admin-tano として認証できていることを確認しました。
S3バケット関連作業
- 静的Webサイトホスティング用のS3バケット tano-0603game-bucket を aws s3api create-bucket コマンドで東京リージョン (ap-northeast-1) に作成しました。
- 作成したS3バケットに対し、aws s3api put-bucket-tagging コマンドで以下のタグを設定しました。
  - Owner: tano
  - Project: 0603game
- タグが正しく設定されたことを aws s3api get-bucket-tagging コマンドで確認しました。
- サンプルHTMLファイル (Ver.1-0603game.html, Ver.1-0603game-error.html) を aws s3 cp コマンドでS3バケットにアップロードし、aws s3 ls コマンドでアップロードされたことを確認しました。
IAM Identity Center 設定準備 (AWSマネジメントコンソール操作)
- ローカルに長期的なアクセスキーを保存するリスクを回避し、セキュリティを向上させるため、AWS IAM Identity Center (旧 AWS SSO) の利用を決定しました。
- IAM Identity Centerの利用に追加コストがかからないことを確認しました。
- AWSマネジメントコンソールにて、IAM Identity Centerのインスタンスを東京リージョンに正常に作成しました。
- IAM Identity Centerユーザーと従来のIAMユーザーの違い、およびIAM Identity Centerユーザーが現在のベストプラクティスである理由について学習・確認しました。従来のIAMユーザーは、特に人間のユーザーによる日常的なアクセスにおいては、IAM Identity Centerユーザーに比べて古いアプローチと見なされる場面が増えていることを理解しました。
- IAM Identity Center内に、AWSアクセスポータルへのログインおよびAWS CLIから利用するためのユーザー tano-sso-user を作成しました。
- tano-sso-user に割り当てるための許可セットとして、AWSアカウント全体の管理者権限を持つ「AdministratorAccess」という名前の許可セットを作成しました。セッション期間については、デフォルトの1時間から最大12時間まで設定可能であり、利便性とセキュリティリスクを考慮して決定する必要があることを学習しました。
- IAM Identity Centerにおけるグループの役割について学習し、今回は個人利用のためグループ作成は見送りました。

・Git

ローカルリポジトリ設定
- プロジェクトディレクトリ 0603game 内で git init コマンドを実行し、Gitリポジトリを初期化しました。
- デフォルトブランチ名を master から main に git branch -M main コマンドで変更しました。
GitHub連携
- GitHub上にパブリックリポジトリ YusukeTano/0603game-tano-public を作成しました。
- ローカルリポジトリにリモートリポジトリとして git remote add origin https://github.com/YusukeTano/0603game-tano-public.git コマンドで登録しました。
- README.md ファイルを作成し、git add README.md および git commit -m "最初のコミット" を実行後、git push -u origin main コマンドでGitHubにプッシュしました。
.gitignore設定
- .gitignore ファイルを作成し、OS固有ファイル (.DS_Store)、IDE設定ファイル (.vscode/)、環境変数ファイル (.envrc)、ログファイル (*.log) などをGitの追跡対象から除外するよう設定しました。
プロジェクトファイルのコミットとプッシュ
- .gitignore ファイル、VSCodeのワークスペース設定ファイル (0603game.code-workspace)、およびHTMLファイル (Ver.1-0603game.html, Ver.1-0603game-error.html) をステージングしコミット後、git push コマンドでGitHubにプッシュしました。

・次回の実施内容

AWS IAM Identity Center 設定の完了
- 本日作成したIAM Identity Centerユーザー (tano-sso-user) と許可セット (AdministratorAccess) を、対象のAWSアカウントに割り当てる。
- IAM Identity CenterユーザーのMFA設定を行う（推奨）。
ローカルAWS CLIのSSOプロファイル設定
- aws configure sso コマンドを実行し、IAM Identity Centerと連携する新しいAWS CLIプロファイルを作成する。
- aws sso login --profile <新しいSSOプロファイル名> コマンドでログインし、認証が成功することを確認する。
- aws sts get-caller-identity --profile <新しいSSOプロファイル名> などを実行し、IAM Identity Center経由で正しいロールが引き受けられているか確認する。
direnv とSSOプロファイルの連携
- プロジェクトディレクトリ 0603game の .envrc ファイルを編集し、新しく作成したSSOプロファイルが自動的に使用されるように設定を変更する。
GitHub Actions パイプライン構築 (OIDC利用)
- GitHubリポジトリのSecretsから既存のアクセスキー情報（もし設定していれば）を削除する。
- AWS IAMで、GitHub ActionsがOIDCを利用してIAMロールを引き受けるための設定を行う（OIDC IDプロバイダの作成、IAMロールの作成と信頼ポリシー・権限ポリシーの設定）。
- GitHub Actionsのワークフローファイル (.github/workflows/deploy.yml) を修正し、OIDCとIAMロールを利用して aws s3 sync コマンドでS3バケットにファイルを自動デプロイするように設定する。
- ワークフローの動作テストとデバッグを行う。

かしこまりました！次回の実施内容について、ご希望を承知いたしました。
「Claude codeのさらなる活用」や「GitHubブランチ戦略の導入検討」よりも先に、**「Webサイトの一般公開（Route 53とCloudFrontを使用）」**を進めたいということですね。

AWSのサービスを使って実際にウェブサイトをインターネットに公開するのは、非常に実践的で達成感のあるステップです。

それでは、本日作成した日報の「次回の実施内容」を、そのご希望に合わせて修正いたします。

2025年06月05日

・本日の実施内容

本日は、新しいPC環境への移行に伴う開発環境の再セットアップから始まり、ローカルでのAWS CLI認証をより安全なAWS IAM Identity Center (SSO) 方式に移行・設定しました。また、これまでの作業で構築したGitHubリポジトリとの連携を確認し、GitHub ActionsによるS3への自動デプロイパイプラインがOIDC認証で正しく機能することも確認しました。さらに、AIコーディング支援ツール「Claude Code」をMacに導入し、初期設定を完了。Claude Codeと対話しながらプロジェクトの分析、ドキュメント生成、大幅なコード変更、そしてバグ修正とパフォーマンス改善といった一連のAI支援開発プロセスを体験しました。

・AWS

ローカルAWS CLI環境設定（新PCでのSSO移行）
- 証跡: ターミナルでの aws --version、aws configure sso、direnv allow、aws sts get-caller-identity、aws s3 ls、aws sso logout、aws sso login の各コマンド実行履歴。
- 成果物:
  - AWS CLIバージョン 2.17.62 を確認。
  - aws configure sso コマンドを使用し、IAM Identity Centerと連携するSSOプロファイル AdministratorAccess-252170044718-0603game-sso をローカルに作成。
    - SSOスタートURL: https://d-9567b898c6.awsapps.com/start
    - SSOリージョン: ap-northeast-1
    - ブラウザ経由でIAM Identity Centerユーザー tano-sso-user としてログインし、MFA認証も実施。
    - 利用するAWSアカウントとして 252170044718、ロール（許可セット）として AdministratorAccess を選択。
    - CLIデフォルトリージョンとして ap-northeast-1、出力形式として json を設定。
  - プロジェクトディレクトリ 0603game 内の .envrc ファイルに export AWS_PROFILE=AdministratorAccess-252170044718-0603game-sso と記述し、direnv allow を実行することで、ディレクトリ内でのみSSOプロファイルが自動的に有効になることを設定・確認。
  - 0603game ディレクトリ内で aws sts get-caller-identity を実行し、arn:aws:sts::252170044718:assumed-role/AWSReservedSSO_AdministratorAccess_bc22b32377716bdf/tano-sso-user として認証されていることを確認。
  - aws s3 ls を実行し、S3バケット tano-0603game-bucket がリストされることを確認。
  - 0603game ディレクトリ外では aws sts get-caller-identity が認証情報を見つけられないことを確認。
  - aws sso logout --profile AdministratorAccess-252170044718-0603game-sso コマンドでSSOセッションを意図的にログアウトし、その後 aws sts get-caller-identity がエラーになることを確認。
  - 再度 aws sso login --profile AdministratorAccess-252170044718-0603game-sso コマンド（および 0603game ディレクトリ内でのオプションなし実行）でログインできることを確認。
IAM設定 (GitHub Actions連携 - AWSコンソール操作、前日までの作業の確認と利用)
- 証跡: (本日のコマンド履歴には直接現れないが、GitHub Actionsワークフローの動作確認を通じて間接的に確認)
  - OIDC IDプロバイダ (token.actions.githubusercontent.com) がAWS IAMに作成済みであること。
  - GitHub Actions用IAMロール (GitHubActionsRole-0603game-S3Sync) が作成済みであり、上記OIDCプロバイダを信頼し、特定のGitHubリポジトリ (YusukeTano/0603game-tano-public) の main ブランチからのアクションのみを許可する信頼ポリシーが設定されていること。
  - 上記IAMロールに、S3バケット (tano-0603game-bucket) への同期に必要な権限 (s3:ListBucket, s3:PutObject, s3:GetObject, s3:DeleteObject) を持つカスタムポリシー (GitHubActionsS3SyncPolicy-0603game) がアタッチされていること。
- 成果物: (前日までの成果物) 上記のOIDC IDプロバイダ、IAMロール、IAMポリシーが正しく設定されている状態。

・git

リポジトリのクローンとGitHub認証確認（新PC）
- 証跡: ターミナルでの mkdir 0603game、cd 0603game、git clone https://github.com/YusukeTano/0603game-tano-public.git .、git remote -v、git fetch origin、git add README.md、git commit -m "Test push from new PC"、git push origin main の各コマンド実行履歴。
- 成果物:
  - 新しいPCのホームディレクトリ以下に 0603game ディレクトリを作成。
  - GitHubリポジトリ YusukeTano/0603game-tano-public の内容を 0603game ディレクトリにクローン。
  - リモートリポジトリ origin がHTTPSで正しく設定されていることを確認。
  - git fetch origin でエラーなく通信できることを確認。
  - README.md にテスト変更を加え、コミットし、GitHubへプッシュ。この際、VS Codeの拡張機能経由でGitHubウェブサイトでの認証が機能し、プッシュが成功することを確認。
GitHub Actionsワークフローファイルの作成と更新
- 証跡: ターミナルでの mkdir -p .github/workflows、vi .github/workflows/deploy-to-s3.yml、cat .github/workflows/deploy-to-s3.yml、git add .github/workflows/deploy-to-s3.yml、git commit、git push の各コマンド実行履歴 (コミットメッセージは会話ログ参照)。
- 成果物:
  - .github/workflows/deploy-to-s3.yml ファイルを新規作成。
  - ワークフロー定義:
    - name: Deploy Static Site to S3 via OIDC
    - main ブランチへの push をトリガー。
    - ubuntu-latest ランナーを使用。
    - permissions で id-token: write および contents: read を設定。
    - actions/checkout@v4 を使用。
    - aws-actions/configure-aws-credentials@v4 を使用し、role-to-assume: arn:aws:iam::252170044718:role/GitHubActionsRole-0603game-S3Sync と aws-region: ap-northeast-1 を設定。role-session-name: GitHubActionsS3DeploySession も設定（有効化）。
    - run ステップで aws s3 sync ./public/ s3://tano-0603game-bucket/ --delete を実行。
  - 上記ワークフローファイルをコミット (Add GitHub Actions workflow for S3 OIDC deployment または類似のメッセージ) し、GitHubにプッシュ。
プロジェクトファイルの構成変更
- 証跡: ターミナルでの mkdir public、git mv Ver.1-0603game.html public/index.html、git mv Ver.1-0603game-error.html public/error.html、git add .、git commit、git push の各コマンド実行履歴 (コミットメッセージは会話ログ参照)。
- 成果物:
  - プロジェクトルートに public/ ディレクトリを作成。
  - 既存の Ver.1-0603game.html を public/index.html に移動・リネーム。
  - 既存の Ver.1-0603game-error.html を public/error.html に移動・リネーム。
  - これらの変更をコミット (Organize website files into public dir and setup GitHub Actions for S3 OIDC deployment または類似のメッセージ) し、GitHubにプッシュ。
Claude Codeによるコード変更とコミット (AI提案・実行)
- 証跡: Claude Codeツールとの対話ログ。
- 成果物:
  - CLAUDE.md ファイルの生成と更新（プロジェクト概要、開発コマンド、アーキテクチャ、重要な注意点などが記述された）。
  - public/index.html の大幅な変更。
    - ゲームテーマの変更（「スターコレクター PLUS」から「PRIMAL DESIRE - 原始の欲望」へ）。
    - 物理演算、描画処理、サウンド、UIテキストなどの広範な変更。
    - JavaScriptの構文エラー（変数重複宣言）の修正。
    - ボタンが反応しない問題（初期化処理）の修正。
    - パフォーマンス改善（描画、物理演算、パーティクル、オブジェクト数の最適化）。
    - スターが下に溜まる問題の修正（重力無効化、浮遊効果、反射係数調整など）。
  - 上記変更が、Claude Codeの提案により複数のコミット (Add CLAUDE.md for Claude Code guidance、Transform game into PRIMAL DESIRE...、Optimize game performance and fix star gravity issue など) としてGitHubリポジトリにプッシュされた。

・webサイト

GitHub Actionsによる自動デプロイと動作確認
- 証跡: GitHubリポジトリのActionsタブの実行履歴、S3バケットのファイル構成、ウェブサイトURLへのアクセス結果（ユーザー報告に基づく）。
- 成果物:
  - main ブランチへのプッシュをトリガーとして、GitHub Actionsワークフローが正常に実行され、public/ ディレクトリの内容がS3バケット tano-0603game-bucket のルートに自動で同期（デプロイ）されることを確認。
  - S3バケットには index.html と error.html が期待通りに配置され、旧ファイルが --delete オプションにより削除されていることを確認。
  - 静的ウェブサイトのURL (http://tano-0603game-bucket.s3-website-ap-northeast-1.amazonaws.com/) にアクセスし、ゲームが表示されることを確認（Claude Codeによる変更後の「PRIMAL DESIRE」が表示されているはず）。
- 成果物:
  - 更新された public/index.html
  - 更新された public/error.html

・Claude Code導入と利用

インストールと初期設定
- 証跡: ターミナルでの node --version、npm install -g @anthropic-ai/claude-code の試行とエラー対処（NODE_EXTRA_CA_CERTS 設定、npmグローバルインストールディレクトリ変更）、Claude Codeツール起動後の対話ログ。
- 成果物:
  - Node.jsバージョン v22.16.0 を確認。
  - 企業のVPN環境（GlobalProtect）に起因するSSL証明書エラー (SELF_SIGNED_CERT_IN_CHAIN) に対し、企業のCA証明書を NODE_EXTRA_CA_CERTS 環境変数に設定することで対処。
  - npmのグローバルインストール時のパーミッションエラー (EACCES) に対し、npmの prefix をユーザーホームディレクトリ以下 (~/.npm-global) に変更し、~/.npm-global/bin をPATHに追加することで対処。
  - @anthropic-ai/claude-code のグローバルインストールに成功。
  - claude コマンドでツールを起動し、表示テーマ選択、Claudeアカウント (tanoyuusuke09@gmail.com) でのログインとブラウザ認証、MFA設定、セキュリティノート確認、ターミナル設定（Shift+Enterでの改行）の承諾、プロジェクトフォルダ (/Users/tano/0603game) の信頼設定を完了。
  - VS Code拡張機能のインストール通知を確認。
初期利用とコード改善体験
- 証跡: Claude Codeツールとの対話ログ。
- 成果物:
  - /init コマンドを実行し、Claude Codeによるプロジェクト分析と CLAUDE.md の自動生成・更新を体験。分析のためにClaude Codeがローカルコマンド (ls -la, find) を実行する際の許可プロセスを経験。
  - Claude Codeにプロジェクト概要の要約を依頼し、その応答を確認。
  - Claude Codeに「最もフィジカルで、最もプリミティブで、そして最もフェティッシュなゲームに改良してください」と指示し、それに応じてゲームのテーマ、タイトル、ロジック、UI、サウンド（試み）が大幅に変更されるプロセスと、その結果生成されたコード (public/index.html) を確認。
  - 変更後のゲームで発生したJavaScriptエラー（変数重複宣言）とボタンの不具合をClaude Codeに報告し、AIによるデバッグとコード修正、パフォーマンス改善の提案と実装を体験。
  - 一連のAIによる変更が、Claude Codeの提案によってGitリポジトリにコミット・プッシュされた。

・次回の実施内容

Webサイトの一般公開準備 (Route 53 & CloudFront)
- 独自ドメイン名の取得状況を確認（もし未取得であれば取得方法の検討）。
- AWS Certificate Manager (ACM) を利用して、公開用ドメインのSSL/TLS証明書をバージニア北部リージョン (us-east-1) で発行する（CloudFrontで利用するため）。
- CloudFrontディストリビューションを作成し、以下の主要な設定を行う。
  - オリジンとしてS3バケット (tano-0603game-bucket) のウェブサイトエンドポイントを指定。
  - （推奨）オリジンアクセスアイデンティティ (OAI) またはオリジンアクセスコントロール (OAC) を設定し、S3バケットへの直接アクセスを制限し、CloudFront経由のアクセスのみを許可する。
  - ビューワープロトコルポリシーを「Redirect HTTP to HTTPS」または「HTTPS Only」に設定。
  - 代替ドメイン名 (CNAMEs) に取得した独自ドメイン名を設定。
  - カスタムSSL証明書としてACMで発行した証明書を選択。
  - デフォルトルートオブジェクトを index.html に設定。
  - 必要に応じてキャッシュポリシーやエラーページの設定を調整。
- Route 53にホストゾーンを作成（もしドメインをRoute 53で管理する場合）。
- 作成したホストゾーンに、独自ドメイン名からCloudFrontディストリビューションのドメイン名へのエイリアスレコード (AレコードおよびAAAAレコード) を作成する。
- （任意）AWS WAFをCloudFrontディストリビューションに関連付け、基本的なセキュリティルール（例: AWS Managed Rules - Core rule set）を設定することを検討する。
動作確認
- DNSレコードの伝播後、独自ドメイン名でHTTPS経由でウェブサイトにアクセスできることを確認する。
- CloudFrontのキャッシュが意図通りに機能しているか、簡単なテストを行う。
- パフォーマンスに変化があるか確認する。
Claude Codeによるサポートとドキュメント更新
- 上記のCloudFrontやRoute 53の設定手順、あるいは発生した問題について、Claude Codeに相談し、サポートを求める。
- CLAUDE.md や README.md に、新しいインフラ構成（CloudFront, Route 53利用）に関する情報を追記・更新する。

はい、承知いたしました。
本日実施された内容について、共有いただいたログやこれまでの会話内容を元に、日報として詳細にまとめます。

2025年06月06日

・本日実施した主な内容（証跡と成果物のサマリー）

本日は、新しいPC環境への移行に伴う開発環境の再セットアップから始まり、AIコーディング支援ツール「Claude Code」の導入と、それに伴うトラブルシューティング（SSL証明書、npmパーミッション）を行いました。その後、プロジェクトの方針を再設定し、Claude Codeとの対話を通じて「リズム・サバイバー」という新しいゲームを仕様書から一気に実装。さらに、複数回のフィードバックと修正依頼を繰り返し、ゲームのバグ修正、UI/UX改善、ゲームメカニクスの大幅な変更といった、極めてアジャイルな開発プロセスを実践しました。最終的に、一連の変更はGitリポジトリにプッシュされ、構築済みのCI/CDパイプラインによってS3へのデプロイが実行されました。

・claude code

インストールと初期設定
- 証跡: ターミナルでの node --version, npm install -g @anthropic-ai/claude-code の実行履歴とエラーログ、および NODE_EXTRA_CA_CERTS の設定履歴。
- 成果物:
  - 企業のVPN/プロキシ環境に起因するSSL証明書エラー (SELF_SIGNED_CERT_IN_CHAIN) に対し、NODE_EXTRA_CA_CERTS 環境変数を設定することで正常な通信を確立。この設定を ~/.bashrc に追記し、恒久的な対策を実施。
  - npmのグローバルインストール時のパーミッションエラー (EACCES) に対し、インストール先ディレクトリをユーザーホーム配下 (~/.npm-global) に変更し、PATHを通すことで解決。
  - @anthropic-ai/claude-code のグローバルインストールに成功し、claude コマンドが実行可能になった。
  - claude ツールの初回起動ウィザードに従い、表示テーマの選択、Claudeアカウントでのログイン認証（MFA含む）、セキュリティノートの確認、ターミナル設定、プロジェクトフォルダの信頼設定を完了。
AIとの協調による開発・改善
- 証跡: Claude Codeツールとの詳細な対話ログ。
- 成果物:
  - プロジェクトのリセット: 「ゲームを作り直したい」という指示に基づき、Claude Codeが rm コマンドを実行し、既存のpublic/index.html と public/error.html を削除。
  - 仕様書からのゲーム生成: あなたが提示した「リズム・サバイバー」の仕様書案をClaude Codeが解釈し、ゲームの全ロジックとスタイルを含む単一の public/index.html ファイルを新規に一括生成。
  - 反復的な機能改善とバグ修正: あなたからの日本語による複数のフィードバック（BGM、UI、難易度、ゲームメカニクスなど）に基づき、Claude CodeがTODOリストを作成し、コードの Read と Update を繰り返して以下の多数の改善を実装。
    - BGMの連続再生に関するバグ修正。
    - UI要素の重複解消とレイアウト調整。
    - 攻撃が発射されない問題の修正。
    - 画面外の敵を示す矢印インジケーターの表示ロジック改善。
    - 必殺技エフェクトの強化（画面揺れなど）。
    - ダメージを受けた際の警告エフェクトの追加。
    - コンボ数に応じた効果音の変調機能。
    - 左クリックアクションの変更（格闘→時限爆弾→武器チェンジ）。
    - 武器のレアドロップシステムの導入。
    - ステージ制から30分カウントダウンのフェーズ制へのゲーム進行システムの変更。
    - ネオンをテーマにした背景デザインへの刷新。
    - ゲーム内テキストの日本語化。
  - Git操作の自動化: あなたの「pushして」という指示に基づき、Claude Codeが git add, git commit, git push を自動で実行し、一連の変更をGitHubリポジトリに反映。

・aws

証跡: 無し（本日はAWSコンソールやAWS CLIでの直接的な新規設定作業は行いませんでした）。
成果物:
- 本日実施したGitのプッシュ操作により、以前設定したGitHub ActionsのCI/CDパイプラインが正常にトリガーされ、OIDC認証とIAMロール (GitHubActionsRole-0603game-S3Sync) を利用して、更新されたゲームファイルがS3バケット (tano-0603game-bucket) に自動でデプロイされたことを間接的に確認しました。既存のAWSインフラが意図通りに機能していることが証明されました。

・静的webサイト

証跡: 最終的にコミット・プッシュされた public/index.html ファイル。
成果物:
- これまでのバージョンから完全に作り直され、仕様書に基づいて多機能化した新しいゲーム**「リズム・サバイバー」**の index.html が完成。
- 多くのUI/UX改善、エフェクト強化、ゲームバランス調整、新機能（武器チェンジ、武器ドロップ、フェーズ制など）が実装された。
- 新しい error.html もClaude Codeによって生成された。

・次回実施

Webサイトの一般公開 (Route 53 & CloudFront)
- DNS検証の完了: お名前.comの管理画面にログインし、AWS Certificate Manager (ACM) の「保留中の検証」を完了させるため、指定されたCNAMEレコードを追加する。証明書のステータスが「発行済み」になるのを待つ。
- CloudFrontディストリビューションの作成:
  - S3バケットをオリジンとして設定。
  - オリジンアクセスコントロール (OAC) を設定し、S3バケットへの直接アクセスを制限する。
  - ACMで発行した証明書（バージニア北部リージョン）を選択し、独自ドメインを設定。
  - HTTPS通信を強制するよう設定。
- Route 53でのDNSレコード設定:
  - 取得したドメインのホストゾーンに、CloudFrontディストリビューションを指すエイリアスレコード（Aレコード/AAAAレコード）を作成する。
- 動作確認:
  - 独自ドメイン名でHTTPS経由でウェブサイトにアクセスできることを確認する。
ゲームの最終調整とドキュメント更新
- 公開されたウェブサイトで最終的なゲームプレイテストを行う。
- README.md と CLAUDE.md の内容を、完成したゲームの仕様に合わせて更新する。

はい、承知いたしました。
本日実施した内容について、証跡、成果物、そして日報を詳細に作成します。

2025年06月07日

・本日実施した主な内容（証跡と成果物のサマリー）

本日は、昨日までに準備したAWSリソースと取得した独自ドメインを使い、静的Webサイト「リズム・サバイバー」をインターネットに一般公開するための、一連のインフラ設定を完了させました。具体的には、お名前.comとAWS Route 53を連携させ、DNSの管理をAWSに委任しました。その後、AWS Certificate Manager (ACM) でSSL/TLS証明書を有効化し、Amazon CloudFrontディストリビューションを作成・設定。最後にRoute 53でドメインとCloudFrontを紐付け、発生したアクセスエラーのトラブルシューティングを行い、独自ドメインでのHTTPSアクセスを成功させました。

・aws

AWS Route 53
- 証跡: AWSコンソールのRoute 53 ホストゾーン作成画面のスクリーンショット (スクリーンショット 2025-06-07 23.11.55.png)、およびDNSレコード設定完了後のスクリーンショット (スクリーンショット 2025-06-07 23.38.46.png)。
- 成果物:
  - ドメイン tanoyuusuke.com のためのパブリックホストゾーンをRoute 53に手動で作成しました。
  - 作成されたホストゾーンに自動で割り当てられた4つのネームサーバー（NS）レコード（ns-167.awsdns-20.com 等）を確認しました。
  - 最終ステップとして、以下の2つのAレコード（エイリアス）を作成し、tanoyuusuke.com および www.tanoyuusuke.com へのトラフィックをCloudFrontディストリビューション (d13i0kwe01tkfs.cloudfront.net) にルーティングするよう設定しました。
    - レコード名: tanoyuusuke.com (空欄) -> CloudFrontエイリアス
    - レコード名: www.tanoyuusuke.com -> CloudFrontエイリアス
AWS Certificate Manager (ACM)
- 証跡: AWSコンソールのACM証明書詳細画面のスクリーンショット (スクリーンショット 2025-06-07 23.32.19.png)。
- 成果物:
  - お名前.comで管理されているドメインのDNS設定を変更（ネームサーバーをRoute 53に向ける）することで、DNS検証を完了させました。
  - tanoyuusuke.com と *.tanoyuusuke.com の両方をカバーする証明書のステータスが「保留中の検証」から「発行済み」に正常に移行したことを確認しました。
Amazon CloudFront
- 証跡: AWSコンソールのCloudFrontディストリビューション詳細画面のスクリーンショット (スクリーンショット 2025-06-07 23.33.33.png)。
- 成果物:
  - 新しいCloudFrontディストリビューション (E28Z9SERAQOOB) を作成・デプロイしました。
  - 主な設定内容：
    - オリジン: S3バケット tano-0603game-bucket を指定。
    - オリジンアクセス: Origin Access Control (OAC) を新規作成し、S3バケットへの直接アクセスを制限するセキュアな構成を採用。
    - ビューワープロトコルポリシー: Redirect HTTP to HTTPS に設定。
    - 代替ドメイン名 (CNAME): tanoyuusuke.com と www.tanoyuusuke.com を設定。
    - カスタムSSL証明書: ACMで発行済みの証明書をアタッチ。
    - デフォルトルートオブジェクト: index.html を指定。
    - Origin Shield および 標準ログ はコストと要件を考慮し、「無効」に設定。
Amazon S3
- 証跡: ユーザーからの Access Denied エラーの報告と、その後の解決報告。
- 成果物:
  - CloudFrontからのアクセス時に発生した Access Denied エラーを解決するため、S3バケット tano-0603game-bucket のバケットポリシーを修正。CloudFrontのOAC設定画面から提供されるポリシーをコピーし、S3バケットに適用することで、CloudFrontからのアクセスを正しく許可しました。

・次回実施

ゲームコンテンツの改善と最終調整
- https://tanoyuusuke.com で公開されたウェブサイトで、ゲームの動作、パフォーマンス、UI/UXを改めてテストする。
- Claude Codeとの対話を再開し、見つかった課題の修正や、新しい機能の追加、ゲームバランスの最終調整などを行う。
ドキュメントの更新
- README.md と CLAUDE.md の内容を、完成したゲームの最終的な仕様に合わせて更新し、リポジトリのドキュメントを最新の状態に保つ。
より実践的な開発フローへの移行（検討）
- develop ブランチを作成し、プルリクエストを介して main ブランチにマージするワークフローを導入する。
- 上記に伴い、GitHub Actionsのトリガーを、main ブランチへのプルリクエストがマージされた時に変更することを検討する。
セキュリティの強化（検討）
- AWS WAFをCloudFrontディストリビューションに導入し、基本的なウェブ攻撃からサイトを保護するためのルール（例: レートベースのルール、SQLインジェクション対策など）を設定することを検討する。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up