標籤「Web」的 4 篇文章

我把這個部落格的行動版 PageSpeed Insights 分數改善到 Performance 99、Accessibility 100、Best Practices 100、SEO 100。從 SEO、效能、可及性 三個面向整理我做過的改動。

想要在這個部落格加入留言功能，因此在 AWS 無伺服器架構下自建了一個 API。介紹其設計與實作。

架構​

請求以以下流程處理。

瀏覽器 (www.hikari-dev.com)
  ↓ HTTPS
API Gateway
  ├── GET  /comment?postId=...    → 取得留言
  ├── POST /comment               → 發表留言
  └── PATCH /comment/{id}         → 管理（切換隱藏）
  ↓
Lambda (Node.js 20 / arm64)
  ↓
DynamoDB（儲存留言）
  + SES v2（通知管理者）

程式碼以 TypeScript 撰寫，並以 SAM（Serverless Application Model）管理基礎設施即程式碼（IaC）。Lambda 採用 arm64（Graviton2）以稍微節省成本。

DynamoDB 的資料表設計​

資料表名稱為 blog-comments，分區鍵為 postId，排序鍵為 commentId。

因為在排序鍵使用 ULID，使用 QueryCommand 取得的留言會自動按發表順序排列。這也是為什麼沒有使用 UUID 的原因。

垃圾留言過濾​

在將留言寫入 DynamoDB 之前，會與 keywords.json 中定義的關鍵字比對。

若命中關鍵字，會以 isHidden: true 自動隱藏，並附加 isFlagged: "1"。若未命中則立即公開。

isFlagged 作為稀疏 GSI（Sparse GSI）的鍵使用。未命中的留言不會帶入此屬性，因此不會在 GSI 中增加多餘的分區，對成本與效能都有利。只要在 DynamoDB Document Client 設定 removeUndefinedValues: true 就能達成。

通知管理者的郵件​

每次有留言發表時，會用 SES v2 發信通知自己。郵件內容包含發言者名稱、內容、評分、IP 位址以及是否被標記（flag）等資訊。

郵件發送採非同步進行，即使發送失敗也會忽略錯誤（不影響使用者流程）。這是為了避免影響留言發表的回應速度。

隱私考量​

雖然會在 DynamoDB 中儲存 IP 位址與 User-Agent，但不會把它們包含在 GET 端點的回應中。我們在型別定義層就進行分離。

安全性​

管理端點（PATCH /comment/{id}）只要在 SAM 模板設定 ApiKeyRequired: true 即可啟用 API 金鑰認證。無需自行實作 Lambda Authorizer，較為簡單。

總結​

採用無伺服器架構後不需管理伺服器，DynamoDB 的按需付費讓流量低的個人部落格也能把成本降到最低。

程式碼以 SAM + TypeScript + esbuild 打包，僅需執行 sam build && sam deploy 即可部署。

Ubuntu 22.04 似乎預設安裝了 snap 版本的 Firefox，在某些環境下無法啟動，因此記錄如何安裝預先建置的 Firefox。

移除 apt / snap 版本的 Firefox​

sudo apt purge firefox
sudo snap remove firefox

安裝 Firefox 建置版本​

# 下載
wget "https://download.mozilla.org/?product=firefox-latest-ssl&os=linux64&lang=ja" --trust-server-names

# 解壓縮
tar xvf firefox-*.tar.bz2

# 安裝
sudo cp -r firefox /usr/lib

# 建立執行檔的符號連結
sudo ln -s /usr/lib/firefox/firefox /usr/bin/firefox

# 下載並放置桌面捷徑檔案
sudo mkdir -p /usr/share/applications
sudo wget https://bit.ly/3Mwigwx -O /usr/share/applications/firefox.desktop

1. 建立圖示。

   

2. 準備七張尺寸分別為 16、24、32、48、64、128 和 256 的 PNG 圖片。

3. 使用 convert 指令建立圖示。

convert *.png favicon.ico