# Web Server and Reverse Proxy (Nginx, Caddy) **ผู้จัดทํา:** อรรถพล คงหวาน --- ## Outline 1. แนวคิดของ Web Server และ HTTP 2. การติดตั้ง Nginx 3. Nginx Configuration 4. Virtual Host (Server Block) 5. Reverse Proxy ด้วย Nginx 6. Load Balancing ด้วย Nginx --- ## Outline (ต่อ) 7. SSL/TLS 8. Caching และ Compression 9. Caddy Web Server 10. Nginx vs Caddy vs อื่น ๆ 11. Security และ Hardening --- # 9.1 แนวคิดของ Web Server และ HTTP --- ## Web Server คืออะไร - **Web Server** คือซอฟต์แวร์ที่รับคำขอ (Request) จาก Client ผ่าน HTTP/HTTPS - ส่งทรัพยากร (Resource) กลับไปในรูปของ Response - ตัวอย่าง: Nginx, Apache HTTP Server, Caddy, LiteSpeed, IIS - Web Server สมัยใหม่ยังทำหน้าที่: - **Reverse Proxy** - **Load Balancer** - **TLS Terminator** - **API Gateway** --- ## สถาปัตยกรรม Web Server <pre class="mermaid"> %%{init: {'theme':'base','themeVariables':{ 'primaryColor':'#3c3836','primaryTextColor':'#ebdbb2','primaryBorderColor':'#fabd2f', 'lineColor':'#a89984','secondaryColor':'#504945','tertiaryColor':'#282828', 'background':'#282828','mainBkg':'#3c3836','clusterBkg':'#32302f','clusterBorder':'#fabd2f' }}}%% flowchart LR Client["🖥️ Client<br/>เบราว์เซอร์"] -->|HTTP Request| WS["⚙️ Web Server<br/>(Nginx/Caddy)"] WS -->|Static| FS[("📁 Filesystem<br/>HTML/CSS/JS")] WS -->|Dynamic| App["🐍 Application Server<br/>(Node.js/Python/PHP)"] App --> DB[("🗄️ Database")] WS -->|HTTP Response| Client style Client fill:#458588,stroke:#83a598,color:#ebdbb2 style WS fill:#d65d0e,stroke:#fe8019,color:#282828 style App fill:#98971a,stroke:#b8bb26,color:#282828 style DB fill:#b16286,stroke:#d3869b,color:#ebdbb2 style FS fill:#689d6a,stroke:#8ec07c,color:#282828 </pre> --- ## 9.1.1 HTTP/HTTPS Protocol **HTTP (HyperText Transfer Protocol)** คือโพรโทคอลระดับ Application Layer ที่ใช้สื่อสารระหว่าง Client กับ Server มีวิวัฒนาการตามช่วงเวลา | เวอร์ชัน | ปี | คุณสมบัติเด่น | | --- | --- | --- | | HTTP/0.9 | 1991 | รองรับเฉพาะ GET, ตอบ HTML | | HTTP/1.0 | 1996 | เพิ่ม Header, Status Code | | HTTP/1.1 | 1997 | Persistent Connection, Host header | --- ## HTTP เวอร์ชันใหม่ | เวอร์ชัน | ปี | คุณสมบัติเด่น | Transport | | --- | --- | --- | --- | | HTTP/2 | 2015 | Binary framing, Multiplexing, HPACK | TCP + TLS | | HTTP/3 | 2022 | ใช้ QUIC, ลด HoL blocking, 0-RTT | UDP (QUIC) | - **HTTP/1.1** ใช้ Text-based protocol → Head-of-Line Blocking - **HTTP/2** ใช้ Binary framing, Multiplexing บนการเชื่อมต่อเดียว - **HTTP/3** แก้ HoL Blocking ใน Transport ด้วย QUIC บน UDP รวม TLS 1.3 --- ## HTTP/1.1 vs HTTP/2 <pre class="mermaid"> %%{init: {'theme':'base','themeVariables':{ 'primaryColor':'#3c3836','primaryTextColor':'#ebdbb2','primaryBorderColor':'#fabd2f', 'lineColor':'#a89984','background':'#282828' }}}%% sequenceDiagram participant C as Client participant S as Server Note over C,S: HTTP/1.1 Persistent C->>S: GET /index.html S-->>C: 200 OK + HTML C->>S: GET /style.css S-->>C: 200 OK + CSS Note over C,S: HTTP/2 Multiplexing C->>S: Stream 1: GET /index.html C->>S: Stream 3: GET /style.css C->>S: Stream 5: GET /app.js S-->>C: Stream 1, 3, 5 (parallel) </pre> --- ## 9.1.2 Request-Response Cycle วงจรการสื่อสารพื้นฐานของ HTTP ประกอบด้วยขั้นตอน: 1. **DNS Resolution** — แปลงโดเมนเป็น IP Address 2. **TCP Handshake** — 3-way handshake (SYN → SYN-ACK → ACK) 3. **TLS Handshake** (HTTPS) — เจรจา Cipher, แลก Key 4. **HTTP Request** — Method, URI, Header, Body 5. **Server Processing** — ประมวลผลและสร้าง Response 6. **HTTP Response** — Status Code, Header, Body 7. **Connection Termination** — ปิดหรือคงไว้ผ่าน Keep-Alive --- ## โครงสร้าง HTTP Request ```http GET /api/users/42 HTTP/1.1 Host: api.example.com User-Agent: Mozilla/5.0 Accept: application/json Authorization: Bearer eyJhbGc... ``` --- ## โครงสร้าง HTTP Response ```http HTTP/1.1 200 OK Date: Sat, 25 Apr 2026 10:30:00 GMT Content-Type: application/json Content-Length: 87 Cache-Control: max-age=300 {"id":42,"name":"Moo","role":"lecturer","university":"RMUTSV"} ``` --- ## 9.1.3 HTTP Methods | Method | ใช้ทำอะไร | Idempotent | Safe | | --- | --- | --- | --- | | **GET** | ดึงข้อมูล | ✅ | ✅ | | **POST** | สร้างข้อมูลใหม่ | ❌ | ❌ | | **PUT** | แทนที่ข้อมูลทั้งก้อน | ✅ | ❌ | | **PATCH** | แก้ไขข้อมูลบางส่วน | ❌ | ❌ | | **DELETE** | ลบข้อมูล | ✅ | ❌ | | **HEAD** | ดึงเฉพาะ Header | ✅ | ✅ | | **OPTIONS** | ตรวจ Server (CORS) | ✅ | ✅ | > **Idempotent** = ส่งซ้ำกี่ครั้งก็ได้ผลเดียวกัน > **Safe** = ไม่เปลี่ยน State ของ Server --- ## 9.1.4 Status Code (1xx-3xx) **1xx (Informational)** — กำลังดำเนินการ - `100 Continue`, `101 Switching Protocols` **2xx (Success)** — สำเร็จ - `200 OK`, `201 Created`, `204 No Content`, `206 Partial Content` **3xx (Redirection)** — ต้องไปที่อื่น - `301 Moved Permanently`, `302 Found`, `304 Not Modified` - `307 Temporary Redirect`, `308 Permanent Redirect` --- ## Status Code (4xx-5xx) **4xx (Client Error)** — ผิดที่ Client - `400 Bad Request`, `401 Unauthorized`, `403 Forbidden` - `404 Not Found`, `405 Method Not Allowed` - `409 Conflict`, `422 Unprocessable Entity`, `429 Too Many Requests` **5xx (Server Error)** — ผิดที่ Server - `500 Internal Server Error`, `502 Bad Gateway` - `503 Service Unavailable`, `504 Gateway Timeout` --- ## 9.1.5 HTTP Header **HTTP Header** คือคู่ Key-Value ที่ใช้แลกเปลี่ยน Metadata แบ่งเป็น: - **General Header** — ใช้ได้ทั้ง Request/Response เช่น `Date`, `Connection`, `Cache-Control` - **Request Header** — ส่งจาก Client เช่น `Host`, `User-Agent`, `Accept`, `Authorization`, `Cookie` - **Response Header** — ส่งจาก Server เช่น `Server`, `Content-Type`, `Set-Cookie`, `ETag`, `Location` - **Entity Header** — เกี่ยวกับ Body เช่น `Content-Encoding`, `Content-Language`, `Content-Disposition` --- ## Cookie **Cookie** คือไฟล์เล็กที่ Server ส่งไปเก็บที่ Client ผ่าน `Set-Cookie` ```http Set-Cookie: session_id=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600 ``` **Cookie Attribute สำคัญ:** - `HttpOnly` — ป้องกัน JavaScript เข้าถึง (ลด XSS) - `Secure` — ส่งเฉพาะผ่าน HTTPS เท่านั้น - `SameSite` — `Strict`/`Lax`/`None` (ป้องกัน CSRF) - `Max-Age` / `Expires` — อายุของ Cookie - `Path` / `Domain` — ขอบเขตที่ใช้งานได้ --- ## Session **Session** คือสถานะของผู้ใช้ที่ Server เก็บไว้ - โดยปกติใช้ Cookie เก็บ `session_id` - เพื่ออ้างอิงข้อมูล Session ที่ฝั่ง Server - อาจเก็บใน Redis, Memcached, Database --- ## 9.1.6 Static vs Dynamic Content | คุณสมบัติ | Static | Dynamic | | --- | --- | --- | | ความเร็ว | เร็วมาก | ช้ากว่า | | Caching | ง่าย (CDN, Browser) | ยาก | | ทรัพยากร | ใช้น้อย | ใช้มาก (CPU, Memory) | | ตัวอย่าง | landing page, blog (SSG) | dashboard, e-commerce | - **Static** — HTML, CSS, JS, รูป, ฟอนต์ ไม่เปลี่ยนตามผู้ใช้ - **Dynamic** — สร้างตามคำขอ ต้องใช้ Application Server (PHP-FPM, Gunicorn, Node.js) --- ## 9.1.7 MIME Type, Content-Type **MIME Type** ใช้บอกประเภทข้อมูลที่ส่งผ่าน HTTP ผ่าน Header `Content-Type` รูปแบบ `type/subtype` - `text/html` — เอกสาร HTML - `text/css` — สไตล์ชีต - `application/javascript` — JavaScript - `application/json` — ข้อมูล JSON - `application/xml` — ข้อมูล XML - `image/png`, `image/jpeg`, `image/webp`, `image/svg+xml` — รูปภาพ --- ## MIME Type อื่น ๆ - `video/mp4`, `audio/mpeg` — สื่อมัลติมีเดีย - `application/pdf` — เอกสาร PDF - `multipart/form-data` — ฟอร์มที่อัปโหลดไฟล์ - `application/octet-stream` — ไฟล์ไบนารีทั่วไป Nginx จะกำหนด MIME Type ตามนามสกุลไฟล์อัตโนมัติ ผ่านไฟล์ `/etc/nginx/mime.types` ```http HTTP/1.1 200 OK Content-Type: application/json; charset=utf-8 {"message":"สวัสดีครับ","status":"ok"} ``` --- # 9.2 การติดตั้ง Nginx --- ## Nginx คืออะไร **Nginx** (อ่านว่า "Engine-X") เป็น Web Server แบบ Event-driven - พัฒนาโดย **Igor Sysoev** ในปี 2004 - แก้ปัญหา **C10K Problem** (รองรับ 10,000 connection พร้อมกัน) - เป็น Web Server ที่นิยมใช้งานบน Server Linux อันดับต้น ๆ ของโลก --- ## 9.2.1 ติดตั้งบน Debian/Ubuntu ```bash # อัพเดต package index sudo apt update # ติดตั้ง nginx จาก repository ทางการ sudo apt install -y nginx # ตรวจสอบเวอร์ชัน nginx -v # เริ่มต้นและเปิดให้รันอัตโนมัติเมื่อ boot sudo systemctl enable --now nginx # ตรวจสอบสถานะ sudo systemctl status nginx ``` --- ## ติดตั้งบน Fedora/RHEL ```bash # ติดตั้ง nginx sudo dnf install -y nginx # เปิด firewall ให้ port 80, 443 sudo firewall-cmd --permanent --add-service=http sudo firewall-cmd --permanent --add-service=https sudo firewall-cmd --reload # เริ่มบริการ sudo systemctl enable --now nginx ``` --- ## ติดตั้งบน Arch Linux ```bash # ติดตั้งจาก official repository sudo pacman -S nginx # เริ่มบริการ sudo systemctl enable --now nginx ``` **ทดสอบการติดตั้ง:** เปิดเบราว์เซอร์ไปที่ `http://localhost` หากเห็นหน้า "Welcome to nginx!" แสดงว่าติดตั้งสำเร็จ --- ## 9.2.2 โครงสร้างไฟล์ Nginx ``` /etc/nginx/ ├── nginx.conf # ไฟล์ตั้งค่าหลัก ├── mime.types # นามสกุลไฟล์ → MIME type ├── fastcgi_params # พารามิเตอร์ FastCGI ├── proxy_params # พารามิเตอร์ proxy ├── conf.d/ # config เสริม ├── sites-available/ # virtual host (เก็บไว้) ├── sites-enabled/ # symlink → enabled host └── snippets/ # snippet ใช้ซ้ำ ``` > RHEL/Fedora ใช้ `conf.d/` เก็บไฟล์ตั้งค่าทั้งหมดแทน --- ## 9.2.3 การจัดการบริการ Nginx ```bash # เริ่ม/หยุดบริการ sudo systemctl start nginx sudo systemctl stop nginx # รีสตาร์ท (connection หลุด) sudo systemctl restart nginx # โหลด config ใหม่ (graceful) sudo systemctl reload nginx sudo nginx -s reload # เปิดอัตโนมัติเมื่อ boot sudo systemctl enable nginx # ดู log แบบ real-time sudo journalctl -u nginx -f ``` --- ## restart vs reload **`restart`** - หยุด process แล้วสร้างใหม่ทั้งหมด - Connection ที่ค้างอยู่หลุดทั้งหมด **`reload`** - ส่ง signal `SIGHUP` ให้ master process - อ่าน config ใหม่ → spawn worker ใหม่ - Worker เก่าจัดการ connection ที่ค้างอยู่จนเสร็จ (graceful) --- ## 9.2.4 nginx -t (Test Config) ก่อน reload ทุกครั้ง **ควรทดสอบ syntax** ```bash # ทดสอบ config sudo nginx -t # ทดสอบและแสดง config ที่ถูก parse sudo nginx -T # ระบุ config file sudo nginx -t -c /etc/nginx/nginx.conf ``` **ผลลัพธ์ที่ถูกต้อง:** ``` nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful ``` --- ## Best Practice **คำแนะนำ:** ใช้คำสั่งคู่เพื่อให้ reload เกิดขึ้นต่อเมื่อ config ถูกต้อง ```bash sudo nginx -t && sudo systemctl reload nginx ``` **ตัวอย่างเมื่อมี error:** ``` nginx: [emerg] unexpected "}" in /etc/nginx/sites-enabled/example.com:25 nginx: configuration file /etc/nginx/nginx.conf test failed ``` --- # 9.3 Nginx Configuration --- ## โครงสร้างไฟล์ตั้งค่า Nginx - ใช้ syntax แบบ **block-based** - ประกอบด้วย **Directive** และ **Context (Block)** - Directive แต่ละตัวต้องลงท้ายด้วย **semicolon (`;`)** --- ## 9.3.1 Context ใน Nginx <pre class="mermaid"> %%{init: {'theme':'base','themeVariables':{ 'primaryColor':'#3c3836','primaryTextColor':'#ebdbb2','primaryBorderColor':'#fabd2f', 'lineColor':'#a89984','clusterBkg':'#32302f','clusterBorder':'#fabd2f','background':'#282828' }}}%% flowchart TB subgraph Main["main context (global)"] M1["user, worker_processes,<br/>error_log, pid"] subgraph Events["events { }"] E1["worker_connections,<br/>use, multi_accept"] end subgraph Http["http { }"] H1["mime.types, log_format,<br/>gzip, ssl_protocols"] subgraph Server["server { } (virtual host)"] S1["listen, server_name,<br/>root, index"] subgraph Location["location { }"] L1["try_files, proxy_pass,<br/>return, rewrite"] end end end end style Main fill:#282828,stroke:#fabd2f,color:#ebdbb2 style Events fill:#3c3836,stroke:#83a598,color:#ebdbb2 style Http fill:#3c3836,stroke:#b8bb26,color:#ebdbb2 style Server fill:#504945,stroke:#fe8019,color:#ebdbb2 style Location fill:#665c54,stroke:#d3869b,color:#ebdbb2 </pre> --- ## ตัวอย่าง nginx.conf (main, events) ```nginx # main context user www-data; worker_processes auto; # จำนวน worker = CPU core pid /run/nginx.pid; error_log /var/log/nginx/error.log warn; # events context events { worker_connections 1024; # connection ต่อ worker use epoll; # I/O multiplexing บน Linux multi_accept on; } ``` --- ## ตัวอย่าง http block ```nginx http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; keepalive_timeout 65; gzip on; include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*; } ``` --- ## 9.3.2 Directive พื้นฐาน Directive พื้นฐานใน `server` block: - **`listen`** — กำหนด Port และ IP ที่ Nginx รับ connection - **`server_name`** — ระบุชื่อโดเมนของ Virtual Host - **`root`** — ไดเรกทอรีหลักที่เก็บไฟล์เว็บไซต์ - **`index`** — ชื่อไฟล์ default เมื่อเข้าถึงไดเรกทอรี --- ## ตัวอย่าง Server Block ```nginx server { listen 80; # HTTP port 80 ทุก IP listen [::]:80; # IPv6 ด้วย # listen 443 ssl http2; # HTTPS + HTTP/2 # listen 192.168.1.10:8080; # IP เฉพาะ server_name example.com www.example.com; # server_name *.example.com; # wildcard # server_name ~^(www\.)?(?<sub>.+)\.example\.com$; root /var/www/example.com/public; index index.html index.htm index.php; } ``` --- ## 9.3.3 Location Block **`location`** ใช้กำหนดพฤติกรรมเมื่อ URI ตรงกับ pattern | Modifier | ความหมาย | ลำดับสำคัญ | | --- | --- | --- | | `=` | Exact match | 1 (สูงสุด) | | `^~` | Prefix match (หยุดค้น regex) | 2 | | `~` | Regex (case-sensitive) | 3 | | `~*` | Regex (case-insensitive) | 3 | | (ไม่มี) | Prefix match (default) | 4 (ต่ำสุด) | --- ## ขั้นตอนการ Match 1. ค้นหา **exact match (`=`)** ก่อน — ถ้าเจอใช้ทันที 2. ค้นหา **prefix match** ที่ยาวที่สุด — เก็บไว้ก่อน 3. ถ้า prefix นั้นมี `^~` → ใช้ทันที (ข้าม regex) 4. ค้นหา **regex match** ตามลำดับ — ใช้ตัวแรกที่ match 5. ถ้าไม่มี regex match → ใช้ prefix match จากข้อ 2 --- ## ตัวอย่าง Location ```nginx server { # 1. Exact match location = / { try_files /index.html =404; } # 2. Prefix match + ^~ location ^~ /static/ { expires 30d; access_log off; } # 3. Regex case-insensitive location ~* \.(jpg|jpeg|png|gif|webp|svg)$ { expires 7d; } } ``` --- ## Location ต่อ ```nginx # 4. Regex match — PHP location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php8.2-fpm.sock; } # 5. Default prefix — fallback location / { try_files $uri $uri/ /index.html; } ``` --- ## 9.3.4 try_files **`try_files`** — ตรวจสอบไฟล์ตามลำดับ ถ้ามีจะส่งไฟล์นั้น ถ้าไม่มีจะลองตัวถัดไป ```nginx # SPA: ลองหาไฟล์ → โฟลเดอร์ → fallback /index.html location / { try_files $uri $uri/ /index.html; } # หาไฟล์ ถ้าไม่เจอตอบ 404 location / { try_files $uri =404; } ``` --- ## return Directive **`return`** — ตอบกลับทันทีไม่ประมวลผลต่อ ```nginx # Redirect 301 ทั้งโดเมน server { listen 80; server_name old.example.com; return 301 https://new.example.com$request_uri; } # ตอบ JSON สั้น ๆ location /health { default_type application/json; return 200 '{"status":"ok"}'; } ``` --- ## rewrite Directive **`rewrite`** — แก้ไข URI ภายใน ```nginx # แก้ไข URI ภายใน (last) rewrite ^/old-path/(.*)$ /new-path/$1 last; # Redirect 302 ภายนอก rewrite ^/blog/(.*)$ /articles/$1 redirect; # Redirect 301 permanent rewrite ^/blog/(.*)$ /articles/$1 permanent; # break — ใช้ URI ใหม่ใน location เดิม rewrite ^/api/v1/(.*)$ /v1/$1 break; ``` > **คำแนะนำ:** หลีกเลี่ยง `rewrite` ถ้าใช้ `return` หรือ `try_files` ได้ --- ## 9.3.5 include Directive **`include`** ใช้รวมไฟล์ config อื่น ๆ ```nginx http { # รวมไฟล์ในโฟลเดอร์ conf.d include /etc/nginx/conf.d/*.conf; # รวม snippet include /etc/nginx/snippets/ssl-params.conf; } ``` **ตัวอย่าง ssl-params.conf:** ```nginx ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on; ssl_session_timeout 1d; ``` --- ## 9.3.6 Access Log และ Error Log Nginx มี log 2 ประเภทหลัก: - **Access Log** — บันทึกทุก request ที่เข้ามา - **Error Log** — บันทึก error และ warning ของ Nginx เอง ระดับ `error_log`: - `debug`, `info`, `notice`, `warn` - `error`, `crit`, `alert`, `emerg` --- ## Custom Log Format ```nginx log_format combined_real '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent ' '"$http_referer" "$http_user_agent" ' 'rt=$request_time ' 'urt="$upstream_response_time"'; access_log /var/log/nginx/access.log combined_real; error_log /var/log/nginx/error.log warn; ``` --- ## JSON Log Format ```nginx log_format json_log escape=json '{' '"time":"$time_iso8601",' '"remote_addr":"$remote_addr",' '"method":"$request_method",' '"uri":"$request_uri",' '"status":$status,' '"size":$body_bytes_sent,' '"rt":$request_time' '}'; ``` เหมาะสำหรับส่งเข้า ELK / Loki --- ## ปิด Log สำหรับ Static Asset ลดภาระดิสก์โดยปิด log สำหรับ static asset: ```nginx location ~* \.(jpg|png|css|js|ico)$ { access_log off; expires 30d; } ``` --- # 9.4 Virtual Host (Server Block) --- ## Virtual Host คืออะไร - **Virtual Host** ใน Nginx เรียกว่า **Server Block** - กลไกที่ทำให้ Nginx ตัวเดียวโฮสต์เว็บได้หลายเว็บ - บน Server เครื่องเดียวกัน --- ## 9.4.1 Name-based Virtual Hosting วิธีที่นิยมที่สุด — ใช้ `Host` header แยกเว็บ ```nginx # /etc/nginx/sites-available/site-a.com server { listen 80; server_name site-a.com www.site-a.com; root /var/www/site-a; index index.html; } # /etc/nginx/sites-available/site-b.com server { listen 80; server_name site-b.com www.site-b.com; root /var/www/site-b; } ``` --- ## เปิดใช้งาน Virtual Host ```bash # สร้างโฟลเดอร์เว็บ sudo mkdir -p /var/www/site-a /var/www/site-b echo "<h1>Site A</h1>" | sudo tee /var/www/site-a/index.html echo "<h1>Site B</h1>" | sudo tee /var/www/site-b/index.html # เปิดใช้งานด้วย symlink sudo ln -s /etc/nginx/sites-available/site-a.com /etc/nginx/sites-enabled/ sudo ln -s /etc/nginx/sites-available/site-b.com /etc/nginx/sites-enabled/ # ทดสอบและ reload sudo nginx -t && sudo systemctl reload nginx ``` --- ## ทดสอบ Virtual Host ```bash # ทดสอบจาก client (ถ้าโดเมนยังไม่ผูก แก้ /etc/hosts) curl -H "Host: site-a.com" http://192.168.1.100 curl -H "Host: site-b.com" http://192.168.1.100 ``` --- ## 9.4.2 Port-based Virtual Host ใช้ port ต่างกันแยกแต่ละเว็บ — เหมาะกับ dev / admin panel ```nginx server { listen 8080; server_name _; root /var/www/dev; index index.html; } server { listen 9090; server_name _; root /var/www/admin; allow 192.168.1.0/24; deny all; } ``` --- ## 9.4.3 Default Server เมื่อ `Host` header ไม่ตรงกับ `server_name` ใด ๆ Nginx ใช้ **Default Server** ```nginx # Default server — ตอบ 444 (close connection) สำหรับ host ที่ไม่รู้จัก server { listen 80 default_server; listen [::]:80 default_server; server_name _; return 444; } server { listen 80; server_name example.com www.example.com; root /var/www/example.com; } ``` > **Security:** `return 444` ปิด attack ที่ใช้ IP ตรง ๆ --- ## 9.4.4 Wildcard Hostname รองรับ subdomain แบบไดนามิกด้วย wildcard หรือ regex ```nginx # Wildcard — match ทุก subdomain server { listen 80; server_name *.example.com; root /var/www/wildcard; } # Regex + Named capture server { listen 80; server_name ~^(?<sub>.+)\.example\.com$; root /var/www/users/$sub; # moo.example.com → /var/www/users/moo } ``` --- # 9.5 Reverse Proxy ด้วย Nginx --- ## 9.5.1 Reverse vs Forward Proxy <pre class="mermaid"> %%{init: {'theme':'base','themeVariables':{ 'primaryColor':'#3c3836','primaryTextColor':'#ebdbb2','primaryBorderColor':'#fabd2f', 'lineColor':'#a89984','clusterBkg':'#32302f','clusterBorder':'#fabd2f','background':'#282828' }}}%% flowchart LR subgraph Forward["🔵 Forward Proxy (ตัวแทน Client)"] C1["Client A"] --> FP["Forward Proxy (Squid, Tor)"] C2["Client B"] --> FP FP --> Internet["🌐 Internet"] end subgraph Reverse["🟠 Reverse Proxy (ตัวแทน Server)"] Inet["🌐 Internet Clients"] --> RP["Reverse Proxy (Nginx, Caddy)"] RP --> B1["Backend 1"] RP --> B2["Backend 2"] RP --> B3["Backend 3"] end Forward ~~~ Reverse style Forward fill:#282828,stroke:#83a598,color:#ebdbb2 style Reverse fill:#282828,stroke:#fe8019,color:#ebdbb2 style FP fill:#458588,stroke:#83a598,color:#ebdbb2 style RP fill:#d65d0e,stroke:#fe8019,color:#282828 </pre> --- ## เปรียบเทียบ Forward vs Reverse | คุณสมบัติ | Forward Proxy | Reverse Proxy | | --- | --- | --- | | ตัวแทนของ | Client | Server | | ตำแหน่ง | ฝั่ง Client | ฝั่ง Server | | รู้จักโดย | Client ตั้งค่าเอง | Client ผ่าน DNS | | Use Case | Bypass firewall, Anonymity | Load balancing, SSL termination | | ตัวอย่าง | Squid, Tor, 3proxy | Nginx, Caddy, HAProxy, Traefik | --- ## 9.5.2 proxy_pass **`proxy_pass`** เป็น Directive หลักของ Reverse Proxy ```nginx server { listen 80; server_name app.example.com; location / { proxy_pass http://127.0.0.1:3000; } } ``` --- ## proxy_pass: มี / ท้ายหรือไม่ ```nginx # กรณี 1: ไม่มี / ท้าย — URI ส่งต่อทั้งหมด location /api/ { proxy_pass http://backend; # /api/users → backend/api/users } # กรณี 2: มี / ท้าย — ตัด prefix location /api/ { proxy_pass http://backend/; # /api/users → backend/users } # กรณี 3: มี path ท้าย location /api/ { proxy_pass http://backend/v1/; # /api/users → backend/v1/users } ``` --- ## 9.5.3 proxy_set_header ส่งข้อมูล Client ผ่าน Header เพิ่มเติม ```nginx location / { proxy_pass http://127.0.0.1:3000; # ชื่อ host เดิม proxy_set_header Host $host; # IP จริงของ client proxy_set_header X-Real-IP $remote_addr; # IP chain proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # http หรือ https proxy_set_header X-Forwarded-Proto $scheme; } ``` --- ## Header เพิ่มเติม ```nginx proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Port $server_port; ``` > **หมายเหตุ:** `X-Forwarded-*` เป็น de-facto header > มี standard คือ `Forwarded` (RFC 7239) แต่ยังไม่ใช้แพร่หลาย --- ## 9.5.4 WebSocket Proxy **WebSocket** ต้องการ HTTP Upgrade เพื่อเปลี่ยน Connection ```nginx # กำหนด map — ตอบ Connection: upgrade เมื่อ client ส่ง upgrade http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } } ``` --- ## WebSocket Server Block ```nginx server { listen 80; server_name ws.example.com; location / { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; # WebSocket headers proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; # Timeout ยาวพอสำหรับ long-lived proxy_read_timeout 3600s; proxy_send_timeout 3600s; } } ``` --- ## 9.5.5 Backend: Node.js ```nginx upstream nodejs_app { server 127.0.0.1:3000; keepalive 32; # ใช้ connection ซ้ำ } server { listen 80; server_name app.example.com; # Static asset (เร็วกว่าผ่าน Node) location /static/ { alias /var/www/app/dist/static/; expires 30d; } location / { proxy_pass http://nodejs_app; proxy_http_version 1.1; proxy_set_header Connection ""; proxy_set_header Host $host; } } ``` --- ## Backend: Python (Gunicorn) ```nginx upstream django_app { # Unix socket เร็วกว่า TCP สำหรับ same-host server unix:/run/gunicorn/django.sock fail_timeout=0; } server { listen 80; server_name django.example.com; client_max_body_size 50M; location /static/ { alias /var/www/django/static/; expires 7d; } location / { proxy_pass http://django_app; proxy_set_header X-Forwarded-Proto $scheme; } } ``` --- ## Backend: PHP-FPM ```nginx server { listen 80; server_name php.example.com; root /var/www/php-app; index index.php index.html; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php8.2-fpm.sock; } location ~ /\.(ht|env) { deny all; } } ``` --- ## 9.5.6 Buffering และ Timeout **Proxy Buffering** — Nginx อ่าน response จาก backend จนเสร็จก่อนส่งให้ client ```nginx location / { proxy_pass http://backend; # Buffering proxy_buffering on; proxy_buffer_size 4k; proxy_buffers 8 16k; proxy_busy_buffers_size 32k; # Timeout proxy_connect_timeout 5s; proxy_send_timeout 60s; proxy_read_timeout 60s; } ``` --- # 9.6 Load Balancing ด้วย Nginx --- ## Load Balancing คืออะไร การกระจาย request ไปยัง Backend หลายตัวเพื่อ: 1. **Scalability** — รองรับโหลดที่สูงขึ้น 2. **High Availability** — เพิ่มความพร้อมใช้งาน 3. **No SPoF** — ลด Single Point of Failure --- ## 9.6.1 upstream block ```nginx http { upstream app_backend { server 192.168.1.10:8080; server 192.168.1.11:8080; server 192.168.1.12:8080; } server { listen 80; server_name app.example.com; location / { proxy_pass http://app_backend; proxy_set_header Host $host; } } } ``` --- ## 9.6.2 Algorithm: Round Robin **Round Robin (Default)** — กระจาย request ตามลำดับ ```nginx upstream backend { server 10.0.0.1:8080; server 10.0.0.2:8080; server 10.0.0.3:8080; } ``` --- ## Weighted Round Robin ให้น้ำหนักต่างกันตามสเปคเครื่อง ```nginx upstream backend { server 10.0.0.1:8080 weight=3; # 3 ใน 6 request server 10.0.0.2:8080 weight=2; # 2 ใน 6 request server 10.0.0.3:8080 weight=1; # 1 ใน 6 request } ``` --- ## Least Connection ส่งไปยัง Backend ที่มี active connection น้อยที่สุด ```nginx upstream backend { least_conn; server 10.0.0.1:8080; server 10.0.0.2:8080; server 10.0.0.3:8080; } ``` --- ## IP Hash แต่ละ IP ของ client → map ไป backend ตัวเดิมเสมอ (Sticky Session แบบง่าย) ```nginx upstream backend { ip_hash; server 10.0.0.1:8080; server 10.0.0.2:8080; } ``` --- ## Hash และ Random ```nginx # Hash by URI (consistent hashing) upstream backend { hash $request_uri consistent; server 10.0.0.1:8080; server 10.0.0.2:8080; } # Random — สุ่มเลือก backend upstream backend { random two least_conn; # สุ่ม 2 แล้วเลือก conn น้อยกว่า server 10.0.0.1:8080; server 10.0.0.2:8080; server 10.0.0.3:8080; } ``` --- ## สูตร Weighted Round Robin เมื่อกำหนดน้ำหนัก <math xmlns="http://www.w3.org/1998/Math/MathML"><msub><mi>w</mi><mn>1</mn></msub><mo>,</mo><msub><mi>w</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>w</mi><mi>n</mi></msub></math> สัดส่วน Backend ตัวที่ <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>i</mi></math> ได้รับ request: <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <msub><mi>P</mi><mi>i</mi></msub> <mo>=</mo> <mfrac> <msub><mi>w</mi><mi>i</mi></msub> <mrow><munderover><mo>∑</mo><mrow><mi>j</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msub><mi>w</mi><mi>j</mi></msub></mrow> </mfrac> </math> โดย: - <math xmlns="http://www.w3.org/1998/Math/MathML"><msub><mi>P</mi><mi>i</mi></msub></math> = สัดส่วน request ที่ Backend ตัวที่ <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>i</mi></math> ได้รับ - <math xmlns="http://www.w3.org/1998/Math/MathML"><msub><mi>w</mi><mi>i</mi></msub></math> = น้ำหนักของ Backend ตัวที่ <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>i</mi></math> - <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>n</mi></math> = จำนวน Backend ทั้งหมด ตัวอย่าง: weight = 3, 2, 1 ⇒ <math xmlns="http://www.w3.org/1998/Math/MathML"><msub><mi>P</mi><mn>1</mn></msub><mo>=</mo><mn>50</mn><mo>%</mo></math>, <math xmlns="http://www.w3.org/1998/Math/MathML"><msub><mi>P</mi><mn>2</mn></msub><mo>≈</mo><mn>33</mn><mo>%</mo></math>, <math xmlns="http://www.w3.org/1998/Math/MathML"><msub><mi>P</mi><mn>3</mn></msub><mo>≈</mo><mn>17</mn><mo>%</mo></math> --- ## 9.6.3 Health Check **Passive Health Check** (OSS) — ตรวจสุขภาพจาก request จริง ```nginx upstream backend { # fail 3 ครั้งใน 30s → mark unavailable 30s server 10.0.0.1:8080 max_fails=3 fail_timeout=30s; server 10.0.0.2:8080 max_fails=3 fail_timeout=30s; server 10.0.0.3:8080 max_fails=3 fail_timeout=30s; } ``` **Active Health Check** — ส่ง request ตรวจสุขภาพประจำ (เฉพาะ NGINX Plus หรือ `nginx_upstream_check_module`) --- ## 9.6.4 Sticky Session ```nginx # วิธี 1: ip_hash (OSS) — sticky ตาม IP upstream backend { ip_hash; server 10.0.0.1:8080; server 10.0.0.2:8080; } # วิธี 2: hash by cookie (OSS) upstream backend { hash $cookie_jsessionid consistent; server 10.0.0.1:8080; server 10.0.0.2:8080; } # วิธี 3: sticky cookie (NGINX Plus) # sticky cookie srv_id expires=1h; ``` --- ## 9.6.5 Backup Server และ Fail-over ```nginx upstream backend { server 10.0.0.1:8080; server 10.0.0.2:8080; server 10.0.0.99:8080 backup; # ใช้เมื่อ server หลักล่ม server 10.0.0.100:8080 down; # ปิดชั่วคราว (maintenance) } ``` --- # 9.7 SSL/TLS --- ## 9.7.1 แนวคิด PKI **PKI (Public Key Infrastructure)** ระบบที่ใช้บริหารกุญแจและใบรับรอง - **Certificate Authority (CA)** — ออกและรับรองใบรับรอง - **Registration Authority (RA)** — รับคำขอ ตรวจสอบตัวตน - **Certificate Repository** — ที่เก็บใบรับรอง - **CRL / OCSP** — รายการใบรับรองที่ถูกเพิกถอน --- ## TLS Handshake <pre class="mermaid"> %%{init: {'theme':'base','themeVariables':{ 'primaryColor':'#3c3836','primaryTextColor':'#ebdbb2','primaryBorderColor':'#fabd2f', 'lineColor':'#a89984','background':'#282828' }}}%% sequenceDiagram participant C as Client (Browser) participant S as Server (Nginx) participant CA as CA Note over CA: ออกใบรับรองให้ S ล่วงหน้า C->>S: ClientHello (TLS, ciphers) S->>C: ServerHello + Certificate C->>C: ตรวจลายเซ็นด้วย<br/>Public Key ของ CA C->>S: Key Exchange (ECDHE) S->>C: Key Exchange Note over C,S: คำนวณ Session Key C->>S: Finished (encrypted) S->>C: Finished (encrypted) Note over C,S: 🔒 Encrypted </pre> --- ## 9.7.2 ส่วนประกอบ TLS Certificate - **Private Key** — กุญแจส่วนตัว เก็บที่ Server เท่านั้น - **Public Key** — กุญแจสาธารณะ ฝังใน certificate - **CSR (Certificate Signing Request)** — สร้างจาก private key + ข้อมูลโดเมน ส่งให้ CA - **Certificate** — ใบรับรองที่ CA เซ็นแล้ว - **Certificate Chain** — Server cert → Intermediate CA → Root CA --- ## สร้าง Private Key และ CSR ```bash # Private Key (RSA 4096 bit) openssl genrsa -out example.com.key 4096 # หรือ ECDSA (เร็วกว่า RSA) openssl ecparam -name prime256v1 -genkey -noout -out example.com.key # สร้าง CSR openssl req -new -key example.com.key -out example.com.csr \ -subj "/C=TH/ST=Songkhla/O=RMUTSV/CN=example.com" # Self-signed Cert (dev/test) openssl req -x509 -new -key example.com.key -out example.com.crt -days 365 \ -subj "/C=TH/ST=Songkhla/O=RMUTSV/CN=example.com" ``` --- ## 9.7.3 Let's Encrypt และ Certbot **Let's Encrypt** — CA ที่ออกใบรับรอง **ฟรี** และอัตโนมัติผ่าน ACME Protocol ```bash # ติดตั้ง Certbot sudo apt install -y certbot python3-certbot-nginx # ขอ cert และตั้งค่า Nginx อัตโนมัติ sudo certbot --nginx -d example.com -d www.example.com # ทดสอบการต่ออายุ sudo certbot renew --dry-run # Certbot ติดตั้ง systemd timer ให้แล้ว sudo systemctl status certbot.timer ``` --- ## ที่อยู่ของ Certbot Certificate ``` /etc/letsencrypt/live/example.com/ ├── cert.pem # certificate เฉพาะ ├── chain.pem # intermediate chain ├── fullchain.pem # cert.pem + chain.pem └── privkey.pem # private key ``` ใน Nginx ใช้ `fullchain.pem` กับ `privkey.pem` --- ## 9.7.4 acme.sh และ DNS Challenge **acme.sh** — shell script ที่ implement ACME รองรับ **DNS-01 Challenge** สำหรับ wildcard ```bash # ติดตั้ง acme.sh curl https://get.acme.sh | sh # ขอ cert ผ่าน DNS challenge (Cloudflare) export CF_Token="your_cloudflare_api_token" ~/.acme.sh/acme.sh --issue --dns dns_cf \ -d example.com -d '*.example.com' # ติดตั้ง cert ลงใน nginx ~/.acme.sh/acme.sh --install-cert -d example.com \ --key-file /etc/nginx/ssl/example.com.key \ --fullchain-file /etc/nginx/ssl/example.com.crt \ --reloadcmd "systemctl reload nginx" ``` --- ## 9.7.5 HTTP to HTTPS Redirect ```nginx # HTTP — redirect ไป HTTPS server { listen 80; listen [::]:80; server_name example.com www.example.com; return 301 https://$host$request_uri; } # HTTPS Server server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name example.com www.example.com; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; root /var/www/example.com; } ``` --- ## 9.7.6 HSTS **HSTS (HTTP Strict Transport Security)** — บอก Browser ให้ใช้ HTTPS เท่านั้น ป้องกัน Downgrade Attack ```nginx # เพิ่มใน server block ของ HTTPS add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always; # max-age=63072000 = 2 ปี ``` --- ## OCSP Stapling Nginx ดึงข้อมูลการเพิกถอนจาก CA ล่วงหน้า แล้ว "staple" ใน TLS handshake — ลด round-trip ```nginx ssl_stapling on; ssl_stapling_verify on; ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem; resolver 1.1.1.1 8.8.8.8 valid=300s; resolver_timeout 5s; ``` --- ## 9.7.7 TLS Hardening Configuration ที่แนะนำสำหรับ TLS modern (Mozilla Intermediate) ```nginx # /etc/nginx/snippets/ssl-params.conf ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers off; ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:... # Session ssl_session_timeout 1d; ssl_session_cache shared:SSL:50m; ssl_session_tickets off; # DH parameter # openssl dhparam -out /etc/nginx/dhparam.pem 4096 ssl_dhparam /etc/nginx/dhparam.pem; ``` --- ## 9.7.8 Wildcard และ SAN Certificate - **Wildcard Certificate** — `*.example.com` (ระดับเดียว) - **SAN Certificate** — ครอบคลุมหลายโดเมนใน cert เดียว ```nginx server { listen 443 ssl http2; server_name example.com *.example.com api.example.org; ssl_certificate /etc/nginx/ssl/multi-domain.crt; ssl_certificate_key /etc/nginx/ssl/multi-domain.key; } ``` --- # 9.8 Caching และ Compression --- ## 9.8.1 proxy_cache Nginx เก็บ response จาก backend ไว้ใน disk/memory ลดภาระ backend ```nginx http { proxy_cache_path /var/cache/nginx/api levels=1:2 keys_zone=api_cache:10m max_size=1g inactive=60m use_temp_path=off; } ``` --- ## ใช้งาน proxy_cache ```nginx location / { proxy_pass http://backend; proxy_cache api_cache; proxy_cache_key "$scheme$request_method$host$request_uri"; # cache เฉพาะ status code proxy_cache_valid 200 302 10m; proxy_cache_valid 404 1m; # cache lock — ป้องกัน thundering herd proxy_cache_lock on; proxy_cache_lock_timeout 5s; add_header X-Cache-Status $upstream_cache_status; } ``` --- ## proxy_cache_use_stale ใช้ cache เก่าเมื่อ backend ล่ม ```nginx proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504; # bypass cache ตามเงื่อนไข proxy_cache_bypass $http_pragma $http_authorization; proxy_no_cache $http_authorization; ``` --- ## $upstream_cache_status | ค่า | ความหมาย | | --- | --- | | `MISS` | ไม่มีใน cache → ดึงจาก backend | | `HIT` | พบใน cache → ส่งให้ client | | `EXPIRED` | มีแต่หมดอายุ → ดึงใหม่ | | `STALE` | ใช้ของเก่าเพราะ backend error | | `UPDATING` | มีของเก่ากำลังอัพเดต | | `BYPASS` | ตรงเงื่อนไข `proxy_cache_bypass` | --- ## 9.8.2 Browser Cache ```nginx # Static asset — cache นาน + immutable location ~* \.(jpg|png|css|js|woff2)$ { expires 30d; add_header Cache-Control "public, immutable, max-age=2592000"; access_log off; } # HTML — ตรวจสอบใหม่ location ~* \.html$ { expires -1; add_header Cache-Control "no-cache, must-revalidate"; } # API — ห้าม cache location /api/ { proxy_pass http://backend; add_header Cache-Control "no-store"; } ``` --- ## 9.8.3 gzip Compression รองรับใน Nginx ทุกเวอร์ชัน ```nginx http { gzip on; gzip_vary on; # เพิ่ม Vary: Accept-Encoding gzip_min_length 1024; # ไม่บีบไฟล์ <1KB gzip_proxied any; gzip_comp_level 6; # 1-9 (สูง=ดีแต่ใช้ CPU มาก) gzip_types text/plain text/css text/xml application/json application/javascript application/xml image/svg+xml font/ttf font/otf; gzip_disable "msie6"; } ``` --- ## brotli Compression บีบอัดดีกว่า gzip 15-20% แต่ต้องติดตั้ง module เพิ่ม (`ngx_brotli`) ```nginx brotli on; brotli_comp_level 6; brotli_static on; # เสิร์ฟไฟล์ .br ที่บีบล่วงหน้า brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml; ``` --- ## 9.8.4 FastCGI Cache คล้าย proxy_cache แต่สำหรับ PHP-FPM ```nginx http { fastcgi_cache_path /var/cache/nginx/fcgi levels=1:2 keys_zone=php_cache:10m max_size=500m inactive=60m; server { location ~ \.php$ { fastcgi_pass unix:/run/php/php8.2-fpm.sock; fastcgi_cache php_cache; fastcgi_cache_key "$scheme$request_method$host$request_uri"; fastcgi_cache_valid 200 5m; add_header X-FastCGI-Cache $upstream_cache_status; } } } ``` --- # 9.9 Caddy Web Server --- ## Caddy คืออะไร **Caddy** เป็น Web Server ที่เขียนด้วย Go - มี **Automatic HTTPS** เป็น default - เพียงระบุโดเมน → Caddy ขอ cert จาก Let's Encrypt อัตโนมัติ --- ## 9.9.1 ปรัชญาของ Caddy แนวคิดหลักของ Caddy: 1. **HTTPS ต้องเป็นค่า default** — ไม่ใช่ option 2. **Configuration ต้องเรียบง่าย** — Caddyfile อ่านง่ายกว่า nginx.conf 3. **Cross-platform** — single binary ไม่มี dependency 4. **Modular** — ขยายได้ผ่าน plugin (xcaddy) 5. **API-driven** — config ผ่าน JSON API ได้ --- ## 9.9.2 ติดตั้ง Caddy บน Debian/Ubuntu ```bash # ติดตั้ง dependency sudo apt install -y debian-keyring debian-archive-keyring \ apt-transport-https curl # เพิ่ม GPG key และ repository curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' \ | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' \ | sudo tee /etc/apt/sources.list.d/caddy-stable.list # ติดตั้ง sudo apt update && sudo apt install -y caddy ``` --- ## ติดตั้ง Caddy บน Arch / Docker ```bash # Arch Linux sudo pacman -S caddy sudo systemctl enable --now caddy ``` **ผ่าน Docker:** ```bash docker run -d --name caddy \ -p 80:80 -p 443:443 -p 443:443/udp \ -v $PWD/Caddyfile:/etc/caddy/Caddyfile \ -v caddy_data:/data \ -v caddy_config:/config \ caddy:latest ``` --- ## 9.9.3 Caddyfile Syntax ```caddyfile # /etc/caddy/Caddyfile # Static site — Caddy ขอ HTTPS อัตโนมัติ! example.com { root * /var/www/example.com file_server } # Reverse proxy api.example.com { reverse_proxy localhost:3000 } # Multiple hosts blog.example.com, www.blog.example.com { root * /var/www/blog encode gzip zstd file_server try_files {path} {path}/ /index.html } ``` --- ## Caddy vs Nginx | คุณสมบัติ | Nginx | Caddy | | --- | --- | --- | | HTTPS | ต้องตั้งค่า + Certbot | **อัตโนมัติ** | | Config size | ~20-30 บรรทัด | **~5 บรรทัด** | | Reload | `nginx -s reload` | `caddy reload` | | HTTP/3 | ต้อง compile เพิ่ม | **built-in** | Caddyfile สั้นและอ่านง่ายกว่ามาก --- ## 9.9.4 File Server ```caddyfile example.com { root * /srv/www encode gzip zstd # SPA routing try_files {path} /index.html file_server { hide .git index index.html index.htm browse # เปิดดู directory listing } # Custom error handle_errors { rewrite * /errors/{err.status_code}.html file_server } } ``` --- ## 9.9.5 Reverse Proxy ```caddyfile # Reverse proxy พื้นฐาน api.example.com { reverse_proxy localhost:8080 } # Load balancing app.example.com { reverse_proxy { to 10.0.0.1:8080 10.0.0.2:8080 10.0.0.3:8080 lb_policy least_conn health_uri /health health_interval 10s health_timeout 5s } } ``` --- ## Reverse Proxy พร้อม Path Routing ```caddyfile example.com { handle /api/* { uri strip_prefix /api reverse_proxy localhost:3000 } handle /admin/* { reverse_proxy localhost:4000 } handle { root * /var/www/example.com file_server } } # WebSocket — Caddy รองรับอัตโนมัติ ไม่ต้องตั้งค่าเพิ่ม ws.example.com { reverse_proxy localhost:8765 } ``` --- ## 9.9.6 Automatic Let's Encrypt Caddy ขอ certificate อัตโนมัติเมื่อ: 1. ระบุโดเมนใน Caddyfile (ไม่ใช่ IP / localhost) 2. โดเมนนั้น resolve มาที่ Server ได้ 3. Port 80 และ 443 เปิดให้ Caddy ใช้งาน ```caddyfile # ระบุ email สำหรับ Let's Encrypt { email admin@example.com # acme_ca https://acme-staging-v02.api.letsencrypt.org/directory } example.com { file_server } ``` --- ## Wildcard ด้วย DNS Challenge ```caddyfile *.example.com { tls { dns cloudflare {env.CF_API_TOKEN} } reverse_proxy localhost:8080 } ``` ต้องใช้ Caddy ที่ build รวม DNS provider plugin --- ## 9.9.7 Caddy Module และ Plugin **xcaddy** เป็นเครื่องมือ build Caddy พร้อม plugin ```bash # ติดตั้ง xcaddy go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest # Build Caddy พร้อม plugin xcaddy build \ --with github.com/caddy-dns/cloudflare \ --with github.com/greenpau/caddy-security # แทนที่ binary sudo cp ./caddy /usr/bin/caddy sudo systemctl restart caddy ``` --- ## 9.9.8 JSON Config API **Admin API** ฟัง localhost:2019 ปรับ config real-time ผ่าน HTTP ```bash # ดู config ปัจจุบัน curl localhost:2019/config/ | jq # โหลด config ใหม่จากไฟล์ JSON curl -X POST localhost:2019/load \ -H "Content-Type: application/json" \ -d @config.json # ดู metric curl localhost:2019/metrics ``` --- ## ตัวอย่าง config.json ```json { "apps": { "http": { "servers": { "example": { "listen": [":443"], "routes": [{ "match": [{"host": ["example.com"]}], "handle": [{ "handler": "reverse_proxy", "upstreams": [{"dial": "localhost:3000"}] }] }] } } } } } ``` --- # 9.10 Nginx vs Caddy vs อื่น ๆ --- ## 9.10.1 Apache HTTP Server **Apache HTTPD** — Web Server เก่าแก่ตั้งแต่ปี 1995 **จุดเด่น:** - รองรับ `.htaccess` แก้ config ได้โดยไม่ต้องแก้ไฟล์หลัก - Module ครอบคลุม (mod_rewrite, mod_security, mod_php) - เอกสารและ tutorial เยอะมาก **จุดด้อยเทียบ Nginx:** - ใช้ Process/Thread per connection — รองรับ concurrent น้อยกว่า - Configuration ซับซ้อนกว่า --- ## 9.10.2 HAProxy **HAProxy** — Load Balancer ที่ออกแบบเฉพาะ ไม่ใช่ Web Server เต็มตัว **จุดเด่น:** - ประสิทธิภาพสูงสุดในด้าน Load Balancing - รองรับทั้ง **L4 (TCP)** และ **L7 (HTTP)** - Health check แม่นยำ - มี stats page ในตัว --- ## 9.10.3 Traefik **Traefik** — Reverse Proxy ที่ออกแบบเพื่อ container/cloud-native **จุดเด่น:** - **Service Discovery อัตโนมัติ** — อ่าน label จาก Docker, K8s, Consul - HTTPS อัตโนมัติเช่นเดียวกับ Caddy - Dashboard built-in --- ## ตัวอย่าง Traefik กับ Docker ```yaml services: traefik: image: traefik:v3.0 command: - "--providers.docker=true" - "--entrypoints.web.address=:80" - "--entrypoints.websecure.address=:443" - "--certificatesresolvers.le.acme.tlschallenge=true" ports: - "80:80" - "443:443" app: image: nginx labels: - "traefik.enable=true" - "traefik.http.routers.app.rule=Host(`example.com`)" - "traefik.http.routers.app.tls.certresolver=le" ``` --- ## 9.10.4 Envoy และ Pingora **Envoy** - Proxy พัฒนาโดย Lyft - CNCF graduated project - นิยมใน Service Mesh (Istio, Consul Connect) **Pingora** - Library สำหรับสร้าง Proxy - เขียนด้วย Rust - พัฒนาโดย Cloudflare ทดแทน Nginx ภายในระบบ --- ## 9.10.5 เปรียบเทียบ Web Server | คุณสมบัติ | Nginx | Caddy | Apache | HAProxy | Traefik | | --- | --- | --- | --- | --- | --- | | ภาษา | C | Go | C | C | Go | | Performance | สูงมาก | สูง | กลาง | สูงสุด | สูง | | Memory | ต่ำ | กลาง | สูง | ต่ำมาก | กลาง | | HTTPS อัตโนมัติ | ❌ | ✅ | ❌ | ❌ | ✅ | | HTTP/3 | บางส่วน | ✅ | ❌ | ✅ | ✅ | | Service Discovery | ❌ | ❌ | ❌ | ❌ | ✅ | --- ## คำแนะนำในการเลือก - **เว็บไซต์ production traffic สูง** → **Nginx** - **เว็บส่วนตัว / homelab / dev** → **Caddy** (HTTPS อัตโนมัติ) - **Shared hosting / WordPress** → **Apache** + .htaccess - **Load Balancer enterprise** → **HAProxy** - **Microservice / Kubernetes** → **Traefik** หรือ Envoy --- # 9.11 Security และ Hardening --- ## 9.11.1 Rate Limiting ป้องกัน abuse และ brute force ด้วย Token Bucket / Leaky Bucket ```nginx http { # 1m = 1MB ≈ 16,000 IP # 10r/s = 10 req/s limit_req_zone $binary_remote_addr zone=general:10m rate=10r/s; limit_req_zone $binary_remote_addr zone=login:10m rate=1r/s; limit_req_zone $binary_remote_addr zone=api:10m rate=20r/s; # Connection limit limit_conn_zone $binary_remote_addr zone=conn_per_ip:10m; } ``` --- ## ใช้ Rate Limit ```nginx server { listen 80; server_name example.com; # ทั่วไป (burst 20, ไม่ delay) limit_req zone=general burst=20 nodelay; limit_conn conn_per_ip 10; # Login endpoint — เข้ม location /login { limit_req zone=login burst=5 nodelay; proxy_pass http://backend; } # API location /api/ { limit_req zone=api burst=50; proxy_pass http://backend; } } ``` --- ## สูตร Token Bucket <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mi>tokens</mi> <mo>(</mo> <mi>t</mi> <mo>)</mo> <mo>=</mo> <mi>min</mi> <mo>(</mo> <mi>capacity</mi> <mo>,</mo> <mspace width="0.2em" /> <mi>tokens</mi> <mo>(</mo> <mi>t</mi> <mo>−</mo> <mn>1</mn> <mo>)</mo> <mo>+</mo> <mi>rate</mi> <mo>×</mo> <mo>Δ</mo> <mi>t</mi> <mo>)</mo> </math> โดย: - <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>tokens</mi><mo>(</mo><mi>t</mi><mo>)</mo></math> = จำนวน token ใน bucket ที่เวลา <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>t</mi></math> - <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>capacity</mi></math> = จำนวน token สูงสุด (burst) - <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>rate</mi></math> = อัตราการเติม (req/s) - <math xmlns="http://www.w3.org/1998/Math/MathML"><mo>Δ</mo><mi>t</mi></math> = ระยะเวลาตั้งแต่ token ถูกใช้ครั้งล่าสุด แต่ละ request ใช้ 1 token ถ้า token ไม่พอ → ตอบ `503 Service Unavailable` --- ## 9.11.2 Web Application Firewall **ModSecurity** — WAF เก่าแก่ที่สุด รองรับ OWASP CRS ```bash # ติดตั้ง ModSecurity-nginx connector sudo apt install -y libnginx-mod-http-modsecurity # ดาวน์โหลด OWASP CRS sudo git clone https://github.com/coreruleset/coreruleset \ /etc/nginx/modsec/crs cd /etc/nginx/modsec/crs sudo cp crs-setup.conf.example crs-setup.conf ``` **Coraza** — WAF เขียนด้วย Go เข้ากันได้กับ ModSecurity rules ใช้กับ Caddy/Envoy ได้ --- ## ใช้ ModSecurity ใน Nginx ```nginx # /etc/nginx/nginx.conf load_module modules/ngx_http_modsecurity_module.so; server { listen 80; server_name example.com; modsecurity on; modsecurity_rules_file /etc/nginx/modsec/main.conf; location / { proxy_pass http://backend; } } ``` --- ## 9.11.3 DDoS Mitigation เบื้องต้น ```nginx http { # Slow connection attack mitigation client_body_timeout 10s; client_header_timeout 10s; keepalive_timeout 30s; send_timeout 10s; # จำกัดขนาด request client_max_body_size 10M; client_body_buffer_size 16k; client_header_buffer_size 1k; large_client_header_buffers 4 8k; } ``` > Layer 3/4 DDoS ต้องอาศัย Cloudflare, AWS Shield > Nginx ป้องกันได้แค่ Layer 7 --- ## บล็อก Method และ Bot ```nginx server { # จำกัด method if ($request_method !~ ^(GET|HEAD|POST|PUT|DELETE|PATCH|OPTIONS)$) { return 405; } # Block bot ชั่ว ๆ if ($http_user_agent ~* (Scrapy|Wget|curl/)) { return 403; } } ``` --- ## 9.11.4 Hide Server Version ```nginx http { # ซ่อนเวอร์ชัน Nginx ใน Server header server_tokens off; # ซ่อน header เพิ่มเติม (ต้องใช้ headers-more module) # more_clear_headers Server; # more_set_headers "Server: SecretServer"; } ``` --- ## 9.11.5 Security Headers ป้องกัน attack ที่พบบ่อย ```nginx # /etc/nginx/snippets/security-headers.conf # ป้องกัน Clickjacking add_header X-Frame-Options "SAMEORIGIN" always; # ห้าม browser เดา MIME add_header X-Content-Type-Options "nosniff" always; # XSS Protection add_header X-XSS-Protection "1; mode=block" always; # ควบคุม Referer add_header Referrer-Policy "strict-origin-when-cross-origin" always; # ปิดความสามารถที่ไม่จำเป็น add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always; ``` --- ## Content Security Policy ป้องกัน XSS และ Data Injection ```nginx add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'self';" always; ``` --- ## HSTS และ Cross-Origin ```nginx # HSTS (เฉพาะ HTTPS) add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always; # Cross-Origin policies (ป้องกัน Spectre) add_header Cross-Origin-Opener-Policy "same-origin" always; add_header Cross-Origin-Embedder-Policy "require-corp" always; add_header Cross-Origin-Resource-Policy "same-origin" always; ``` --- ## ใช้งาน Security Headers ```nginx server { listen 443 ssl http2; server_name example.com; include snippets/ssl-params.conf; include snippets/security-headers.conf; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; root /var/www/example.com; index index.html; } ``` --- ## ทดสอบ Security Headers ใช้บริการต่อไปนี้ทดสอบ: - **Mozilla Observatory** — observatory.mozilla.org - **Security Headers** — securityheaders.com - **SSL Labs** — ssllabs.com/ssltest --- # บทสรุปบทเรียน --- ## สรุปเนื้อหา บทเรียนนี้ครอบคลุม **Nginx** และ **Caddy** ในฐานะ Web Server และ Reverse Proxy - แนวคิดของ HTTP/HTTPS - การติดตั้งและตั้งค่า Nginx - Virtual Host - Reverse Proxy - Load Balancing - SSL/TLS ด้วย Let's Encrypt - Caching และ Compression - Security Hardening --- ## ข้อแนะนำ (1/2) 1. ใช้ **Nginx** สำหรับ traffic สูงและต้องการปรับแต่งเชิงลึก 2. ใช้ **Caddy** เมื่อต้องการตั้งค่ารวดเร็วและ HTTPS อัตโนมัติ 3. **ทดสอบ config เสมอ** ด้วย `nginx -t` หรือ `caddy validate` ก่อน reload 4. **เปิด HTTPS เป็น default** ทุกเว็บไซต์ (Let's Encrypt ฟรี) --- ## ข้อแนะนำ (2/2) 5. **ตั้ง Security Header** ทุก response เพื่อป้องกัน attack 6. **ทำ Rate Limiting** สำหรับ endpoint เสี่ยง (login, API) 7. **Monitor log** อย่างสม่ำเสมอเพื่อจับ pattern ผิดปกติ --- # คําถาม - ข้อสงสัย <img src="/revealjs/pics/os.png" width="55%" />