網頁開發知識 | Web-Dev Blog
Intro Next.js by Vercel – The React Framework Next.js 是一個開源的 React 全端框架，後端基於 Node.js。它支援多種渲染方式 (Rendering)，包括伺服器端渲染 (SSR)、靜態站點生成 (SSG) 以及用於客戶端渲染 (CSR) 的 React 原生渲染模式。 安裝 Next.js Node.js 安裝指南 Next.js 需要依賴 Node.js，以下 Next.js 官網安裝指南會說明欲安裝版本對應的 Node.js 最低需求版本。 How to set up a new Next.js project […]
Intro References iT 邦幫忙::淺談渲染方式 CSR/SSR/SSG/ISR Client-side rendering (CSR) – MDN Static site generator (SSG) – MDN Server-side rendering (SSR) – MDN Next.js Rendering: Client-side Rendering (CSR) | Next.js -Rendering: Static Site Generation (SSG) | Next.js Rendering: Server-side Rendering (SSR) | […]
Intro Kubernetes – Wikipedia Kubernetes Documentation Kubernetes，簡稱 K8s，是一個開源平台，用來自動化部署、擴展以及管理容器化應用程式。最初由 Google 開發，現在由 Cloud Native Computing Foundation (CNCF) 維護，已經成為容器編排的業界標準。 隨著應用程式越來越複雜，手動管理容器變得非常麻煩。K8s 提供了一些強大的功能，讓運維和開發更輕鬆： 自動排程 (Scheduling)：智慧地把容器放到資源最優的節點上 自我修復 (Self-Healing)：當容器或節點出問題時，K8s 會自動重啟、重新排程或替換 動態擴展 (Scaling)：根據流量需求自動增減容器 服務發現 & 負載平衡 (Service Discovery & Load Balancing)：自動為容器提供穩定的存取點並分流流量 宣告式管理 (Declarative Configuration)：只要用 YAML/JSON 定義好「想要的狀態」，K8s 會自動幫你達成 Key […]
Intro Web application 部署方式整理 Methodologies 部署策略 Rolling Update 滾動升級 Performing a Rolling Update – Kubernetes 通常用於已 Container 化環境，配合如 Load Balancer 來逐步轉導流量到新的版本。 主要利用逐步引入新版本的 instance 方式 ，替換舊的 instance 並在完成後關閉。 Blue-Green 藍綠部署 部署前準備好一組新版本的環境，等於同時有兩個不同版本的相同環境。配合 Load Balancer 將所有流量一次轉導到新的環境，有問題時只需要 rollback 即可，缺點為維護期間需要兩組環境的成本。 Blue-green deployment Canary Deployment 金絲雀部署 […]
Intro DNS CAA (DNS憑證頒發機構授權) – Wikipedia RFC 6844 通過域名持有人指定其域名的白名單憑證頒發機構來實現的安全機制。 該政策透過一個新的域名系統資源記錄(Record)「CAA」來實現，Record範例如下： example.com. CAA 0 issue “ca.example.net” 設定 首先 DNS records 要能夠支援 CAA record 再來針對憑證機構產生及設定 CAA record 即可，以下範例以 Letss Encrypt 機構為例： example.com. CAA 0 issue “letsencrypt.org” CAA Record Helper – CAA資源記錄產生器 References […]
Client | Browser | Web Server | nginx | 原理 Intro HTTP/2 – Wikipedia HTTP 1.0 -> HTTP 1.1 -> HTTP 2.0 -> HTTP 3.0 (QUIC) – ByteByteGoHq 相較於 HTTP 1.1，主要解決 HOL (head-of-line) blocking 應用層問題，Frame 編碼改用 Huffman Coding，Header 另外採用 HPACK […]
Intro Mutual authentication – mTLS – Wikipedia Two-way SSL 即 Server 端也要求 Client 端提供 certificate 做驗證 圖片來源：web-service-principles – HTTP Client 端憑證 Client 端需配置憑證及對應 Private Key，用於在 CertificateRequest 階段提供終端憑證並生成簽章； Server 端需配置信任的 CA 列表（包括 intermediate 與 root CA），用於驗證 Client 提供的憑證鏈。 [Server] TLS/SSL憑證(Certificate)常用指令 – […]
Intro 雖然Nginx已經…如要架設Apache，可以使用Apache mod PHP去介接PHP(目前Apache不使用PHP-FPM)。 安裝 快速LAMP安裝檔 安裝Apache： $ sudo apt-get install apache2 安裝Apache mod PHP $ sudo apt-get install libapache2-mod-php PHP版本切換 Ubuntu Manpage: a2enmod, a2dismod Ubuntu系列使用Aapche指令工具a2dismod與a2enmod切換，省去修改零散設定檔。基本上版本支援已裝的libapache2-mod-php各版本： $ sudo a2dismod php7.0 $ sudo a2enmod php5.6 Apache MOD PHP 設定要至/etc/php/apache2/ Server執行使用者 Apache […]
Intro 非英文語系檔名下載要支援多瀏覽器需要特別處理一下。 目標是達到Google Chrome, FireFox, Edge, IE以及更多的瀏覽器皆能支援。 Content-Disposition – HTTP | MDN 解決方法 使用filename*並遵循RFC 5987編碼標準即可，格式範例： Content-Disposition: attachment; filename=%E4%B8%AD%E6%96%87.txt; filename*=UTF-8”%E4%B8%AD%E6%96%87.txt; PHP sample code: $filename = rawurlencode(‘中文檔名File測試’); header(“Content-Disposition: attachment; filename={$filename}{$extension}; filename*=UTF-8”{$filename}{$extension};”);
Intro Nginx限制訪問速率模組：Nginx http_limit_req 原理 使用leaky bucket原理(可以稱漏桶原理)，桶的概念如下： 桶中存放request (令牌的概念) 桶上方由Nginx照設定速率計算補充request 桶下方提供提取request，即一個Request會消耗掉桶中存放的一個request Nginx對於桶的特性如下： 單一IP對應使用一個桶 limit_req_zone中rate是以request數量回推時間做補充的，依照兩次領取的時差補充相應的量 limit_req中burst即定義桶的request最大存放量，在每個新IP(不在Zone中)進入時會拿到全滿request(burst量)的桶 重啟Nginx會清空Zone，意即所有桶的剩餘Quota記憶清除，重新以全滿計算 比照實際設定，limit_req_zone $binary_remote_addr zone=one:10m rate=6r/m;即每間隔10秒可以得到一個request補充量。以rate=100r/s速率來說明，即每0.01秒得一個request補充量，間距0.1秒計算得10個request補充量； 而limit_req zone=one burst=5 nodelay;則表示每個IP桶最大預存的request量為5，有用掉則需等待補充。 Nginx實際上實作leaky bucket補充的方式可能為Trigger回填間隔補充量方式，本篇僅為概念說明，不代表實際Nginx演算法 Reference Nginx下limit_req模块burst参数超详细解析