雑に WEB とその仕組みをキャッチアップする資料です。 初心者向け勉強会で利用した資料となります。 https://coroutine.connpass.com/event/248254/

1. ``完璧に理解した``
WEB の裏側の仕組み
株式会社coroutine 東川 諒央

2. 自己紹介
株式会社 coroutine
エンジニアメンター
フリーランスプログラマー 東川 諒央
Twitter, GitHub: @biwakonbu
WEB 領域特化
WEB フロント〜インフラまで、ソフトウェア領域は大体やります。
Laravel, Django, Rails, Nuxt, Vue, React 等の
開発実績がメインです。
現在は技術顧問業とメンターなど、エンジニア教育に力を入れています。
新人育成、チームビルディングなど何かあればご相談ください。

3. 雑にキャッチアップする WEB の仕組みをやります
1. TCP/IP による通信の世界
2. ブラウザと WEB
3. でもブラウザって IP アドレス使ってないよね？
4. HTTPS ってなんなん？HTTP でええやろ
5. ところで WEB サーバって何？
6. WEB サーバは作れる
7. CGI って最近聞かないよね
8. WAF (Web Application Framework) のそこはかとなくイケテル感
9. 1 週回って Nginx すら使わなくなった世界

4. 1. TCP/IP による通信の世界
色々な機械と通信するための仕組み
● PC - PC
● PC - ハブ
● PC - ルーター
● PC - インターネット
上記のような発信端末と受信端末間で
ルールに従って届けてくれる
IP アドレスを指定して通信します
パケットの気持ちになれば
宛先分からないと届けられないですよね

5. 1. TCP/IP による通信の世界
IP アドレスを指定とは？
192.168.1.1 の PC から
192.168.1.2 の PC に疎通確認する場合
> ping 192.168.1.2
ICMP のプロトコルに従ってパケットを
投げます
基本は宛先に向かって投げるだけ
ICMP？パケット？
て人はググりましょう！

6. 1. TCP/IP による通信の世界
TCP/IP はバックエンドの話で
重要です
ネットワーク分からない人は
これを読んでみると良いと思います

7. 2. ブラウザと WEB
雑な定義
ブラウザ ・・・WEB を見るもの
WEB ・・・インターネット上でドキュメ
ントを公開
ブラウザに URL を入力するか、
ブラウザ上のリンクをクリックすると WEB ページが
見れたり、データを登録できたりする。

8. https://www.google.com/search?q=twitter&oq=twitter
URI (Uniform Resource Identifier)
URI の事を URL と呼ばれる事が多いですが大体 URI の事です
詳しくは RFC3986 を読む事を推奨します
2. ブラウザと WEB
scheme authority
userinfo @ host : port
path query

9. GET http://www.google.com/search
2. ブラウザと WEB

10. GET http://www.google.com/search の裏側
http:// ・・・ HTTP での通信
authority に port 指定がな
いので標準の 80
www.google.com ・・・通信先のサーバ指定
/search ・・・サーバ内のドキュメント PATH の指定
後は細かな Header を色々ブラウザ (と JS) が良い感じに設定したりします
2. ブラウザと WEB

11. 3. でもブラウザって IP アドレス使ってないよね？
www.google.com (host) が実質 IP アドレス
DNS (Domain Name System) という仕組みによって
サーバ名を IP アドレスに変換してアクセスします
詳しい記事を書いている人がいるので、詳細はそちらで
> Webページがブラウザに表示されるまでに何が起こるのか？
> https://zenn.dev/ak/articles/61d25099295372

12. 4. HTTPS ってなんなん？HTTP でええやろ
HTTP と HTTPS の違い
HTTP ・・・通常のドキュメント転送プロトコル。丸見え。
HTTPS ・・・HTTP を暗号化してドキュメントを転送する。
途中経路で改竄したり、盗聴されたりを防げ
る。
ただし、運営に悪意がある場合は何の意味も
ない。
Google の SEO ではコーポレートやキュレーションサイトのような
データ送信を持たない WEB ページなども HTTPS 化していないと評価が下がる
もはや HTTP の側にメリットなし。証明書不要な点くらい。

13. 4. HTTPS ってなんなん？HTTP でええやろ
証明書と暗号化

14. 5. ところで WEB サーバって何？
なんとなく機械をイメージしてしまいがち
実際は HTTP を話せるソフトウェア
の総称
サーバという名前が分かりにくいですが、
待ち受ける者という意味で覚えましょう。
「HTTP を待ち受ける者」という意味を持つので
待ち受けないとダメですよね？
サーバは一回実行したら終わりではなく、
常駐するソフトウェアである必要があるんです。
常駐するプログラムとは？
誤解を恐れずに言うと「無限ループしているプログラム」
常駐プログラムの事をデーモンとも呼びます。

15. 6. WEB サーバは作れる
チャットシステム

16. 6. WEB サーバは作れる
WEBサーバ
実はチャットとほぼ一緒
HTTP が話せるチャットみたいな感じ

17. 6. WEB サーバは作れる
WEBサーバ
結論：socket プログラミングが入門できれば WEB
サーバは自作できます
詳しくはこの本で勉強できるので興味があれば
オススメです。ちなみに Java です。

18. 7. CGI って最近聞かないよね
CGI って何？
プログラムファイルを WEB サーバから
呼び出し、HTML を動的に出力する仕組み
※ レンサバでは現役です

19. CGI のメリットデメリット
メリット
- 導入が簡単で Apache とモジュール設定したらすぐ利用可能
- 数点程度の動的なページを作るくらいならレンサバ借りればすぐに動作できる
- フレームワーク使わなくても動作できるので始め易い
デメリット
- URI に .php とか .html とか .jsp とか .do とかダサイ
ダサイだけじゃなく、裏側で実行している言語や環境がバレる (変えて誤魔化せるけど...)
- CGI 利用側に高度なセキュリティを理解、対処するノウハウが求められる問題アリ
- 数点以上の画面とセッションを使うような場合 WAF を使う方が圧倒的に楽
7. CGI って最近聞かないよね

20. 7. CGI って最近聞かないよね
CGI も作れる
WEB サーバから
CGI を呼び出すだけです。簡単ですね。
PATH と拡張子が URI から取れるので
実行する言語も変更できます。

21. まとめ
● ルールは多いけど、実は結構シンプルな仕組みがほとんど
● 自分で作れるものが多い
● せっかくプログラミングできるから何でも作りたいですね
● 自前 WEB サーバや自前 CGI はセキュリティリスク高いので
勉強用として割り切ってプライベートのみ利用にしてください
● 凝った奴を作りたい場合は OSS を参考にしよう
GitHub とかでよさそうな物を探して写経とかすると良いと思います

22. おわり
Twitter: @biwakonbu
Twitter やってます。
良ければ交流してください。