はじめに
フロントエンドとしてAPI GatewayにPOSTリクエスト投げるhtml書いたのでS3に置いてCloudFrontからアクセスさせるようにする
ベタな構成だけどちょい引っ掛かったのでメモ
1. S3側でバケット作る
汎用バケットしか使ったことないけど、1桁ミリ秒のレイテンシを求めるときはディレクトリバケットを使うらしい。
ディレクトリバケットの場合、データは単一のアベイラビリティゾーン内で冗長。90日間リクエストが無い場合、非アクティブ状態になり、読み取りと書き込みができなくなる。アクセスリクエストをすると数分でアクティブな状態に戻る。
レイテンシーは今回気にしないので汎用バケットで作る。
いったんパブリックアクセスは全ブロックで作って、CloudFrontの設定のときバケットポリシー制御に切り替える。
2. CloudFrontでディストリビューションを作成する
ディストリビューション作成の際、オリジンアクセスでOrigin access control settings(OAC)を選択し、新規作成か既存のOACを設定する。
ディストリビューションを作成するとS3のバケットポリシー更新してねって出るのでコピーしておく
コピーし損ねたらディストリビューションのオリジンタブでS3を選択して「編集」をクリックするとまたポリシーをコピーできる。
3. S3のバケットポリシーを変更する
コピーしたバケットポリシーをS3バケットに適用してディストリビューションのドメイン名にアクセス。
Access Denied…
ディストリビューションでデフォルトルートオブジェクト設定したらアクセスできるようになった。(S3オリジンのディストリビューションにAccess Deniedされる原因は複数あるけど、少なくともバケットポリシーは更新されていた)
以下がindex.html
超シンプル、Submit!をクリックするとAPI GatewayにPOSTリクエストを送る。
LambdaがBedrockのAPIを叩いてキーワードを元に(今回は"rainy")いい感じのプロンプトを作り、別のLambdaがそのプロンプトでまたBedrockのAPIを叩いて画像生成する。
レスポンスのところは実装できてなくて、作成された画像はS3に入る。
(今のところアプリはnullが返ってくるどうしようもない感じになっている)
ファイル名をプロンプトにしてるんだけど、前はいい感じにプロンプト作れてたのに、
最近余計なものが色々くっついてしまっている
まあでもいい感じの画像ができた。
おわりに
htmlは元々作ってたので今回はS3とCloudFrontの設定のみ実施。デフォルトルートオブジェクトのところで引っ掛かったけど作業時間は1時間弱くらい。
生成された画像をアプリ側でも表示させるようにレスポンスの処理をちゃんと書くのと、プロンプトを生成するLambdaを修正してきれいなプロンプトを作らせたい。