Webサイトが表示されるまでの流れ

めぐろLT会＠2022/12/21で使用した資料です。

Transcript

1. めぐろLT会@2022/12/21 Webサイトが表示されるまでに起こるコト
2. Profile 名前：けんや 職種：フロントエンドエンジニア＠EISHIN 経歴：群馬県→都内大学の文系→EISHIN（1年目） 好きなもの：サウナ、フレブル、料理、TypeScript、React 一言：LTの発表は初めてなので緊張していますが、温かく 　 　 　 見守っていただけると幸いです Twitter Github
3. Webサイトに訪問した際に 裏側で起きていることを説明してください。 突然ですが、、
4. うーん、、、 意外とわかっていないかも
5. WA Webサイトが表示されるまでの仕組みをざっくりと理解できQ 4A IPアドレスやDNSなどの用語を「なんとなく」理解できQ A 非エンジニアの人にWebサイトの仕組みを説明してドヤれる このLTでわかること
6. なぜこのテーマを選択したのか ˜R APIを使用した開発をしたり、Webサイトのパフォーマンスを改善しようと 思ったらブラウザの仕組みを理解する必要があっ‡ 4R ブラウザの仕組みはWebエンジニアとしては理解しておくべき基礎的な内容 が詰まっているにも関わらず、意外と疎かにしがu "R より詳しい仕組みを理解するための足がかりにしてもらうため
7. DNSサーバ WEBサーバ@54.168.15.131 ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン ⑥リソースをレンダリング ③ だよー 54.168.15.131 ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー Webサイトが表示される流れ
8. WEBサーバ@54.168.15.131 ⑥リソースをレンダリング ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー ドメイン・IPアドレス・DNSサーバ ③ だよー 54.168.15.131 DNSサーバ ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン
9. 用語解説 (Wikipediaより引用） ドメイン： ドメイン名（ドメインめい、domain name）は、IPネットワークにおいて、個々のコンピュータを識別し、接続先を指定するために使用 される名称の一部。 IPアドレス： IPアドレス（アイピーアドレス、英: IP address; Internet Protocol address）とは、インターネット・プロトコル (IP)において、通信の 相手先を識別するための番号である。 DNS： Domain Name System（ドメイン・ネーム・システム、DNS）とは、コンピュータネットワーク上のホスト名や電子メールのアドレスに 使われるドメイン名と、IPアドレスとの対応づけ（正引き、逆引き）を管理するために使用されているシステムである。
10. ドメインとはWEBサーバの「 」 店舗名 ドメインとは　 　 Webサイトを見るためには店舗の住所を訪れればいい
11. IPアドレスとは IPアドレスの指定する住所へ行けばWEBサーバがある IPアドレスとはWEBサーバの「 」 住所
12. DNSとは DNSサーバがドメインをIPアドレスに変換して教えてくれる DNSサーバとは店舗名から住所を検索する「 」 Googleマップ
13. ⑥リソースをレンダリング ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー WEBサーバ@54.168.15.131 ③ だよー 54.168.15.131 ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン DNSサーバ Webサイトが表示される流れ
14. 完全に理解した ️ さっそく非エンジニアにマウントとってこよー
15. 4 https://zenn.dev/ak/articles/61d2509929537 4 https://www.rworks.jp/system/system-column/sys-entry/21249 4 https://gigazine.net/news/20190624-how-web-works/ 参考