Another works Developers Blog

<p>こんにちは、zonです。<br>
大規模リリースが増えてきた昨今の弊社、メンテナンス画面が欲しくなり色々と調べました。</p>
<p>使用頻度は高くないですが、定期的に大規模なリリースをしたりするときにはあるべきだと思います。<br>
またトラブル発生時も対応中であることが伝えられるのでユーザーの不安もある程度解消できますね。</p>
<p>簡単そうに見えて意外といろいろな選択肢があることや、厄介な制約があることにも気がつけたので、調べたことをつらつらと書いていきます。</p>
<p>※弊社はReact, Next.jsベースのWebアプリなのでその場合のパターンが主になります。</p>
<h2>フロントベース（ReactまたはNext.js前提）</h2>
<h3>React + CloudFront + S3 + WAF</h3>
<p>クラウドフロントにWAFをアタッチする方法です。<br>
WAFからのカスタムエラーレスポンスによってCloudFrontが別のS3バケットからメンテナンスページを取得して返します。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/d7c48002-8293-9373-e3be-8d68866063f5.png" alt="スクリーンショット 2022-02-02 11.47.53.png"></p>
<ul>
<li>WAFのアタッチのみで適用でき運用が楽</li>
<li>フロントエンドの工数がかからない</li>
<li>サーバーサイドの工数がかからない</li>
</ul>
<h3>Next.js + Vercel</h3>
<p>Next.jsをVercelに乗せた場合です。Vercelはメンテナンスモードをサポートしていないのでそれっぽく自分で実装するしかありません。</p>
<ol>
<li>メンテナンスページをソース内に作成します。</li>
<li>環境変数にNEXT_MAINT_MODEなどの変数をセットし、booleanなどセットしておきます。</li>
<li>その値によって分岐処理を書き、メンテナンスページに遷移させる処理を書きます。</li>
<li>メンテナンスモードにするときは、Vercel上で環境変数の値を書き換えて再デプロイします。</li>
</ol>
<p>運用の手間がそこそこかかるのと、開発者がメンテナンス中に本番環境の画面を確認することができないのがネックですね。</p>
<h2>APIベース(ALBを使用している前提)</h2>
<h3>ALB + ECS(orEC2)</h3>
<p>ALBのリスナルールと固定レスポンス機能を使って503を返す方法です。<br>
メンテナンスモードにする際はリスナルールの優先順位を入れ替えるだけです。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/7a96ab23-5e12-2296-d5b3-31a3ef778c77.png" alt="スクリーンショット 2022-02-02 11.47.48.png"></p>
<ul>
<li>ドメインごとにルールを決められる</li>
<li>切り替えがやや手間</li>
</ul>
<h3>ALB + WAF + ECS(orEC2)</h3>
<p>ALBにWAFをアタッチするパターンで、503を返すのはWAFのお仕事になります。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/85118c9c-b5eb-0e3b-6580-61eb3b3c0e8e.png" alt="スクリーンショット 2022-02-02 11.47.37.png"></p>
<ul>
<li>ドメインごとにルールを決められる</li>
<li>特定のIPを許可できる</li>
<li>WAFのアタッチのみで適用でき運用が楽</li>
<li>複数プラットフォーム共用のAPIである場合はWAFのみの設定で済むため管理が楽</li>
</ul>
<h2>感想</h2>
<p>全サービスが共通のAPIサーバ使っている場合にはALBの固定レスポンスかWAFアタッチが楽だと思っています。<br>
リクエスト元のホストを絞ればサービスを限定することができるし、IPホワイトリストを設定すれば開発者はメンテ中も画面を覗くことができるし、ということでおそらく実装するとしたらAPIサービス側でやることになりそうです。</p>
<p>それぞれ長所短所ありますが非常に勉強になりました。</p>
<h2>参考</h2>
<p><a href="https://dev.classmethod.jp/articles/alb-fixed-response/">[新機能]EC2やS3不要！ALBだけでメンテナンス画面を表示するなど固定レスポンスが返せるようになりました！<br>
</a><br>
<a href="https://tech-blog.yayoi-kk.co.jp/entry/2019/07/04/110000">Misoca メンテナンス画面の裏側</a></p>


AWSを使ったメンテナンス画面の設計について

<p>過去に開いたAWS勉強会のスライドが元になっています。<a href="https://speakerdeck.com/hokuo/awsmian-qiang-hui-day1-ec2-rds?slide=26">こちら</a>からご覧ください。</p>
<h2>IPアドレスとは</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/54c48b11-5590-62c6-4716-6ea2c51609d7.png" alt="スクリーンショット 2021-11-30 22.05.13.png"><br>
IPアドレスというのは送信データに「送信元IP」「送信先IP」としてそれぞれ1つずつ設定できるもので、これがないとルーターを介した通信ができません。<br>
私達がよく見る192.168.33.13のようなIPアドレスはIPv4という部類であり、最近ではIPの数が足りていないのでIPv6という規格も主流になっています。<br>
ここではIPｖ４をベースにお話をしていきます。</p>
<h2>IPアドレスの構造</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/cd491d20-1347-5658-2bdc-e53dc2592f43.png" alt="スクリーンショット 2021-11-30 22.05.18.png"><br>
IPアドレスの構造は最大3桁の数字がピリオド区切りで4つ並んでいます。<br>
これは10進数で表されたもので、実態は「2進数8桁の数字をピリオド区切りで4つ並べたもの」になります。</p>
<h2>サブネットマスク</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/1ddf9ede-56cb-df0b-ae29-caafbadc2910.png" alt="スクリーンショット 2021-11-30 22.05.22.png"><br>
よくIPアドレスの後ろに「/16」などと書かれたものがあり、見かけたことがある方もいると思いますが、これはサブネットマスクと呼びます。</p>
<h2>サブネットマスクの役割</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/c9ff14f2-3e67-093f-6589-27b083bb9d23.png" alt="スクリーンショット 2021-11-30 22.05.25.png"><br>
IPアドレスに近い構造ではありますが、後に説明する「IPアドレスのネットワーク部とホスト部の境目」を示すものになります。<br>
同じように2進数の8桁のピリオド区切りで4つ並べたもので、16という数字は左から16桁目までが1だよということを示してくれています。(1になっている部分はネットワーク部を示す。つまり2進数表記におけるIPアドレスの左から16桁目までがネットワーク部になるということ)<br>
同じネットワークに所属しているIP同士はルータを使わなくても通信できます。社内で同じルーターを使っていれば、みんなは同じネットワークに所属しているはずですので、ネットワーク部を割り出して確認してみてください。</p>
<h2>IPアドレスとサブネットマスクの確認の仕方</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/48d1094a-2b7b-0f44-1fd9-c111dca3b58c.png" alt="スクリーンショット 2021-11-30 18.57.56.png"><br>
「ifconfig」コマンドでen0の欄を見ると自分のIPとサブネットを確認することができます。<br>
netmastkがサブネットマスクのことですが、ここでは16進数になっているので10進数では「255.255.255.0」となりCIDR表記では「/24」になります。</p>
<h2>IPが決まると、ネットワーク内に割り当てられるホストの数が決まる</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/142d1f04-831f-df8c-4877-a9c61cdca013.png" alt="スクリーンショット 2021-11-30 22.05.36.png"><br>
このネットワークとホストの境目が決まると、同じネットワークに所属しているホストの数が決定されます。/16であればネットワーク部が16桁で、ホスト部が残りの16桁になるのでホスト部の数字の組み合わせは2の16乗となり65536ホストとなります。<br>
実際の設計では、このホスト(PCやサーバー)の使用する台数によって数値を絞るようにサブネット小さくを切ります。(/24など。ホストが1台の場合は/32など)<br>
中には割り当てることができない特殊なIPも存在します。</p>
<h2>一部の特殊なIPアドレスの紹介</h2>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/a43f32cc-53ec-6180-59f0-12e64cdd4fe1.png" alt="スクリーンショット 2021-11-30 22.05.40.png"><br>
特にループバックアドレスは馴染みがありそうですね。localhostのIPアドレスであり、自分のローカルIPアドレスとなります。</p>
<h2>実際の通信はどうなっているのか</h2>
<p>実際にルータを使用した通信の例を見てみます。<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/280c6bcc-47f4-13f2-a8e6-057880c26216.png" alt="スクリーンショット 2021-11-30 22.05.53.png"><br>
まずARPというプロトコルで先ほど紹介した「ブロードキャストアドレス」を使用して同じネットワークのすべてのホストに対して「このアドレス知ってる人います？」と質問します。<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/26b79a0f-fb8b-9f2e-20dc-f60165d6d2b3.png" alt="スクリーンショット 2021-11-30 22.05.55.png"><br>
それがわかると、機器固有のMACアドレスを質問者にわたし、それをもとにその危機にデータをわたします。はじめに説明の通り、送信先のIPは一つしか持てないので、中継する機器はMACアドレスを渡して「こっちにパスしてくれー」と合図を送っているわけです。<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/6a85f6b8-5e5c-795a-55ac-f83d91f4de5c.png" alt="スクリーンショット 2021-11-30 22.05.57.png"><br>
これらを繰り返して目的地までのデータ送信を進めていきます。</p>
<h2>終わりに</h2>
<p>今回はIPアドレスに関する簡単な解説しながら実際の通信を覗いてみました。<br>
もう少し実践的な使い方や説明はこちらのスライドをご覧ください。<br>
https://speakerdeck.com/hokuo/awsmian-qiang-hui-day1-ec2-rds</p>
<p>また、AWSの勉強も兼ねて学んでみたい方は下記の書籍がおすすめですのでぜひ。</p>
<ul>
<li>
<p>基礎知識<br>
<a href="https://www.amazon.co.jp/Amazon-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89-%E6%94%B9%E8%A8%823%E7%89%88/dp/4296105442/ref=sr_1_7?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;keywords=aws+%E6%9C%AC&amp;qid=1638267431&amp;sr=8-7">Amazon Web Services 基礎からのネットワーク&amp;サーバー構築</a></p>
</li>
<li>
<p>パターン構築<br>
<a href="https://www.amazon.co.jp/Amazon-Services-%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%88%A5%E6%A7%8B%E7%AF%89%E3%83%BB%E9%81%8B%E7%94%A8%E3%82%AC%E3%82%A4%E3%83%89-%E6%94%B9%E8%A8%82%E7%AC%AC2%E7%89%88-Informatics/dp/4797392576/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;keywords=AWS+%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3&amp;qid=1638267453&amp;sr=8-1">Amazon Web Services パターン別構築・運用ガイド</a></p>
</li>
</ul>


#Infrastructure

AWSを使ったメンテナンス画面の設計について

Webエンジニアのためのネットワーク基礎 - IPアドレス編 -