テックブログWizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。Lambda@EdgeをデプロイしCloudFrontへ設定する8確認まとめLambda@EdgeとはCloudFrontのエッジサーバでコードを実行するLambda関数です。配信をカスタマイズ出来ます。感覚としてはCloudFrontのフックで動くLambda、という感じですが考慮する点・制約がいくつかあります。番号付きバージョンのみをトリガーに設定出来る(エイリアスに設定出来ない)バージニア北部(us-east-1)リージョンのみ詳しくはドキュメント設定出来るフックLambda@Edgeがフックに設定出来る箇所は四つあります。ビューワーリクエストビューワーレスポンスオリジンリクエストオリジンレスポンスキャッシュがある時はオリジンリクエスト・オリジンレスポンスは発生しません。例:webp画像を配信して表示速度高速化したいリクエストした画像(jpeg,png)のwebpファイルが存在したらwebpファイルを取得する存在しない場合はwebpファイルを作成してから取得するこのようなLambda@Edgeを作成し、オリジンリクエストに設定してみます。前提:S3+CloudFrontの構成は既に作成されているものとする。Lambdaを用いたS3画像の取得・加工はドキュメントを参考にしています。最初に述べた制約に則り関数を作成します。今回の設定は以下です。request;};4デプロイパッケージを作成convert-webpフォルダ(名前は任意)を作成し、そこにindex.jsを入れ、そこにnpmでsharpライブラリをインストールします。sharp今回の場合のファイル構造は、以下のようになります。...5.zipファイルをアップロード作成したファイルをzipへ圧縮し、「関数コード」→「アクション」→「.zipファイルをアップロード」の手順でアップロードを行います。6テストを行ってみるこちらのドキュメントより、オリジンリクエストのイベント構造を確認出来ます。Lambda@EdgeをデプロイしCloudFrontへ設定する「デザイナー」→「トリガーの追加」をクリックします。「トリガーを選択」→「CloudFront」で出現する「Lambda@Edgeへのデプロイ」項目を選択します。デプロイを確認をチェック以上を入力し「デプロイ」をクリックで設定完了です。headerのcontent-typeがimage/webpになっていればOKです!注意点なのですが今回はオリジンリクエストにフックしているため、キャッシュが残っている状態だとオリジンリクエストが発生せず関数が発火しません。確認の際はご注意ください。まとめ今回は省略していますが、CloudFrontのheaderのホワイトリストでAcceptを追加し、webpを許可しているブラウザかの確認の処理があった方が良いかと思います。Lambda@Edgeを使用せずにS3へのオブジェクト追加をフックにしたLambdaでwebpファイルを生成するという方法も考えられますが、同一バケットの「オブジェクト生成」フックで新規オブジェクト追加する構成は再起的に実行されてしまう危険性があるため推奨されていません。キャッシュがない時(オリジンリクエストが発生する時)の起動は体感でも遅く感じるので、ユースケースに合わせてキャッシュの有効期限を長くしたりなど対処した方が良いかなと思いました。最近話題のLambdaのコンテナイメージフォーマットもどうやら使えるようなので、こちらも試してローカルまで一貫したサクサク開発にしてみたいです。読者になる関連記事2022-01-25【Laravel】L5-Swaggerを導入しつつBasic認証も設定するLaravelプロジェクトへのL5-Swagger導入とBasic認証の設定につ...2021-11-08Next.jsのmiddlewareを使ってbasic認証を実装するこんにちは、フロントエンドエンジニアの髙橋です。Workerを使ってOpenAPIに寄り添ったテストを行う。今回は、現在開発しているプロダクトに、テストを導入するにあ...2021-08-05NextAuth.jsでカスタムログインページを実装する方法こんにちは、フロントエンドエンジニアの松尾です。最近はNext...2021-07-26Puppeteerを使ったツールの構成についてこんにちは、フロントエンドエンジニアの高橋です。(1)リンク利用規約/免責事項このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。はてなブログをはじめよう!wiz012さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。