デプロイでハマった話② AccessDenied・キャッシュ・PowerShell文字化け

デプロイでハマった話② AccessDenied・キャッシュ・PowerShell文字化け | システム開発はAIに任せよう！

AWSのS3にファイルをアップロードして、CloudFrontで配信する。理屈はシンプルです。

でも実際にやると、なぜか動かない。表示されない。更新が反映されない。スクリプトが走らない。

WebサイトやWebツールを何本かAWSにデプロイしてきて、毎回同じ場所で詰まりました。同じ轍を踏んでほしくないので、地雷3箇所をまとめておきます。

地雷①：AccessDenied — バケットポリシーの貼り忘れ

S3バケットを作って、CloudFrontのディストリビューションを作成する。ここまではAWSのコンソールに案内されながら進められます。

問題は、CloudFrontの設定画面でOAC（オリジンアクセスコントロール）を作成すると、画面に「ポリシーをコピー」というボタンが出てくること。

このボタンを押して、S3バケットのバケットポリシーに貼り付ける——という手順が必要なのですが、ここをスキップするとAccessDeniedになります。

このOACポリシーは「CloudFrontだけがS3にアクセスできる」という許可を与える設定です。貼らないとCloudFrontがS3にアクセスできないため、アクセスしてきたブラウザにAccessDeniedが返ってきます。

なぜ詰まるかというと、S3とCloudFrontの設定は画面が別々で、ポリシー貼り付けは「S3コンソールに戻って手動で行う」という一手間があるからです。CloudFrontの設定完了画面に「あとS3にポリシー貼ってね」と書いてあるのですが、達成感でページを閉じてしまいがちです。

対処はシンプル。CloudFrontディストリビューション作成後は必ずS3バケットのバケットポリシーを確認する。ポリシーが空なら貼り付け忘れです。

HTMLを修正してS3にアップロードした。ブラウザでアクセスしたら古いページのまま。シークレットモードで開いても同じ。別のブラウザでも同じ。

CloudFrontはコンテンツをキャッシュして高速配信するサービスなので、S3を更新してもCloudFrontのキャッシュが残っている間は古いコンテンツが配信され続けます。

解決するには「無効化（Invalidation）」という操作が必要です。

CloudFrontのコンソールからディストリビューションを選択→「無効化」タブ→「無効化を作成」→パスに`/*`を入力して実行。これで全ファイルのキャッシュが消えます。

コマンドで叩く場合はこうです。

aws cloudfront create-invalidation --distribution-id XXXXXXXXXXXXX --paths "/*"

「更新したのに反映されない」のほぼ全部がこれです。S3へのアップロードとセットで、CloudFrontの無効化もルーティンに入れておくと詰まらなくなります。

デプロイ作業を毎回手動でやるのが面倒になったので、PowerShellスクリプトにまとめました。S3同期とCloudFront無効化を一発で実行するスクリプトです。

ところがこのスクリプト、ある日突然ParseErrorで動かなくなりました。

原因はスクリプト内のコメントに書いていた日本語。PowerShellスクリプトは日本語文字列が含まれるとエンコーディング問題でParseErrorになることがあります。特にWindows環境ではSJISとUTF-8の混在で不意打ちをくらいます。

解決策は「日本語を一切含まない英語だけのスクリプトを新規作成する」でした。コメントも変数名も全部英語。これで安定して動くようになりました。

AWSのCLIコマンドで日本語ファイル名を扱うのも同様で、S3にアップロードするファイルは半角英数字のみにしておくのが安全です。日本語ファイル名はトラブルの元になります。

3つの地雷を踏まないためのチェックリストです。

どれも「知っていれば一瞬で終わる」話ですが、初めて踏むと原因が全く分からず長時間詰まります。AWS初心者にとって、エラーメッセージだけ見ても何が悪いのか分からないのが一番きつい。

同じところで詰まっている人に届けば幸いです。

参考になれば幸いです。

📝 このブログでは、AIと一緒に作った作品の顛末記を書いています
ブログ「システム開発はAIに任せよう！」
👉 https://munchie.jp