ដាក់អ្វីៗទាំងអស់បញ្ចូលគ្នា

មាតិកា

  1. URL មួយ ពីដើមដល់ចប់
  2. ការចុចលើកទីពីរ
  3. សង្ខេបឡើងវិញ
  4. នៅពេល Site មួយមិនដំណើរការ
  5. Cheat Sheet
  6. អ្វីដែលស៊េរីនេះមិនបាននិយាយដល់
  7. ទៅណាបន្ទាប់

1. URL មួយ ពីដើមដល់ចប់

នេះជាលើកទីមួយនៅថ្ងៃនេះ ដែលអ្នកបើក site ផ្ទាល់ខ្លួនរបស់អ្នក។ អ្នកវាយអត្ថបទនេះចូលក្នុង address bar ហើយចុច Enter៖

dara-sok.github.io/my-site

នេះជាអ្វីៗទាំងអស់ដែលកើតឡើង។

ដំណើររបស់ URL មួយ៖ ការវាយអាសយដ្ឋាន ការរក DNS ការតភ្ជាប់ TCP និង TLS HTTP request និង redirect មួយ edge server របស់ CDN ឆ្លើយតប browser បង្កើតទំព័រ និង pixel លើអេក្រង់

1. Browser អានអ្វីដែលអ្នកបានវាយ (ជំពូកទី 2)។ វាគ្មាន scheme ទេ ប៉ុន្តែវាមើលទៅដូចជា domain មិនមែនជាការស្វែងរក ដូច្នេះ browser បន្ថែម https://។ វាបំបែក URL៖ scheme https, host dara-sok.github.io, port 443 (លំនាំដើមសម្រាប់ https), path /my-site។ Browser ពិនិត្យ cache របស់វាសម្រាប់ URL នេះ — មិនទាន់មានអ្វីនៅឡើយទេ។

2. DNS ប្រែឈ្មោះទៅជាលេខ (ជំពូកទី 3)។ DNS cache ផ្ទាល់ខ្លួនរបស់ browser ទទេសម្រាប់ឈ្មោះនេះ ដូច្នេះវាសួរ operating system។ OS ពិនិត្យ cache របស់វា និង hosts file បន្ទាប់មកសួរ resolver ដែល Wi-Fi router របស់អ្នកបានប្រាប់វា។ Resolver មានចម្លើយរបស់ GitHub នៅក្នុង cache រួចហើយ ពីការរករបស់នរណាម្នាក់ផ្សេងទៀត។ ចម្លើយត្រឡប់មកវិញគឺ 185.199.108.153 ជាមួយ TTL មួយ។

3. Connection មួយត្រូវបានបើក (ជំពូកទី 4)។ OS ជ្រើសរើស port បណ្តោះអាសន្នមួយនៅខាងអ្នក — ឧបមាថា 52814 — ហើយ TCP ធ្វើ three-way handshake របស់វាជាមួយ 185.199.108.153:443។ វាទៅដល់ edge server របស់ CDN មួយនៅសិង្ហបុរី មិនមែននៅសហរដ្ឋអាមេរិកទេ ព្រោះ GitHub Pages ដំណើរការលើ CDN (ជំពូកទី 9)។ បន្ទាប់មក TLS handshake៖ server បង្ហាញ certificate *.github.io របស់វា browser ពិនិត្យថាវាត្រូវបាន sign ដោយ CA ដែលគួរឲ្យទុកចិត្ត ឈ្មោះត្រូវគ្នា ហើយវាមិនទាន់ផុតកំណត់។ Secret key មួយត្រូវបានព្រមព្រៀងគ្នា។ ចាប់ពីពេលនេះតទៅ អ្វីៗទាំងអស់ត្រូវបាន encrypt។

4. Request ត្រូវបានផ្ញើ — ហើយត្រូវបាន redirect (ជំពូកទី 5 និង 6)។ តាមរយៈ connection ដែលបាន encrypt នោះ៖

GET /my-site HTTP/2
Host: dara-sok.github.io
Accept: text/html,…
Accept-Encoding: gzip, br

/my-site គឺជា folder មួយ ដូច្នេះ GitHub ឆ្លើយ 301 Moved Permanently ជាមួយ Location: https://dara-sok.github.io/my-site/។ Browser ធ្វើតាមវាភ្លាមៗ តាមរយៈ connection ដដែល ដោយប្រើ GET /my-site/។ (លើកក្រោយ វានឹងចងចាំ 301 នោះ ហើយរំលងជំហាននេះ។)

5. CDN ឆ្លើយតប (ជំពូកទី 6 និង 9)។ Edge server មានច្បាប់ចម្លងថ្មីមួយ៖ x-cache: HIT។ វាផ្ញើ 200 OK, content-type: text/html; charset=utf-8, cache-control: max-age=600, etag មួយ និង HTML ដែលបាន compress ដោយ Brotli។ Browser decompress វា ហើយរក្សាទុកច្បាប់ចម្លងមួយនៅក្នុង cache របស់វាសម្រាប់ 10 នាទីបន្ទាប់។

6. Browser បង្កើតទំព័រ (ជំពូកទី 7 និង 9)។ វា parse HTML ទៅជា DOM ពីលើចុះក្រោម។ វារកឃើញ <link href="style.css"> ហើយ request /my-site/style.css តាមរយៈ connection ដដែល ហើយការ render រង់ចាំវា។ វារកឃើញ <img> ហើយ request រូបថត ប៉ុន្តែវាមិន block អ្វីទាំងអស់។

7. Pixel លើអេក្រង់ (ជំពូកទី 7)។ Style, layout, paint, composite — ហើយ GPU ដាក់ទំព័ររបស់អ្នកលើអេក្រង់។ រូបថត load ចប់ ហើយលេចឡើង ហើយពេលវេលា Load បង្ហាញនៅខាងក្រោមនៃ Network tab។ គ្មាន cookie ពាក់ព័ន្ធទេ ព្រោះ static site មិនចាំបាច់ចងចាំអ្នក (ជំពូកទី 8 និង 10)។ Connection នៅតែបើក ក្រែងលោអ្នកចុចអ្វីមួយ។

ទាំងអស់នោះជាធម្មតាចំណាយពេល មិនដល់មួយវិនាទីផង។

2. ការចុចលើកទីពីរ

ឥឡូវអ្នកចុច About me។ មើលថាមានអ្វីកើតឡើងតិចជាងមុនប៉ុណ្ណា៖

  • គ្មានការរក DNS — ចម្លើយនៅក្នុង cache ហើយទោះជាយ៉ាងណាក៏ដោយ connection នៅតែបើក។
  • គ្មាន TCP ឬ TLS handshake — connection ដដែលត្រូវបានប្រើឡើងវិញ។
  • Request — GET /my-site/about.html។
  • Response — 200 ជាមួយទំព័រ about។
  • style.css — មិនត្រូវបាន request សោះ។ វានៅក្នុង cache របស់ browser ហើយនៅថ្មីនៅឡើយ។ Network tab បង្ហាញ (memory cache)។

នោះហើយជាគោលបំណងទាំងមូលនៃជំពូកទី 4 និង 9៖ ការចូលមើលលើកទីមួយបង់ថ្លៃសម្រាប់ការរៀបចំ ហើយអ្វីៗទាំងអស់បន្ទាប់ពីនោះគឺថោក។

3. សង្ខេបឡើងវិញ

ជំពូកគំនិតសំខាន់
1. តើ Web ជាអ្វី?អ៊ីនធឺណិតគឺជាបណ្តាញ web គឺជាសេវាមួយនៅលើវា។ Client សួរ server ឆ្លើយ
2. URL ម្តងមួយផ្នែកScheme, host, port, path, query, fragment។ Fragment មិនដែលចាកចេញពី browser ទេ
3. IP Address និង DNSកុំព្យូទ័រប្រើលេខ។ DNS ប្រែឈ្មោះទៅជាលេខទាំងនោះ ហើយគ្រប់គ្នា cache ចម្លើយ
4. ការតភ្ជាប់៖ TCP, Port និង TLSTCP ធ្វើឲ្យការដឹកជញ្ជូនអាចទុកចិត្តបាន TLS ធ្វើឲ្យវាឯកជន និងបញ្ជាក់ថាអ្នកណានៅម្ខាងទៀត
5. HTTP RequestMethod មួយ path មួយ header និងប្រហែលជា body មួយ។ វាគ្រាន់តែជាអត្ថបទប៉ុណ្ណោះ
6. HTTP Response និង Status Code2xx ជោគជ័យ 3xx ទៅមើលកន្លែងផ្សេង 4xx កំហុសរបស់អ្នក 5xx កំហុសរបស់ server
7. ខាងក្នុង BrowserHTML → DOM → style → layout → paint។ ទំព័រមួយមានន័យថា request ច្រើន
8. Cookie, Session និង StateHTTP ភ្លេច browser រំលឹកវាដោយ cookie មួយនៅលើគ្រប់ request
9. Cache, CDN និងល្បឿនកុំទាញយកអ្វីដែលអ្នកមានរួចហើយ ហើយបម្រើវាពីកន្លែងដែលនៅជិត
10. Static Site, Web App និង APIកន្លែងដែល HTML ត្រូវបានបង្កើត និង HTTP ដឹកទិន្នន័យជំនួសឲ្យទំព័រ

4. នៅពេល Site មួយមិនដំណើរការ

ស៊េរីនេះក៏ជា ផែនទីសម្រាប់ debug ផងដែរ។ នៅពេលអ្វីមួយនៅលើ web ខូច ចូរដើរតាមជំហានដូចគ្នាដែល browser ធ្វើ ហើយរកជំហានទីមួយដែលបរាជ័យ៖

រោគសញ្ញាជំហានណាអ្វីដែលត្រូវពិនិត្យ
«This site can't be reached», DNS_PROBE_FINISHED_NXDOMAINDNSតើឈ្មោះសរសេរត្រឹមត្រូវទេ? តើ nslookup រកវាឃើញទេ? តើអ្នកទើបតែប្តូរ DNS record មែនទេ?
«Connection refused» ឬ timed outConnectionតើ server កំពុងដំណើរការទេ? នៅលើ port ត្រឹមត្រូវទេ? តើ localhost ជា host ត្រឹមត្រូវទេ?
«Your connection is not private»TLSCertificate ផុតកំណត់ ឬឈ្មោះមិនត្រូវគ្នា
404Requestពិនិត្យ path — និង relative link នៅលើ GitHub Pages
401 / 403Requestមិនទាន់ log in / មិនត្រូវបានអនុញ្ញាត។ ពិនិត្យ cookie ឬ token
500ServerBug នៅក្នុងកូដ server — ពិនិត្យ log របស់វា
502 / 504ServerApp នៅពីក្រោយ proxy គាំង ឬយឺតពេក
ត្រូវបាន block ដោយ CORSBrowserAPI server ត្រូវតែអនុញ្ញាត origin របស់អ្នក
«ការផ្លាស់ប្តូររបស់ខ្ញុំមិនបង្ហាញ»CacheHard reload ឬរង់ចាំឲ្យ max-age អស់ពេល
ទំព័រ load បាន ប៉ុន្តែមើលទៅខូចRenderingរក request CSS ឬ JS នៅក្នុង Network — តើវាជា 404 មែនទេ?

ជំហានដំបូងស្ទើរតែតែងតែដូចគ្នា៖ បើក Network tab ហើយរក request នោះ។ បើគ្មាន request ទេ បញ្ហាគឺនៅមុនវា (DNS, connection ឬ frontend មិនដែលផ្ញើវា)។ បើមាន request status code របស់វាប្រាប់អ្នកថាត្រូវមើលខាងណា។

5. Cheat Sheet

curl

curl <url>                          # GET, print the body
curl -I <url>                       # headers only (HEAD)
curl -i <url>                       # headers and body
curl -v <url>                       # everything: DNS, TLS, request, response
curl -L <url>                       # follow redirects
curl -X POST <url> -d "a=1"         # POST a form
curl -X POST <url> \
  -H "Content-Type: application/json" \
  -d '{"a": 1}'                     # POST JSON
curl -H "Name: value" <url>         # add a header
curl -c jar.txt -b jar.txt <url>    # save and send cookies
curl -s -o /dev/null -w "%{http_code}\n" <url>   # just the status code

DNS និងបណ្តាញ

nslookup <domain>                   # name → IP address
cat /etc/hosts                      # local overrides

DevTools (F12 ឬ Cmd+Option+I លើ macOS)

កន្លែងសម្រាប់អ្វី
Networkគ្រប់ request៖ method, status, header, timing, size
Network → Disable cacheទទួលបាន file ថ្មីជានិច្ច ខណៈពេលកំពុងអភិវឌ្ឍ
Network → Preserve logរក្សា request ឆ្លងកាត់ការ load ទំព័រ និងការ submit form
Network → Fetch/XHRតែ request ដែល JavaScript បានធ្វើប៉ុណ្ណោះ
Network → throttlingធ្វើពុតជាកំពុងប្រើ connection ទូរស័ព្ទយឺត
ElementsDOM នៅពេលនេះ
ConsoleError រួមទាំង CORS
ApplicationCookie, localStorage
Lighthouseរបាយការណ៍ performance

Status code ដែលគួរចាំឲ្យរលត់មាត់

200 OK            301 Moved Permanently   400 Bad Request    500 Internal Server Error
201 Created       302 Found               401 Unauthorized   502 Bad Gateway
204 No Content    304 Not Modified        403 Forbidden      503 Service Unavailable
                                          404 Not Found      504 Gateway Timeout
                                          429 Too Many Requests

6. អ្វីដែលស៊េរីនេះមិនបាននិយាយដល់

ស៊េរីនេះបានគ្របដណ្តប់អ្វីដែលអ្នកអភិវឌ្ឍន៍គ្រប់រូបត្រូវការ។ មានប្រធានបទមួយចំនួនទៀតដែលអ្នកនឹងជួបនៅពេលអ្នកទៅមុខបន្ថែមទៀត៖

  • WebSocket — connection ដែលនៅតែបើក ដើម្បីឲ្យ server អាច push សារបានភ្លាមៗ សម្រាប់ chat និងការធ្វើបច្ចុប្បន្នភាពផ្ទាល់។
  • HTTP/2 និង HTTP/3 ឲ្យស៊ីជម្រៅ — របៀបដែលពួកវាផ្ញើ request ច្រើនក្នុងពេលតែមួយ និងហេតុអ្វី HTTP/3 ដំណើរការលើ UDP។
  • Load balancer និង reverse proxy — របៀបដែល site មួយដំណើរការលើ server ច្រើន។ មាននៅក្នុង បណ្តាញសម្រាប់អ្នកអភិវឌ្ឍន៍ និង មូលដ្ឋានគ្រឹះ System Design។
  • ការវាយប្រហារលើសុវត្ថិភាព web — XSS, CSRF និងផ្សេងទៀត ដែលប្រើ cookie, script និង form ខុសគោលបំណង។ Track សន្តិសុខសាយប័រគ្របដណ្តប់វាឲ្យបានត្រឹមត្រូវ។
  • Service worker — script ដែលអនុញ្ញាតឲ្យ site មួយដំណើរការ offline និង cache របស់ផ្សេងៗតាមវិធីឆ្លាតវៃ។
  • SEO — របៀបដែល search engine crawl និងចាត់ថ្នាក់ទំព័រ និងហេតុអ្វី HTML ដែល server-rendered និង static ជួយបាន។

7. ទៅណាបន្ទាប់

ឥឡូវអ្នកដឹងហើយថាមានអ្វីកើតឡើងលើគ្រប់ request ដែលកូដរបស់អ្នកនឹងផ្ញើ ឬទទួល។ នេះជារបៀបដែលវាភ្ជាប់ទៅនឹងផ្នែកដទៃទៀតនៃ ផែនទីការសិក្សា «ចាប់ផ្តើមនៅទីនេះ»៖

  • មូលដ្ឋានគ្រឹះ HTML និង CSS — ជំហានបន្ទាប់។ អ្នកដឹងហើយថា browser ធ្វើអ្វីជាមួយ HTML និង CSS ឥឡូវរៀនសរសេរវាឲ្យបានល្អ ហើយធ្វើឲ្យ my-site មើលទៅស្អាត។ រាល់ការកែលម្អនៅតែជា branch មួយ pull request មួយ និង merge មួយដែលដំណើរការផ្ទាល់។
  • មូលដ្ឋានគ្រឹះ JavaScript និង TypeScript — fetch(), DOM និង event loop ដែលអ្នកទើបតែបានឃើញពីខាងក្រៅ។
  • NestJS Crash Course — សាងសង់ផ្នែកម្ខាងទៀត៖ API មួយដែលទទួល request ហើយផ្ញើ JSON response ជាមួយ status code ត្រឹមត្រូវ។
  • Keycloak Crash Course — redirect, token និង header Authorization សម្រាប់ការ log in ពិតប្រាកដ។
  • បណ្តាញសម្រាប់អ្នកអភិវឌ្ឍន៍ — ចូលជ្រៅមួយជាន់ទៀតទៅក្នុង IP, TCP, TLS, port និង proxy ជាមួយឧបករណ៍ច្រើនទៀតសម្រាប់ debug។
  • Cloud+ Tutorial — deploy server ផ្ទាល់ខ្លួនរបស់អ្នក ហើយភ្ជាប់ custom domain មួយ ដោយប្រើ DNS record ពីជំពូកទី 3។

ទម្លាប់មួយដែលត្រូវយកទៅជាមួយ៖ ទុក Network tab ឲ្យបើកជានិច្ច។ រាល់ពេលដែលអ្នកសាងសង់អ្វីមួយ សូមក្រឡេកមើលអ្វីដែលពិតជាកំពុងត្រូវបានផ្ញើ និងទទួល។ Bug ភាគច្រើននៅលើ web អាចមើលឃើញនៅទីនោះ នៅក្នុង request ឬ response មួយ — ហើយឥឡូវនេះ អ្នកអាចអានវាបានហើយ។

មុនStatic Site, Web App និង API

ទិញកាហ្វេជូនខ្ញុំ

ចូលចិត្តមេរៀននេះមែនទេ? សូមពិចារណាទិញកាហ្វេជូនខ្ញុំមួយកែវ ដើម្បីគាំទ្រការបង្កើតមាតិកាឥតគិតថ្លៃបន្ថែមទៀត!