おっ？！猪谷いけんのか？(part5)_ブログシステムのインフラ構築編
こんにちは。猪谷です♪
年内にブログ5本投稿する目標を掲げて、今回5本目の記事となります。
ついに、最後の記事です！！
今回は、ヘッドレスCMSにてブログシステムを作ることになった本ブログプロジェクト。
インフラ大好物の猪谷が、インフラ構築をした時の話になります。
まずは、奄美LOVE先輩へ構成の相談
Gatsbyを使用してブログを作成し、S3で公開するという目的で開発がスタートしたが、猪谷は分からなくなって固まってしまった。
※開発スタートの経緯については、前回の記事に詳しく書かれていますので、まだ読まれていないというかたは、こちらからご確認ください。
S3でブログページを公開するって、どうすれば良いんだろう・・・
よし、こんな時は奄美LOVE先輩に聞こうw
猪谷「GatsbyをS3で公開するってどうすればできるんですか？」
※猪谷は安定の丸投げを繰り出した。
奄美LOVE先輩「構成のイメージとしては、S3とRoute53を設定するだけかな。
S3は静的ウェブサイトホスティングを有効化とRoute53からのアクセスを許可して、Route53は設定変更すればいけるよ。」
猪谷「ありがとうございます！」
と、奄美LOVE先輩からヒントをもらった猪谷は、ヒントをもとに調べてみることに。
調べていくと、意外に簡単にできそうだと気づいた猪谷。
※奄美LOVE先輩：フロントエンドからバックエンド、インフラ構築まで幅広く担当するフルスタックエンジニア。
※S3：AWSによって提供されている、データを格納・管理できるオブジェクトストレージサービス
初期の猪谷構築内容
以下は、実際に実装した際の簡易な手順になります。
１．Route53に公開したいドメインを設定する
２．S3に公開用のバケットを作成する（バケット名はドメイン名を指定する）
３．作成したバケットのプロパティタブを開き、『静的ウェブサイトホスティング』の編集をクリックする
４．添付画像に設定している内容にて、変更する
５．バケットのアクセス許可タブを開き、『ブロックパブリックアクセス (バケット設定)』の編集をクリックする
６．パブリックアクセスをすべてブロックのチェックを外す
※詳しい設定手順を確認されたいかたは、AWSの公式ドキュメントからご確認ください。
また、今回は本番公開前ということもあり、S3のバケットポリシーにIP制限の設定をしました。
ここまでの設定で、おおよそ1時間ほどの作業でした。
一通りの設定を終えたので、GatsbyでビルドしたファイルをS3へアップロードしてみたところ、問題なく表示されました。
猪谷「おー、見れた！奄美LOVE先輩、これで大丈夫ですよね？」
奄美LOVE先輩「どれどれ。うん、設定も特に間違ってなさそうだし、問題ないと思うよ。」
猪谷「よっしゃー！」
※Gatsby：Reactをベースに開発されているフレームワークで、オープンソースの静的サイトジェネレーター
本番公開前の事件集
無事本番公開用のインフラ構築が終わったと思われましたが、内部確認を進めている中で様々な課題が発生。
①IP制限からベーシック認証への変更要望
公開前のWEBページのため、手っ取り早く制限をかけるため、IP制限を適用していた猪谷。
Gatsbyの開発をしてくれたウッチー先輩から一言。
ウッチー先輩「レスポンシブデザインも確認したいから、IP制限ではなくベーシック認証のほうが嬉しいなー。」
猪谷「ベーシック認証ですね、確認してみます。（どうやるんだ？）」
調べてみると、CloudFrontとLambdaを使って設定することが分かった猪谷。
本番公開直前のタイミングだったため本番では断念し、後日構築したステージング環境に適用しました。
ステージング環境適用時、サーバ証明書の設定がうまくできてないことに気づかず、少し時間がかかってしまいました。
②IP制限の設定変更
本番公開直前で、社内VPNに接続しているにも関わらず、403となりブログページにアクセスできないという事象が発生。
どうやら、直前に変更したhttpからhttps化が影響していることが判明。
対応方法が分からず固まってしまう猪谷、奄美LOVE先輩を召喚。
猪谷「奄美LOVE先輩、どうすれば良いですか・・・？（もはや丸投げしかしていないｗ）」
奄美LOVE先輩「ちょっと、確認してみるよ。」
30分後、奄美LOVE先輩から連絡がありました。 奄美LOVE先輩「設定変更してみたけど、どうかな？」
猪谷「繋がるようになりました！問題なさそうです！」
奄美LOVE先輩「良かった。じゃあ、これで大丈夫だね。」
猪谷「ありがとうございます！」
のちのち、奄美LOVE先輩へ確認してみると、https化でCloudFrontを適用した際に、以下2点の設定が必要だったとのこと。
１）CloudFrontのオリジンに、カスタムヘッダーを追加する
２）S3バケットポリシーに、カスタムヘッダーの内容を追加する
くそー、早く奄美LOVE先輩みたいに、さらっと解決できるようになりたいと思う猪谷でした。
と、色々と事件が起こりましたが、ついに本番公開の日を迎え、無事にリリースできました。
※ウッチー先輩：デザインおよびフロントエンドを担当するエンジニアです
※CloudFront：動画やアプリケーションなど、静的または動的なコンテンツを迅速かつ安全に配信できるコンテンツデリバリネットワークサービス
※Lambda：サーバレスを実現するためのサービスで、イベントの発生に応じてプログラムを実行する環境を提供する
※WAF：WEBサイト上のアプリケーションに特化したファイアウォールで、脆弱性を突いた攻撃へ対するセキュリティ対策
まとめ
年内5本投稿を目標にすすめてきた『おっ？！猪谷いけんのか？』ですが、今回ついに5本目の投稿となり、無事目標達成しました。
アウトプットすることが苦手だったので、最初はどうなることかと思っていましたが、なんとかやりきることができました！
勉強中のインフラ関連について、これからもアウトプットする場として、ブログ記事をかければと思いますので、温かい目で見守っていただけると嬉しいです。
猪谷、まだやれんのか？
制作進行談
『おっ？！猪谷いけんのか？』の制作進行を担当したmotoyaです♪
今回無事に5本記事を投稿コミットを達成することができました！
猪谷さん頑張ったよ(´；ω；｀)
思えば11月半ばに周りから絶対ぽしゃるわーみたいな空気の中、2人でコミットした『週1の5本投稿』・・・
金曜の午前中には叩き台あげてって言ってんのに、上げてくれない原稿www
毎週金曜日の午後にツンデレ画像を送って煽ったのは一生忘れませんwww
※毎週、「あー、猪谷いけないわ・・・」って思ってたのは心の中に留めときますwww
でも、なんやかんや頑張って毎週水曜日のリリースは守ることができました！
一重に猪谷さんのギリギリの頑張りの賜物です！
猪谷さん頑張ったよ(´；ω；｀)
次は、インフラエンジニアとして技術記事寄稿よろしく！！
猪谷 will be back
※motoya：入社2ヶ月でPM修行中の人。スケジュール煽るときに変な画像送りつける癖があるwww
