この記事は、アイスタイルアドベントカレンダー2025 19日目の記事です。

はじめに

こんにちは。アイスタイルでwebエンジニアをしている下迫です。

2025年1月から、美容業界の求人情報を取り扱う求人サイトである弊社の「@cosme CAREER」というシステムの運用・開発を担当しています。

AWS構成図を書き起こしてみようと思ったきっかけ

担当サービスはAWS環境上にあります。

海外IPやbotの大量アクセスによる攻撃対応の中でWAFの設定やアクセスログ、各インスタンスのCPU使用率などの確認方法を学んでいくうちに、自分が「このサービスがAWS上でどう構成されているのか」をちゃんと理解できていないことに気付き、サービスのAWS構成図を書き起こしてみることにしました。

今回はその経緯を記事としてまとめてみました。

AWS構成図作成の進め方

AWS構成図の完成に向けて、以下の流れで進めました。

まずは自分なりに調べて構成図を作成。初めは作成・修正のしやすさを重視し、Googleスライドを使用
作成した図をチームメンバーに見てもらい、意見をもらう
作成中に不明点・疑問点があれば合わせて確認する
チームメンバーの意見をもとに構成図を修正していく
図が完成形に近づいた段階でcacooに移行

初稿：サービスのAWS構成図、大胆予想

早速完成した、生まれたてのAWS構成図がこちらです。

初稿では「今の自分が理解している範囲」でAWS構成図を作りました。
CloudWatch や S3 は、どこに配置すべきか分からず構成図の中で迷子です。
「分かっているつもりだったけど結構わかっていない自分」と向き合わされます。アウトプットって難しいですね・・・。

そして朝会でのフィードバックです。

私

利用している他のAWSサービスを知る方法がわからない…

チームメンバー

他に利用しているAWSサービスはTerraformから洗い出してみては？

図の矢印の意味も明確にしていた方がよさそう

構成図を作っていくために「何を使っているか」を把握する必要があると分かったので、
次はチームメンバーのアドバイスをもとに、Terraform からAWS利用サービスを洗い出します！

第二稿：利用しているサービス、判明

次はTerraformのファイルを確認し、実際に利用しているAWSサービスを洗い出しました。
また、それぞれが何のために使われているのかもこの段階で調べました。

Terraformから洗い出したAWSサービスは以下です。

Athena
Elasticache
EFS
Amazon Data Firehose

改めてAWS構成図に配置したものがこちらです。

把握できていなかったサービスを配置し、どのサービス同士がどのように関係しているのか、矢印の意味も分かるように修正しました。

ちなみにこちらは指摘を受けて、CloudWatch とか S3 (図の右側) を AWS Cloud 環境の外に配置してしまっていることに気付きました。そんなわけないのに…。

そして朝会でのフィードバックです。

チームメンバー

EFSとCloudWatchの配置が違うので再度調べ直してみるといいかも

リージョン、アベイラビリティゾーン、サブネットを図に追加してみては？

間違っている箇所を修正しつつ、次は AWS らしい構成（リージョン・AZ・サブネット）を加えていきます！

第三稿：それっぽくなってきた

AWS構成図を修正したものがこちらです。

EFSは2台構成のwebEC2インスタンスから参照される共有ストレージであるため、その関係が分かる位置に配置を修正しました。

また、CloudWatchは各サービスのログやメトリクスを収集していることがわかるようにVPCの外側に配置を変更しました。

情報量が増えてGoogleスライドで作成するのが若干苦しくなってきましたが、リージョンとアベイラビリティゾーンを追加しました。

そして朝会でのフィードバックです。

チームメンバー

CloudFrontとWAFのリージョンが違うので調べ直してみるといいかも

そろそろcacooに移行してもよさそう！

全体の構成が見えてきたので、最後はツールを cacoo に移して構成図を仕上げていきます！

第四稿：ついに完成！

cacoo に移行し、完成したAWS構成図がこちらです。

Googleスライドで作成していた段階ではサブネットやAZを整理して表現することが難しかったため、cacoo では全体のレイアウトを見直しました。

サービスの構成自体は第三稿から大きく変えていませんが、リージョン・アベイラビリティゾーン・サブネットの関係が一目で分かる構成図になりました。

また、CloudFrontとWAFのリージョンは東京リージョンからグローバルに修正しました。

なんだか第三稿までの手作り感あふれるAWS構成図が恋しい気もしますが、初稿の状態からここまで作り上げることができて感無量です。

おわりに

・本記事では初稿〜第四稿でまとめていますが実際は完成までもう少し試行錯誤しました。朝会でアドバイスをくださったチームメンバーのみなさま、ありがとうございました

・今回サービスのAWS構成図を書き起こしてみて、アウトプットすることで自分の理解度を自覚するところからスタートしましたが、手を動かして、間違えて、フィードバックをもらって修正する、という流れを繰り返す中でAWS構成に対する理解が少しずつ深まっていくのを感じられました。

・構成図作成のためにTerraformを確認したり、調べる過程でAWSマネージコンソールに触れる機会がたくさんあったので、AWSに慣れるいいきっかけになりました。

・今回で「完成」としていますが、サービスの変更に合わせて更新したり、より見やすい構成図に改善したりと、これで終わりではなくチームで活用できるAWS構成図として育てていきたいです。

それでは、最後まで読んでいただきありがとうございました！