1. 誰に向けたどういう記事なのか
いわゆる "駆け出しエンジニア" と呼ばれるようなプログラミング学習者や新卒でエンジニアになれた方に向けたものになっており、内容としてはWebサービスがブラウザに表示される仕組みについて理解をして、デプロイまでの流れを掴もうよといった感じです。
なので、内容的には比較的優しい物になっているかと思います。（詳細に知りたい方には適していないかもしれません...）
2. この記事を作ったきっかけ
筆者が所属している会社で新しくエンジニア採用で新卒の方が数名入社し、プログラミング研修と題してチーム開発をしてもらっているのですが、その方々から、
Aくん「デプロイってどうやってやるんですか？」
Bくん「そもそもサーバーって何ですか？」
みたいな質問をいただき、
筆者「...これは一度ちゃんと説明したほうがよいのでは？」
と思って勉強会を開催しました。
その時の内容を他の方にも共有して、あわよくば意見をいただきブラッシュアップしたいなと思ったのがきっかけです。
というのも筆者は普段はブリッジエンジニアという、どちらかと言うと上流工程だったり、顧客との対話がメインのお仕事になるので、そこまで技術的知見が高いわけではありませんでした。
なので、もしかしたらツッコミどころ満載かもしれませんが、気になった点があれば遠慮なくコメントしていただきたいです！
ブラッシュアップしていきたいので！
3. 目次
今回はスライドを用意しましたので、このスライドを使いながら説明をしていきたいと思います！
この記事の流れとしては、スライドの通りです。
4. この記事のゴール
この記事のゴールとしては、スライドの通りです。
では、次に基本用語について見ていきましょう！
5. 基本用語
Webブラウザとは
初めに、Webブラウザについて見ていきます。
普段から業務や日常生活などで利用されている方が非常に多いかと思いますが、一応復習もかねて見ていただければと思います。
まず、Webブラウザとはインターネット上に公開されているWebサイトを閲覧するためのアプリケーションになっています。
このWebブラウザの主な役割としては、WebサーバーへWebサイトの表示に必要なデータを要求（リクエスト）することです。
また、スライドには書いていませんが、必要なデータが送信（レスポンス）されたらそのデータを受け取るというのも重要な役割です。
このようなことがWebブラウザではできるので、私たちは普段快適にWebサイトやサービスを利用できているんですね！
代表的な例としては、Google ChromeやFire fox、Safariなどがあります。
では次に、IPアドレスとドメインについて見ていきましょう！
IPアドレス/ドメインとは
まず最初に、IPアドレスについて説明していきます。
IPアドレスとは、インターネット上に接続されている機器に割り当てられる識別番号のことを指し、この識別番号はユニークな値であるため、インターネット上の住所のような役割があります。
この機器というのは、サーバーマシンをイメージしていただけると良いかと思います。
このIPアドレスは例にも書いてある通り、基本的にドットで区切られた4つの数字からなり、IPアドレスがそれぞれの機器に割り当てられていることで、我々はWebブラウザ上で様々なWebサイトやサービスにIPアドレスを使ってアクセスすることができます。
実はこの例に書いてあるIPアドレスはgoogleのものになります。
なので、こちらを何かしらのWebブラウザに入力して検索してみると、googleのサーバーマシンにアクセスされて、google.comが開くかと思います。（是非やってみてください！）
ここら辺の、どのようにしてWebサービスがWebブラウザ上に表示されているのかは後ほど詳しく説明しますので、今の時点ではIPアドレスを使ってアクセスしているんだなと思っていただければと思います。
ただ、このIPアドレスを直接使ったアクセス方法だと、少しやりづらいと思いますし、普段皆さんはこのような形でgoogleにアクセスしませんよね。
いちいちサービスごとにIPアドレスを覚えられないですし、IPアドレスを見ただけだと何のサービスが見当もつきません。
ここで出てくるのがドメインになります。
ドメインとは、IPアドレスを人間が扱いやすいように変換したものを指します。
例としては、google.comなどです。
なので、右下の図にもある通り、この数字の羅列とgoogle.comはインターネット上の扱いとしては同じサーバーマシンを指します。
これなら、皆さんもいちいち数字を覚えなくていいですし、ぱっとドメインを見ただけでどのWebサービスのサーバーマシンにアクセスできるかが分かって便利ですよね。
なので、基本的に何かしらのWebサービスをインターネット上に公開するときには必ずドメインの設定をするようにしましょう。
では次に、ドメインの設定をするために必要不可欠なDNSについて見ていきます。
DNSとは
まず、DNSとはDomain Name Systemの略称で、IPアドレスとドメインを紐づける役割があります。
先程のgoogleを使った例だと、google.comというのは172.217.175.110のサーバーマシンを指しますよといったイメージです。
大まかな実態としては、DNSではどのIPアドレスがどのドメインに紐づいているのかのリストのようなものを保持しており、それを元にドメインからIPアドレスを検索し、結果としてIPアドレスを返すことができます。
この部分の仕組みについては、後ほど詳しく説明します。
以上が基本用語の説明です。
では次のセクションである、"Webサービスがブラウザに表示される仕組み" に移っていきましょう。
6. Webサービスがブラウザに表示される仕組み
DNSにおける実際の問い合わせの流れ
では先ほど触れた、DNSが実際にどのようにしてドメインからIPアドレスが問い合わされているのか、流れを詳しく見ていきます。
まず、WebブラウザからドメインがどのIPアドレスを指しているのかのリクエストをDNSのResolverという部分が受け取ります。（①の部分）
その後、ResolverからRoot Serverに対してリクエストが発生します。（②の部分）
Root Serverは世界で13台しかない希少なServerで、このServerではドメインの末尾の値に合わせたDNSのServerのIPアドレスを保持しています。
なので、今回の例ですと末尾が.comになるので、.comのDNSのServerをRoot Server内で探し、そのIPアドレスをResolverに返します。（③の部分）
このように、ResolverはそれぞれのDNSのServerに対してリクエストとレスポンスを受け取ることを繰り返していくので、IPアドレス問い合わせ時の総合窓口的な存在だと思っていただければと思います。
次にResolverが③の部分でで受け取ったIPアドレスを元に、.comのDNS Serverに対してリクエストを投げます。（④の部分）
ちなみに、.comのDNS ServerのようなものをTLD Serverと言ったりします。
TLD Serverでは、検索したいドメインのDNS ServerのIPアドレスを保持しているため、ここではexample.comのIPアドレスを返します。（⑤の部分）
ただしここで注意が必要なのが、一見すると⑤の部分で既にexample.comのIPアドレスが確保できているような気がしますが、このIPアドレスはあくまでexample.comに関連する全てのドメインのIPアドレスが格納されているDNS ServerのIPアドレスを返しているだけなので、まだこれだけでは必要なIPアドレスは確保できていません。
ここの関連するドメインとは、サブドメインも含めたものです。
サブドメインとは、メインサイトとは別のコンテンツを作る際に、本体ドメインをもとに任意で設定するドメイン名のことで、よく利用される例としては、開発環境をdev, stg, prodで分ける際に、本体ドメインの前半部分にdevやstgのワードをつけることがあります。（dev.example.com, stg.example.comなど）
これらの関連するドメイン情報を含んだDNS ServerのIPアドレスを⑤の部分でレスポンスをし、Resolverはそれを受け取ります。
次に⑤の部分で受け取ったexample.comの関連ドメインを含めたDNS ServerのIPアドレスをもとにアクセス（⑥の部分）をし、ようやくexample.comのIPアドレスをResolverが入手することができます。（⑦の部分）
Resolverではこの後、WebブラウザにIPアドレスの情報を返し、WebブラウザではそのIPアドレスにアクセスして、見たいサイトが見れるというわけです。
一見すると、DNSのServerが階層構造になっているので少しややこしいと感じるかもしれませんが、ドメインというのは世界中で数え切れないほどのものがあり、そのドメインを利用するユーザーもかなり多いため、あえて階層構造にしてServerを分散させることで、負荷も分散させサーバー停止のリスクを抑えています。
ちなみに、DNS Resolverでは一定時間の間検索されたドメインのIPアドレスの情報（キャッシュ）を保持することができるため、他の人があらかじめ検索をかけていた場合はDNS Resolverから直接IPアドレスを入手することができます。
これにより、パフォーマンスの高速化が期待できます。
ここまで理解できたら、ほぼWebサービスがブラウザに表示される仕組みについて理解できたと思いますが、最後に全体像をおさらいしていきましょう。
Webサービスがブラウザに表示される仕組み
先程の内容ではだいぶ文字量が多くなってしまったので、ややこしかったかもしれません...
なので、簡単なおさらいです！
Webサービスがブラウザに表示される仕組みを一言でまとめると、Webブラウザ上でユーザーからドメインの検索が行われた際、まず初めにDNSを使ってIPアドレスの検索が行われ、その検索結果を元にサーバーマシンにリクエストを投げて、そのレスポンスを受け取ることで我々はWebサービスを利用することができます。
また、Webサイトなどを見たい場合はサーバーマシンに対してHTTPリクエストというのを送る必要があり、このHTTPリクエストを受け取り、データのレスポンスを返すことができるものをWeb Serverと言います。
なので、Webサービスを開発する際には必ずWeb Serverを同時に用意してあげないといけないということです。
また、純粋なHTML、CSSで構成されるようなWebサイトではなく、動的なWebサービスを開発する場合（プログラミング言語やデータベースなどを扱う場合）はこのほかにもApplication ServerやDatabase Serverというのが必要になってきます。
ここの部分に関しては、次の "デプロイ" のセクションで詳しく見ていきます。
以上がWebサービスがブラウザに表示される仕組みです。
では、次の "デプロイ" のセクションを見ていきましょう。
7. デプロイ
Web3層アーキテクチャ
このセクションでは最初にWeb3層アーキテクチャというのを見ていきます。
先ほども少し話に出てきましたが、RubyやPHPなどを扱うような動的なサイトを作る場合は、Web Serverの他にもApplication ServerとDatabase Serverというものが必要になってきます。
それぞれの役割を見ていきましょう。
まず初めにWeb Serverですが、これはクライアントからのリクエストを受け取り、静的コンテンツをレスポンスとして返すか、動的コンテンツが必要な場合は、Application Serverにリクエストを送ります。
代表的なものとしては、ApacheやNginxなどがあります。
次にApplication Serverですが、ここではRubyやPHPなどのプログラミング言語を動かして動的コンテンツ部分の作成の処理を行い、必要なデータはDatabase Serverへリクエストします。
代表的なものとしては、PumaやUnicornなどがあります。
最後にDatabase Serverですが、Appication Serverからリクエストのあった必要なデータの取得や処理を行い、結果をレスポンスとして返す役割があります。
代表的なものとしては、MySQLやPostgreSQLなどがあります。
このように、動的なWebサービスはこの3層のアーキテクチャをもとに構成されるので、Web3層アーキテクチャと呼びます。
また、これらのことをミドルウェアと言うので、覚えておきましょう。
ちなみに、一般的には一つのサーバーマシンに一つのミドルウェアをインストールすることが多いですが、一つのサーバーマシンに複数のミドルウェアをインストールすることもできます。
では次に、これまでの内容を踏まえてデプロイで何をする必要があるのか、見ていきましょう。
デプロイでやること
デプロイをする際には、
- ドメインを決める
- サーバーを設計する
- サーバーを構築する
- ドメインとサーバーのIPアドレスを紐づける
が作業として必要になってくるでしょう。
2番のサーバーの設計についてですが、基本的なサーバーマシンの構成としてはOS、ミドルウェア、プログラムコードになっているため、それぞれ必要なものをサーバーマシンにインストールする必要があります。
皆さんはプログラミングの学習を行う際にご自身のパソコンを利用しているかと思いますが、ご自身のパソコンの中でもOSが動いていますし、ミドルウェアやプログラムを動かすために必要な物、例えばPHPを普段利用される方であればComposerやXamppなどをインストールした上で開発し、動作を確認しているかと思います。
それと同じような環境をサーバーマシンでも構築していただくようなイメージです。
ただあくまでイメージなので、例えば今までXamppで初めからApacheやMySQLが用意された状態で開発されていた方や、Macを利用されている方の場合はあらかじめRubyやPHPがインストールされていたりするため、皆さんのパソコンの環境構築でやることとは若干異なります。
また、それぞれのミドルウェアごとにサーバーマシンを分けるのか、分けないのかなども決める必要があります。
これらの作業がデプロイでは必要になります。
8. 最後に
ここまでで、ざっと勉強会で行った内容をまとめて書いてみました。
改めて、何かおかしな点や間違った説明をしている箇所があれば、遠慮なくコメントしてください！
最後まで読んでいただき、ありがとうございました！