Dev：前端技術與學習筆記第 7 頁

程式碼之外，還有生活的藝術前端工程師 / 攝影 / 生活紀錄

文章334
標籤474

標籤查看更多

分類查看更多

Advanced Web Dev Quiz (27)
Deep JavaScript Foundations v3 (69)
Full Stack Fundamentals (47)
JavaScript Hard Parts v3 (50)
JS地下城 (5)
Testing Fundamentals (27)
TypeScript Fundamentals (28)
Web Performance Fundamentals (41)
You Might Not Need a Framework (32)
學習經歷 (2)
生活亂談 (2)
程式筆記 (4)

Dev

前端技術、踩坑紀錄與學習筆記

332 篇

2026-08-2610 分鐘閱讀

在 Nginx 開啟 HTTP/2：一個關鍵字換來 Multiplexing，用 Network 面板驗證協定

解釋 HTTP/1.1 每個檔案獨立開連線、HTTP/2 用 multiplexing 共用單一連線的差異，示範在 Nginx 的 443 埠 listen 區塊加上 http2 關鍵字即可啟用，並用瀏覽器 Network 面板的 Protocol 欄位驗證連線從 h1 換成 h2，附上重啟前的驗證指令。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #HTTP2 #Nginx #Multiplexing #NetworkInspector

2026-08-2513 分鐘閱讀

用 Certbot 免費幫網站裝上 HTTPS：snap 安裝、自動改寫 Nginx 設定、開放 443 埠

示範用 EFF 提供的免費工具 Certbot，透過 snap 套件管理器安裝，自動改寫 Nginx 虛擬伺服器設定加上 443 埠與憑證、把 HTTP 導向 HTTPS，並解釋 Certbot 為什麼要建立臨時檔案驗證網域所有權，最後用 ufw 開放 443 埠、測試自動更新，完成整個 HTTPS 部署流程。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #HTTPS #Certbot #Nginx #SSL #UFW #CertificateAuthority #Snap #PEM

2026-08-2516 分鐘閱讀

HTTP 請求與回應結構完整拆解：常見標頭、狀態碼分類，以及為什麼一定要改用 HTTPS 加密連線傳輸

拆解一個 HTTP 請求跟回應實際長什麼樣子，整理 User-Agent、Accept-Encoding、Set-Cookie 等常見標頭的用途，說明狀態碼第一碼分類（1xx 到 5xx）怎麼幫助快速判斷問題出在客戶端還是伺服器端，並解釋為什麼未加密的連線容易被攔截竊聽，一定要改用 HTTPS 保護資料傳輸。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #HTTP #HTTPS #HTTPHeader #StatusCode #Encryption #ManInTheMiddleAttack

2026-08-2419 分鐘閱讀

SQLite 實作訪客紀錄：記憶體資料庫、建表、Prepared Statement、關閉連線的順序

用 SQLite 幫 WebSocket 伺服器寫一份訪客紀錄，示範為什麼 SQLite 比 MySQL 更適合小型專案，用記憶體資料庫、serialize 建表、db.run／db.each 讀寫資料，並拆解實際部署時撞到的三個真實錯誤：SQL 語法逗號、記憶體資料庫重建、關閉順序卡死的除錯過程。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #SQLite #Database #WebSocket #SQL #PreparedStatement #SIGINT #InMemoryDatabase #GracefulShutdown

2026-08-2414 分鐘閱讀

關聯式資料庫概觀：為什麼不能只把資料存成一個檔案，用資料表、主鍵、外鍵、JOIN 串接多張表查詢資料

解釋為什麼多台伺服器沒辦法共用同一個檔案儲存資料，資料庫如何同時解決檔案缺乏擴展性、缺乏結構強制力這兩個根本問題，比較關聯式資料庫與非關聯式資料庫在嚴謹度、查詢速度上的取捨，拆解關聯式資料庫的三大組成：表、欄位、記錄，並示範用主鍵、外鍵把多張表串接起來，用 SELECT 與 JOIN 寫出一個簡單的跨表查詢。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #Database #SQL #RelationalDatabase #PrimaryKey #ForeignKey #JOIN #NoSQL

2026-08-2315 分鐘閱讀

前端建立 WebSocket 連線：wss/ws 協定判斷、onmessage 接收訊息、部署到正式伺服器

在 index.html 補上前端的 WebSocket 連線程式碼，用 window.location.protocol 判斷該用 wss 還是 ws，串接 host 建立連線，用 onmessage 印出伺服器傳來的訊息，最後把成果部署到正式伺服器，用 pm2 換掉舊的伺服器並排查過程中遇到的錯誤。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #WebSocket #PM2 #Onmessage #Protocol #Deployment

2026-08-2315 分鐘閱讀

WebSocket 與 HTTP 連線方式的差異、Nginx 加 Upgrade 標頭、建立 Express 伺服器

WebSocket 跟 HTTP 在連線方式上的根本差異：一個是持久雙向連線，一個請求完就立刻關閉，示範在 Nginx 虛擬伺服器設定裡加上 Upgrade 與 Connection 標頭讓反向代理放行升級請求，並改用 Express 重新建立伺服器架構，為後續實作 WebSocket 連線做好準備。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #WebSocket #Nginx #Express #ProxyPass #UpgradeHeader #PersistentConnection

2026-08-2214 分鐘閱讀

建立子網域：新增 A 記錄、寫 Nginx 虛擬伺服器區塊指定 server_name，串接不同應用程式

示範子網域的實際用途（例如 Netflix 開發環境不會直接架在正式網域上），幫網域新增 blog 子網域的 A 記錄，寫一個新的 Nginx 虛擬伺服器區塊指定 server_name 與 proxy_pass，更新 nginx.conf 的 include 設定，讓同一網域串接多個獨立應用程式。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #Subdomain #Nginx #ARecord #ServerName #NginxConf #VirtualServer #ProxyPass

2026-08-2211 分鐘閱讀

Nginx 路徑重導向與 Gzip 壓縮：壓縮等級為什麼設 6 不設 9，圖片、音訊檔案為什麼壓不動

示範怎麼在 Nginx 虛擬伺服器設定裡加一條路徑重導向，並拆解 Gzip 壓縮的運作原理：把重複的位元序列改用更精簡的方式描述，解釋為什麼正式環境慣例把壓縮等級設在 6 而非最高的 9，釐清壓縮與雜湊的關鍵差異，並說明為什麼 PNG、JPEG、MP3 這類已經壓縮過的檔案再套用 Gzip 幾乎沒有效果。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #Nginx #Redirection #Gzip #Compression #Hashing

2026-08-2111 分鐘閱讀

find 找檔案位置、grep 找檔案內容：兩個指令搭配 sudo !! 快捷技巧，快速排查系統問題

拆解 find 的語法邏輯（去哪找、找什麼類型、名稱是什麼），實際搜尋 /var/log 底下的所有 log 檔，用 sudo !! 快速補上權限而不必重打整串指令，再理解 find 找檔案位置、grep 找檔案內容的分工，搭配 ps aux 與管線示範 grep 怎麼從一大坨程序清單裡精準揪出想找的那一個。

Full Stack Fundamentals

#frontendMasters #fullStackFundamentals #Find #Grep #Zgrep #Sudo #Ps #Pipe

1...4 5 6 7 8 9 10...34