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
Inndy
May 11, 2016
Technology
0
400
Web Architecture
那些在瀏覽器背後發生的大小事情
Inndy
May 11, 2016
Tweet
Share
More Decks by Inndy
See All by Inndy
工程師一定要懂的 Text Encoding
inndy
1
700
資訊安全:麻瓜的黑魔法防禦術
inndy
3
3k
HackmeCTF 平台背後的心酸血淚史
inndy
2
830
COSCUP 2018 Lightning Talk - 審稿好難,所以我們來寫程式吧
inndy
0
450
逆向工程:從入門到放棄
inndy
7
3.5k
HITCON 2017 Zeroday 發表會
inndy
0
1.3k
No More Crypto Fails
inndy
33
8.1k
你再共用密碼啊
inndy
1
760
CTF From Zero To One
inndy
5
5.1k
Other Decks in Technology
See All in Technology
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
380
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Obsidian応用活用術
onikun94
1
470
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
Language Update: Java
skrb
2
290
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
20
9.6k
roppongirb_20250911
igaiga
1
210
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
410
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
120
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Embracing the Ebb and Flow
colly
87
4.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making Projects Easy
brettharned
117
6.4k
Documentation Writing (for coders)
carmenintech
74
5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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 ࢧ䛑