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
460
Webサイトが表示されるまでの流れ
めぐろLT会@2022/12/21で使用した資料です。
kenya
December 20, 2022
Tweet
Share
More Decks by kenya
See All by kenya
OKRで目標立ててみた
kenyamasuko
0
55
『RSC From Scratch. Part 1: Server Components』を読んだぜ
kenyamasuko
2
130
Vimmerを支える技術
kenyamasuko
0
68
Other Decks in Technology
See All in Technology
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
3k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.4k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
0→1開発における技術選定において一番大切なこと
bicstone
1
330
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
540
NgRx Signal Store
rainerhahnekamp
0
120
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Optimizing for Happiness
mojombo
370
69k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Happy Clients
brianwarren
91
6.4k
Statistics for Hackers
jakevdp
789
220k
What the flash - Photography Introduction
edds
64
11k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Automating Front-end Workflow
addyosmani
1355
200k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
GitHub's CSS Performance
jonrohan
1023
450k
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/ 参考