概要 IP制限をかけた事業者用webアプリを作ったので、技術選定の背景やハマりどころ、細かいtipsをまとめました。少しでも参考になれば幸いです。 技術スタック: アプリケーション: Nuxt(SPA), Amplifyライブラリ インフラ: Terraformで管理。(主に)CloudFront & S3の構成 セキュリティ要件: IP制限を行い、事業者のIPからしかアクセスできないこと ipass認証を挟み、事業者しかログインできないこと 前提: フロントエンドから利用するAPIは別途用意されており、事業者のIPからのみ利用できるようになっています。(詳細は割愛します。) サンプルGitHub Repository サンプル用のRepositoryを作ったので参考にしてみてください。 詳細 インフラアーキテクチャ CloudFront+S3 悩み Amplify Hostingを使うか
![Terraform, Nuxt(SPA)+Amplify, CloudFront+S3で閲覧制限付きのサイトを作った話(サンプル付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7f59e02a1ea2a5359b1e7627a60651832273ac9/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--NtJQdTWF--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATerraform%25252C%252520Nuxt%252528SPA%252529%25252BAmplify%25252C%252520CloudFront%25252BS3%2525E3%252581%2525A7%2525E9%252596%2525B2%2525E8%2525A6%2525A7%2525E5%252588%2525B6%2525E9%252599%252590%2525E4%2525BB%252598%2525E3%252581%25258D%2525E3%252581%2525AE%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akoheiwamu%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUzYTViMzIyNWYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)