はじめに みなさま、はじめまして。 こちらの記事を読んでいてCDKでCloudFront+Lambda(DockerImage)を組んで遊んでみたいと思い記事にしてみました。(SSR Streamingはしてないです、すみません) またカスタムヘッダーでアクセス制限すること自体セキュリティ的にどうかという話もあるかもしれないですが、あくまで一つのパターンとして捉えていただければ幸いです。 構成 タイトル通りですがアクセス制限はCloudFrontからカスタムヘッダーを送信しNext.jsのミドルウェアで行います。 Next.jsのセットアップ まずNext.jsのセットアップをします。 mkdir nextjs-lambda npx create-next-app frontend ✔ Would you like to use TypeScript? … Yes ✔ Would you
![Next.jsをCloudFront+Lambdaでサーバーレス化しカスタムヘッダーでFunctionURLsへの直アクセスを制限してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/eff83b7e948658caaed23c872cfbd8dc365bf4f3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--MBb42kC3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252582%252592CloudFront%2525EF%2525BC%25258BLambda%2525E3%252581%2525A7%2525E3%252582%2525B5%2525E3%252583%2525BC%2525E3%252583%252590%2525E3%252583%2525BC%2525E3%252583%2525AC%2525E3%252582%2525B9%2525E5%25258C%252596%2525E3%252581%252597%2525E3%252582%2525AB%2525E3%252582%2525B9%2525E3%252582%2525BF%2525E3%252583%2525A0%2525E3%252583%252598%2525E3%252583%252583%2525E3%252583%252580%2525E3%252583%2525BC%2525E3%252581%2525A7FunctionURLs%2525E3%252581%2525B8%2525E3%252581%2525AE...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3ANHatanaka%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2FiMWVmODg2OWIuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AO-KUN%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JlNzgyMmU4OWEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)