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 Architecture
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Inndy
May 11, 2016
Technology
430
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Web Architecture
那些在瀏覽器背後發生的大小事情
Inndy
May 11, 2016
More Decks by Inndy
See All by Inndy
工程師一定要懂的 Text Encoding
inndy
1
790
資訊安全:麻瓜的黑魔法防禦術
inndy
3
3.1k
HackmeCTF 平台背後的心酸血淚史
inndy
2
890
COSCUP 2018 Lightning Talk - 審稿好難,所以我們來寫程式吧
inndy
0
500
逆向工程:從入門到放棄
inndy
7
3.6k
HITCON 2017 Zeroday 發表會
inndy
0
1.4k
No More Crypto Fails
inndy
34
8.3k
你再共用密碼啊
inndy
1
800
CTF From Zero To One
inndy
5
5.3k
Other Decks in Technology
See All in Technology
クラウドセキュリティ入門 ~安全なクラウド利用のための基礎知識~
lhazy
12
8.4k
Pavlokで始める電撃駆動開発
sgrsn
0
180
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
kk0n
0
1.7k
Cursor Meetup Sapporo - Cursor物語 続編
cocacola917
0
140
サイバー捜査員研修(後半)
nomizone
1
810
トヨタ⽣産⽅式(TPS)⼊⾨
recruitengineers
PRO
3
660
ブラウザ研修 2026
recruitengineers
PRO
5
800
Breaking the Seal: Static Deobfuscation of Compiled V8 JavaScript Bytecode Malware
hshrzd
0
670
ガバメントクラウドでのランサムウェア対策
techniczna
2
1k
【CEDEC2026】ゲームシナリオライターを支援するAIツール開発の実践 ― 設計とプロンプトの工夫 ―
cygames
PRO
1
770
【CEDEC2026】次世代デジタルカードゲームのサーバー設計と運用 〜『Shadowverse: Worlds Beyond』の舞台裏~
cygames
PRO
1
980
AIエージェントを前提としたプラットフォーム エンジニアリング:GKEで作るAgent-Ready Golden Path
legalontechnologies
PRO
2
220
Featured
See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
350
Designing Powerful Visuals for Engaging Learning
tmiket
1
480
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
200
SEO for Brand Visibility & Recognition
aleyda
0
4.7k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
270
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Tell your own story through comics
letsgokoyo
1
1k
Paper Plane (Part 1)
katiecoart
PRO
1
10k
So, you think you're a good person
axbom
PRO
2
2.1k
Mind Mapping
helmedeiros
PRO
1
300
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
460
Transcript
WEB ARCHITECTURE NTUST CODING CLUB
WEB ARCHITECTURE OUTLINE ▸ Server & Client ▸ HTTP? ▸
ೲӥ Enter ԏ盅咳ኞጱԪ ▸ 蝢懱㶧ਧ ▸ 礚፡ HTTP 獉
֑๐瑊 / ਮ䜛ᒒ Ӟ獤傶ԫ
CLIENT SERVER ———— 翕᪠蝫娄 ————
WEB ARCHITECTURE ਮ䜛ᒒ ▸ ֦ጱ倵薩瑊 ▸ 礓㮆 App ҁֺই物Facebook҂ ▸
curl, netcatҁLinux 瞲犤҂ ▸ request ҁNodeJS ጱ HTTP client library҂
WEB ARCHITECTURE ֑๐瑊 ▸ Apache ▸ LAMP — Linux /
Apache / MySQL / PHP ▸ nginx ▸ 斕ᰁ玕ᘒӬ穉斃盠ጱ֑๐瑊 ▸ IIS ▸ 盏敟ڊߝ牧砇蟴 ASP.NET 螀֢ࣁ Windows Ӥ
HTTP?
HYPER TEXT TRANSFER PROTOCOL HTTP WEB ARCHITECTURE
ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐
None
None
None
奾牐
WEB ARCHITECTURE ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 ▸ DNS 礚扇 ▸ 翕࣎旉矦౮
IP ֖࣎ ▸ TCP 蝫娄 ▸ ݻ֑๐瑊咳蚏 TCP 蝫娄ᥝ穩 ▸ ୌ缏 HTTP 藶穩㪔Ӭ蝑ڊ ▸ 虏౯㮉㬵፡፡ HTTP ጱ獉牦 蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
WEB ARCHITECTURE ▸ Routing ▸ 䲆礯䌘䛑 / 碝ᄤጱ敟誢᪠ኧ ▸ Controller
/ Script / CGI ▸ ݢ胼ฎӞ㮆 php 䲆礯牧犖ݢ胼ฎ NodeJS ጱ纷ୗ ▸ 蜴ࢧ HTTP ࢧ䛑妔ਮ䜛ᒒ ▸ 匍ࣁ֦ݢ犥፡ک Google Ḓ殷ԧ牦 ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 蝡犚Ԫ眐᮷ฎኧ֑๐瑊ਠ౮ጱ
WEB ARCHITECTURE ▸ 倵薩瑊ӥ斉ٌ犢虻碘 (瑽粙, CSS, ...) ▸ 叨ኞๅग़ጱ HTTP
藶穩 ▸ HTML 礕砻樄ত向ڊ翕殷 ▸ JavaScript 砻樄ত᪒ JavaScript 纷ୗ ▸ 匍ࣁ֦ݢ犥ࣁ Facebook Ӥ咳䔂ԧ牦 ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
WEB ARCHITECTURE HTTP 藶穩 GET / HTTP/1.1\r\n Host: localhost\r\n Accept:
text/html\r\n \r\n
WEB ARCHITECTURE HTTP/1.1 200 OK\r\n Content-Length: 45\r\n Content-Type: text/html\r\n \r\n
<html><body><h1>Hello, Web</h1></body></html> HTTP ࢧ䛑