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
600
資訊安全:麻瓜的黑魔法防禦術
inndy
3
2.8k
HackmeCTF 平台背後的心酸血淚史
inndy
2
780
COSCUP 2018 Lightning Talk - 審稿好難,所以我們來寫程式吧
inndy
0
400
逆向工程:從入門到放棄
inndy
7
3.4k
HITCON 2017 Zeroday 發表會
inndy
0
1.3k
No More Crypto Fails
inndy
33
7.9k
你再共用密碼啊
inndy
1
710
CTF From Zero To One
inndy
5
4.9k
Other Decks in Technology
See All in Technology
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
890
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
140
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
430
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.1k
Engineer Career Talk
lycorp_recruit_jp
0
190
TypeScript、上達の瞬間
sadnessojisan
46
13k
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Scaling GitHub
holman
458
140k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Being A Developer After 40
akosma
87
590k
For a Future-Friendly Web
brad_frost
175
9.4k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Rails Girls Zürich Keynote
gr2m
94
13k
GitHub's CSS Performance
jonrohan
1030
460k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Six Lessons from altMBA
skipperchong
27
3.5k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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 ࢧ䛑