React-routeで構成したSPAアプリをWAFでメンテナンスモードにするには
まなさすとりあえずこれをやる
まなさすインストール直後からなんかエラーでると思ったらVueのプラグインと相性悪いらしい （今まで大丈夫だった気もするけど、なんでや）
まなさすなんでや
まなさす6で変わったけど参考にしてる資料は6以前ってことらしい
とりあえず6に書き換えてみようとしてみることにした
まなさすSwitchをRoutesに書き換えるだけでいいらしいが、http://localhost:3000/にアクセスしても何もでない。間違えてるのかな
まなさすこっちをコピペしてもまっしろだ
まなさす公式っぽいのを参照してる。Routesがなければちゃんと動くんだがこれは…
まなさすあ、index.tsxにおまじない書き忘れてたからRouter使えんよってなってたのか理解 ごめんね
まなさすrouterhはクリアしたんでamplifyへのデプロイいきまっしょい
まなさすついでにemojiprefixしていくでよ
まなさすこれをやっていく
まなさすで、WAFで何がやりたいのかっていうと、これがやりたい！
これがやりたいのだけど………はて、これどうやってやればいいんじゃろな
まなさすCloudFormationのテンプレートファイルっていってるからなんかデキる人はこれをぺぺぺーって動かすだけで動くんじゃろけど、はて…。
まなさすそもそもWAFって誰やねんって話だけどWeb Application Firewallらしい。つまりオンプレサーバでしてたようなFirewallの設定をここでできるって話だな それならAWSのコンソール開いてみればわかりそうかしら
まなさすcloudfrontnのリソースは選択できるのにamplifyのリソースは選択できないじゃんか〜！ってしてたら同じことで悩んでる人がおった
まなさすWAFの設定手順多すぎん？と思ったけど調べた感じだとamplifyでホスティングしてる場合はどうしてもそうなるっぽいな 手軽さの代償か
まなさすかといって構成変えるよりはWAFの設定をした方が楽そうだな
まなさすcloudfront+S3構成へのデプロイは結構お手軽にできるのね
まなさすとはいえ既存環境だとﾃｷﾄｰに変更するわけにもいかんだろうし既存環境がamplify hostingだった場合はまあ…考えよう
まなさす思ったより時間かかりそうなんで休憩入っちゃいましょう うんうん
まなさすamplifyの権限しかつけてなくてcloudfrontへのデプロイで落ちちゃってたから権限つけて再デプロイ流してごはん
まなさすおっしゃ デプロイうまくいった
まなさすデプロイうまくいったけどいきなりアクセスDenyされてるwwwWAFあけてあげないと通らないのはオンプレと同じなのね
まなさすおなかいっぱいだしちょっとおやつしてからにしよっと
まなさす再開
そしてこれだとドメイン用意しないといけない感あるな
まなさすふつーにWAFを試したいだけなんじゃがいも…とりあえず読み進めて飛ばせる手順は飛ばしてやってみるか
まなさすおっっけ〜〜〜〜〜〜〜〜〜なんとなく理解したからまとめるぜ
- 大前提としてWAFとSPA（react-router）を一緒に利用する時に注意が必要
- なぜならSPAにおける『https://hogehoge.com → https://hogehoge.com/about』はサーバを介していない。サーバを介していない以上は『サーバアクセスに対する壁であるファイアウォールは機能しない』。
- amplifyの『書き換えて、リダイレクト』という機能も使えそうだが、これもWAFの応用みたいなものだと思うので、SPAのルーティングでは機能しない。
- SPA内におくとファイアウォールが機能しないことへの回避策としては『SPAのリソースはすべて塞ぎ、メンテページはSPAの外に置いておく』という手法が有効となる
- A. cloudfrontはパスパターンを制御することでcloudfront資材とS3資材の両方を同一ドメインで扱うことができる。このしくみを利用し、maintenance.htmlをS3に置いておくことでSPAの制御の外にできる
- B. maintenance.htmlだけpublicディレクトリに置いておく。手軽な策ではあるかもしれない
- WAFの方がルールの付け替えが楽（amplifyは追加削除しかないので、メンテの度に追加と削除を行うことになる）なので、WAFを押したいが、WAFはamplify資材には有効にならないため、S3+cloudfront構成への移行が難しい場合は、amplifyのルールポチポチが良さそう