# Cloudfront 周りの実験のまとめ 目的：　 Amplifyによって生成されるディストリビューションを元々稼働しているディストリビューションに移行して、Behaviorsによって既存コーポレートサイト(デフォルトルート)と、暮らしステーション(サブディレクトリ)の表示の振り分けを行う。 現状：　 今回の要件にSSR（Lambda＠Edge）でのレンダリングがあるためそれを踏まえて実験をする。 --- ## 設定を合わせる - Amplifyによって作られたディストリビューションのBehaviors （ディストリビューション：E2J2YNWLMX7RUI） ![](https://i.imgur.com/PvhVqnd.png) - 上記Cloudfrontディストリビュージョンでの設定をサブディレクトリ配下で設定する。 （ディストリビューション：E143I5828KR1ZM） それぞれのBehaviorsの詳細設定は同じで実行をしている。 ![](https://i.imgur.com/CtWd9f7.png) - Lambda@Edgeの関数をアタッチする。 life-station/*　に同じ関数をアタッチ。 ![](https://i.imgur.com/MGb4pJX.png) - S3のバケットポリシーにCloudfrontのOAI Keyをつかする。 ``` "Sid": " Grant a CloudFront Origin Identity access to support private content", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EK4E0BE991EPK" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::elkj9c-4tlzjj/*" }, { "Sid": "2", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1EOIOJ2J6NK3B" ``` ## 実験の結果 Deployを反映させ、Invalidationsでキャッシュの削除をしてアクセスを観察。 Rootページに対してのアクセス。 ``` curl -I https://kurashidemo.happy-bears.com/life-station/ HTTP/1.1 200 OK Content-Type: text/html Content-Length: 16924 Connection: keep-alive Date: Wed, 30 Jun 2021 05:02:45 GMT Last-Modified: Wed, 30 Jun 2021 02:02:08 GMT ETag: "8bc71dac550469df06843f872dc7cebd" Cache-Control: public, max-age=0, s-maxage=2678400, must-revalidate Accept-Ranges: bytes Server: AmazonS3 Vary: Accept-Encoding X-Cache: Miss from cloudfront Via: 1.1 6b386e52785c656425dda94f551c1d13.cloudfront.net (CloudFront) X-Amz-Cf-Pop: NRT12-C2 X-Amz-Cf-Id: xFVRFEukSqZmHZ1AKZDp7hEZHmrNjwzdQZSICUIx2qMvakBp9XSvFg== ``` リクエストhttps://kurashidemo.happy-bears.com/life-station/に対して動作の確認はできた。 また、アタッチしたLambda@Edge関数はLogを見ると動作している。 ![](https://i.imgur.com/OG7mdAQ.png) --- ## 問題点 以下がブラウザのアクセス時の挙動です。 ![](https://i.imgur.com/QVZux4L.png) ブラウザのdevツールの表示↓ ![](https://i.imgur.com/JpkJ3ck.png) ## 原因 https://kurashidemo.happy-bears.com/life-station/ URLリクエストのオブジェクトのある場所が違う。 ↓こちら、デフォルトルートつまり、Origin：ELBに対してのスクリプトのリクエストをしている。 ``` HARファイル： WebブラウザとWEBサイトの対話をログに記録するためのJSON形式のアーカイブファイル cat check.txt | jq -r .log.entries[].request.url https://kurashidemo.happy-bears.com/life-station/ https://kurashidemo.happy-bears.com/_next/static/css/19ca7c4251488302e3d2.css https://kurashidemo.happy-bears.com/_next/static/css/8f93619944e308ad159e.css https://kurashidemo.happy-bears.com/_next/static/chunks/main-cb6ab4e6ab7941723643.js https://kurashidemo.happy-bears.com/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js https://kurashidemo.happy-bears.com/_next/static/chunks/framework.5831aafde862c6abf93f.js https://kurashidemo.happy-bears.com/_next/static/chunks/0eceb729.cb0459b9d405a1261884.js https://kurashidemo.happy-bears.com/_next/static/chunks/d6a9949e.694d23cd7330e6c9ecae.js https://kurashidemo.happy-bears.com/_next/static/chunks/d9022db154fa412232c8f671ab884ad14f9d3fcd.9d46c46dba16346d46a1.js https://kurashidemo.happy-bears.com/_next/static/chunks/49802a5520d65d00cdb326b016f206433d7ea597.c9f4e0ff3cbdf6b15235.js https://kurashidemo.happy-bears.com/_next/static/chunks/7274655209f30d88ad6ea390ce4b9d70a7081adb.0b98adee1862b9b770f9.js https://kurashidemo.happy-bears.com/_next/static/chunks/d919d853cea56e8858ea3579ca1a8b833c06ebb6.2642eb11c84682c3ff20.js https://kurashidemo.happy-bears.com/_next/static/chunks/pages/_app-72f0521ecb8706088152.js https://kurashidemo.happy-bears.com/_next/static/chunks/6eeb98339f767637657cbcf1c49a36afadf35035.ccc0339cb4cc6ed10b50.js https://kurashidemo.happy-bears.com/_next/static/chunks/pages/life-station-2d97b351ca49172e3de6.js https://kurashidemo.happy-bears.com/images/logo.png https://kurashidemo.happy-bears.com/_next/static/chunks/main-cb6ab4e6ab7941723643.js https://kurashidemo.happy-bears.com/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js https://kurashidemo.happy-bears.com/_next/static/chunks/framework.5831aafde862c6abf93f.js https://kurashidemo.happy-bears.com/_next/static/chunks/0eceb729.cb0459b9d405a1261884.js https://kurashidemo.happy-bears.com/_next/static/chunks/d6a9949e.694d23cd7330e6c9ecae.js https://kurashidemo.happy-bears.com/_next/static/chunks/d9022db154fa412232c8f671ab884ad14f9d3fcd.9d46c46dba16346d46a1.js https://kurashidemo.happy-bears.com/_next/static/chunks/49802a5520d65d00cdb326b016f206433d7ea597.c9f4e0ff3cbdf6b15235.js https://kurashidemo.happy-bears.com/_next/static/chunks/7274655209f30d88ad6ea390ce4b9d70a7081adb.0b98adee1862b9b770f9.js https://kurashidemo.happy-bears.com/_next/static/chunks/d919d853cea56e8858ea3579ca1a8b833c06ebb6.2642eb11c84682c3ff20.js https://kurashidemo.happy-bears.com/_next/static/chunks/pages/_app-72f0521ecb8706088152.js https://kurashidemo.happy-bears.com/_next/static/chunks/6eeb98339f767637657cbcf1c49a36afadf35035.ccc0339cb4cc6ed10b50.js https://kurashidemo.happy-bears.com/_next/static/chunks/pages/life-station-2d97b351ca49172e3de6.js https://kurashidemo.happy-bears.com/_next/static/2HiRXEdquB4OncxapDfY5/_buildManifest.js https://kurashidemo.happy-bears.com/_next/static/2HiRXEdquB4OncxapDfY5/_ssgManifest.js ``` ## 現在解消したいエラーや課題 2点あります。 ### 1. Beheiverに対して life-station/_next/data/*のLambda関数でメモリの問題がある。 ![](https://i.imgur.com/ijcp6F7.png) [InvalidLambdaFunctionAssociationException](https://stackoverflow.com/questions/60505732/invalidlambdafunctionassociationexception-the-function-code-size-is-larger-than) ↑メモリが大きすぎると指摘されます。 Beheverのlife-station/_next/data/*　に対して arn:aws:lambda:us-east-1:697218682574:function:elkj9c-i66hxct:36 をアタッチしてます。 確認したところ、logを見る限りでは128MBは越していない。 <img width="767" alt="スクリーンショット 2021-06-30 15 15 09" src="https://user-images.githubusercontent.com/73029043/123910842-f94fda00-d9b5-11eb-8dd0-3c3b4a36439f.png"> そもそもで、Amplifyで生成したCloudfrontのディストリビューション https://console.aws.amazon.com/cloudfront/home#distribution-settings:E2J2YNWLMX7RUI でのアタッチができている。 Beheiver : life-station/_next/data/* にlambda関数をアタッチできません。 ### 2. オブジェクトのKeyが違う問題 こちらは以前に経験があります。 SPA（Angular）の例を出して申し訳ないのですが、 サブディレクトリ配下でのindex.htmlを読み込ませる場合。 ``` Originアクセス。 https://domain.com//mv-s3/ + index.html(CF2関数) <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>KurashiStagingTest</title> <base href="/mv-s3"> <<この様にS3のrootからのパスを指定 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="mv-s3/favicon.ico"> <link rel="stylesheet" href="mv-s3/styles.3ff695c00d717f2d2a11.css"></head> <body> <app-root></app-root> <script src="mv-s3/runtime.acf0dec4155e77772545.js" defer></script><script src="mv-s3/polyfills.35a5ca1855eb057f016a.js" defer></script><script src="mv-s3/main.79618c688ddc5292474a.js" defer></script></body> </html> ``` 一部抜粋すると ``` src="/runtime.acf0dec4155e77772545.js" ↑こちらを src="mv-s3/runtime.acf0dec4155e77772545.js" ``` こちらのようにrnntimeスクリプトなどスクリプト群のパスをOriginのオブジェクトと一致させることで解決をしました。 ## まとめ SSRに対してはCF2でのindex.htmlの付与が必要ない。 SSG、SPAなどの静的ホスティングのコンテンツの場合はindex.htmlをそれぞれのサブディレクトリで読み込ませる必要がある。