Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webサイトが表示されるまでの流れ
Search
kenya
December 20, 2022
Technology
1
530
Webサイトが表示されるまでの流れ
めぐろLT会@2022/12/21で使用した資料です。
kenya
December 20, 2022
Tweet
Share
More Decks by kenya
See All by kenya
OKRで目標立ててみた
kenyamasuko
0
130
『RSC From Scratch. Part 1: Server Components』を読んだぜ
kenyamasuko
2
180
Vimmerを支える技術
kenyamasuko
0
95
Other Decks in Technology
See All in Technology
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
470
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
短縮URLをお手軽に導入しよう
nakasho
0
110
The Future of SEO: The Impact of AI on Search
badams
0
240
EDRの検知の仕組みと検知回避について
chayakonanaika
2
140
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
850
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
510
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
500
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
130
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
140
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Unsuck your backbone
ammeep
669
57k
Thoughts on Productivity
jonyablonski
69
4.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Speed Design
sergeychernyshev
27
800
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
めぐろLT会@2022/12/21 Webサイトが表示されるまでに起こるコト
Profile 名前:けんや 職種:フロントエンドエンジニア@EISHIN 経歴:群馬県→都内大学の文系→EISHIN(1年目) 好きなもの:サウナ、フレブル、料理、TypeScript、React 一言:LTの発表は初めてなので緊張していますが、温かく 見守っていただけると幸いです
Twitter Github
Webサイトに訪問した際に 裏側で起きていることを説明してください。 突然ですが、、
うーん、、、 意外とわかっていないかも
WA Webサイトが表示されるまでの仕組みをざっくりと理解できQ 4A IPアドレスやDNSなどの用語を「なんとなく」理解できQ A 非エンジニアの人にWebサイトの仕組みを説明してドヤれる このLTでわかること
なぜこのテーマを選択したのか R APIを使用した開発をしたり、Webサイトのパフォーマンスを改善しようと 思ったらブラウザの仕組みを理解する必要があっ 4R ブラウザの仕組みはWebエンジニアとしては理解しておくべき基礎的な内容 が詰まっているにも関わらず、意外と疎かにしがu "R より詳しい仕組みを理解するための足がかりにしてもらうため
DNSサーバ WEBサーバ@54.168.15.131 ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン ⑥リソースをレンダリング ③
だよー 54.168.15.131 ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー Webサイトが表示される流れ
WEBサーバ@54.168.15.131 ⑥リソースをレンダリング ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー ドメイン・IPアドレス・DNSサーバ ③ だよー 54.168.15.131 DNSサーバ ②ei-shin.comの
教えて IPアドレス ①ei-shin.com にアクセス ドメイン
用語解説 (Wikipediaより引用) ドメイン: ドメイン名(ドメインめい、domain name)は、IPネットワークにおいて、個々のコンピュータを識別し、接続先を指定するために使用 される名称の一部。 IPアドレス: IPアドレス(アイピーアドレス、英: IP address;
Internet Protocol address)とは、インターネット・プロトコル (IP)において、通信の 相手先を識別するための番号である。 DNS: Domain Name System(ドメイン・ネーム・システム、DNS)とは、コンピュータネットワーク上のホスト名や電子メールのアドレスに 使われるドメイン名と、IPアドレスとの対応づけ(正引き、逆引き)を管理するために使用されているシステムである。
ドメインとはWEBサーバの「 」 店舗名 ドメインとは Webサイトを見るためには店舗の住所を訪れればいい
IPアドレスとは IPアドレスの指定する住所へ行けばWEBサーバがある IPアドレスとはWEBサーバの「 」 住所
DNSとは DNSサーバがドメインをIPアドレスに変換して教えてくれる DNSサーバとは店舗名から住所を検索する「 」 Googleマップ
⑥リソースをレンダリング ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー WEBサーバ@54.168.15.131 ③ だよー 54.168.15.131 ②ei-shin.comの 教えて IPアドレス
①ei-shin.com にアクセス ドメイン DNSサーバ Webサイトが表示される流れ
完全に理解した ️ さっそく非エンジニアにマウントとってこよー
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/ 参考