Bài này nói về DevOps frontend ở góc nhìn senior: artifact bất biến, môi trường preview, feature flag khác với deploy theo env, rollback, và CI phía FE nên chặn gì. Bạn không phải platform engineer. Bạn vẫn phải nói được app Vue/Nuxt tới tay user thế nào.

Đọc 14.1–14.2 trước (GitOps và pipeline bạn sẽ vẽ). Rồi 14.3 cho preview và env (sâu hơn Q&A preview bên NET-OPS). 14.4 là flag: đối chiếu Q&A rollout bằng lời. 14.5 là phần bạn chịu trách nhiệm trên Kubernetes: image, probe, cache header, không phải CNI. GitOps + Argo CD là bối cảnh enterprise hay gặp; hãy quy nó về digest bạn promote.

Tóm tắt: GitOps nghĩa là Git là desired state của cluster. CI build một image bất biến gắn tag git SHA; repo GitOps (Helm/Kustomize) chuyển sang digest đó; Argo CD reconcile. Rollback là revert Git, không phải kubectl edit. Bạn không bao giờ ship :latest.

Vì sao quan trọng: “Frontend lên production thế nào?” Họ dùng Argo CD. Họ muốn phần của bạn: digest, vì sao :latest không ổn, và cách rollback một release Vue hỏng mà không cần ssh. Mitigate ngay thì gạt flag; rollback nhanh thì revert commit GitOps.

1. Cách hoạt động: CI tạo image hoặc artifact tĩnh bất biến (ghcr.io/acme/web@sha256:…). Prod nên trỏ digest, không phải tag trôi. Repo GitOps ghi digest đó. Argo CD apply. Drift (ai đó kubectl-edit) là thứ Argo sẽ kéo về. Đó chính là mục đích.
2. Build một lần, promote cùng digest từ staging → prod bằng cách đổi env, không rebuild. Image staging khác image prod là failure mode: bạn không test đúng thứ đã ship.
3. Mitigate ngay: tắt feature flag (14.4). Rollback nhanh: revert commit GitOps; Argo sync digest trước. kubectl rollout undo rồi cũng bị apply lại. Preview là namespace từ SHA của PR, không phải snowflake trên laptop.
4. Phía frontend: cache index.html ngắn, asset đã hash thì immutable. Argo healthy mà JS vẫn cũ, thường là CDN còn giữ HTML. Secret trong GitOps để ở Sealed / External Secrets. Biết chúng tồn tại; đừng dán.

git push SHA
CI: lint | vue-tsc | vitest | nuxt build | budget
CI: docker build → ghcr.io/acme/web@sha256:abc…
CI: commit image: sha256:abc vào gitops/apps/web.yaml
Argo CD: sync cluster theo Git (đừng kubectl apply từ laptop)
rollback: git revert commit gitops đó; Argo apply lại sha256:old
mitigate trước: flag checkout_v2 = off  (14.4)
# không bao giờ: image: acme/web:latest

Điều gì xảy ra: Cluster chỉ đổi khi Git đổi. Rollback là một commit Git khác. :latest làm Argo và thực tế lệch nhau mỗi lần pull. Flag nhanh hơn revert khi checkout đang cháy.

Lỗi hay gặp

• Ship :latest. Triệu chứng: không nói được prod đang chạy gì. Nguyên nhân: tag trôi. Sửa: digest trong GitOps.
• kubectl rollout undo khi Argo đang sync. Triệu chứng: pod cũ trở lại. Nguyên nhân: Git vẫn trỏ digest hỏng. Sửa: revert Git.
• Rebuild cho prod. Triệu chứng: staging chưa từng chạy JS đó. Nguyên nhân: “đổi env rồi rebuild”. Sửa: env runtime, một digest.
• Cache HTML dài. Triệu chứng: Argo healthy, user còn Vue tuần trước. Nguyên nhân: index.html immutable. Sửa: HTML cache ngắn, asset hash thì immutable.

Tóm tắt: Hai track. PR là feedback nhanh: install, rồi lint / vue-tsc / Vitest song song, rồi production build kèm budget, rồi Playwright smoke tùy chọn trên URL preview. Main publish một artifact, bump GitOps, upload map ẩn, không bao giờ rebuild trong cluster.

Vì sao quan trọng: “Vẽ pipeline cho app Nuxt trong monorepo”. Họ muốn cái gì chạy song song, artifact duy nhất publish ở đâu, và vì sao Playwright nhắm nuxt dev không phải bằng chứng. Phút để pipeline xanh và tỷ lệ flake quan trọng không kém coverage.

1. Cách hoạt động: PR: cache pnpm → lint | vue-tsc | vitest song song → nuxt build + bundle budget → Playwright smoke tùy chọn trên URL preview (14.3). PR fork không nhận secret production.
2. Main: cùng gate, kèm e2e đầy hơn, docker từ dist hoặc Nitro standalone, push digest, commit GitOps, sourcemap ẩn lên Sentry release=SHA, Argo sync, smoke synthetic trên prod.
3. Monorepo: build package affected (Turbo/Nx). Playwright chạy production build hoặc URL preview, không bao giờ nuxt dev. Để ý OOM khi nuxt build trên CI.
4. Quality gate xếp theo blast radius: lint/type rẻ và chặn; budget chặn merge; e2e smoke chặn deploy; phần trăm coverage thì không. Bỏ test “chỉ lần này” là cách pipeline xanh vẫn ship incident.

PR  → install (pnpm cache)
    → song song: lint | vue-tsc | vitest
    → nuxt build + bundle budget
    → tùy chọn: Playwright smoke trên URL preview
    → tùy chọn: preview deploy (14.3)
main → cùng gate
     → docker FROM dist hoặc Nitro standalone
     → push ghcr.io/app@sha256:…
     → commit digest vào gitops/; map Sentry release=SHA
     → Argo sync; smoke synthetic trên prod

Điều gì xảy ra: Track PR không bao giờ publish. Main là nơi duy nhất một digest ra đời. Playwright nhắm nuxt dev sẽ cho xanh một bug tree-shake chỉ tồn tại trên graph production của Rollup/Rolldown. Map Sentry gắn với SHA mà Argo vừa sync.

Lỗi hay gặp

• Playwright nhắm nuxt dev. Triệu chứng: CI xanh, prod gãy. Nguyên nhân: graph bundler khác. Sửa: URL preview hoặc nuxt preview.
• Rebuild trên cluster. Triệu chứng: JS prod chưa từng test. Nguyên nhân: “Helm sẽ build”. Sửa: image là artifact.
• PR fork mang secret prod. Triệu chứng: token bị lộ. Nguyên nhân: cùng một workflow. Sửa: secret chỉ trên main tin cậy.
• Source map hidden upload lên CDN. Triệu chứng: source nằm public. Nguyên nhân: trộn với asset đã hash. Sửa: chỉ Sentry, sourcemap: "hidden".

Tóm tắt: Mỗi PR có một URL riêng của đúng SHA, nói với API staging, data giả, và OAuth client tách. Hủy khi merge. Ưu tiên env runtime trên image Node để cùng digest làm preview, staging, và prod. VITE_* / NUXT_PUBLIC_* luôn là client.

Vì sao quan trọng: “Designer xem PR thế nào mà không lộ PII prod?” CORS, cookie, OAuth redirect_uri, và VITE_* bị copy là phần họ hỏi tiếp. Khác Q&A preview NET-OPS (process của team): ở đây cơ chế là env lúc build khác env lúc runtime.

1. Cách hoạt động: Host riêng pr-123.preview.example.com. Env: API staging/test, data ẩn danh, OAuth client và cookie tách. X-Robots-Tag: noindex. Hủy lúc merge/đóng. Preview sống lâu thành staging chui là incident.
2. Env lúc build (VITE_*, NUXT_PUBLIC_* bị Vite inline) được nướng vào JS. Nếu nướng URL API lúc build thì bạn không promote được digest. Env runtime (runtimeConfig / Docker -e) để một digest chạy được ba URL.
3. Origin preview làm nổ CORS và cookie Domain=.example.com. Bọc bằng BFF same-site, hoặc allowlist chỉ trên staging. Cookie host-only. Preview SSR + WebSocket cần host Node thật, không chỉ Pages tĩnh.
4. baseURL e2e lấy từ CI. Playwright nhắm preview, không localhost. PR fork không thừa kế VITE_ prod.

// nuxt.config.ts: public luôn là client; private ở lại Nitro
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: "",          // NUXT_API_SECRET: chỉ server
    public: { apiBase: "" }, // NUXT_PUBLIC_API_BASE: bị inline nếu nướng
  },
})
// Docker runtime (cùng digest, ba URL):
// docker run -e NUXT_PUBLIC_API_BASE=https://api.staging.example.com web@sha256:abc
// không bao giờ: VITE_STRIPE_SECRET=...  (luôn nằm trong JS)

Điều gì xảy ra: apiSecret ở lại server. public.apiBase có thể inject lúc process start nếu bạn không nướng. Cùng sha256:abc phục vụ preview và prod với -e khác. Secret Stripe trong VITE_ đã nằm trong bundle kẻ tấn công tải về.

Lỗi hay gặp

• Preview trỏ DB prod. Triệu chứng: PII trên URL public. Nguyên nhân: copy .env. Sửa: API staging, data giả.
• Nướng NUXT_PUBLIC_API_BASE rồi “promote”. Triệu chứng: prod vẫn nói với staging, hoặc bạn rebuild. Nguyên nhân: bind lúc compile. Sửa: -e runtime.
• Cookie domain cha. Triệu chứng: PM login prod từ preview. Sửa: host-only; OAuth client tách.
• Host tĩnh cho SSR + WS. Triệu chứng: socket 404. Nguyên nhân: Pages là file. Sửa: preview Node.

Tóm tắt: Feature flag là kiểm soát rủi ro lúc runtime: kill switch, rollout theo phần trăm, entitlement, experiment. Không thay thế version control, cũng không phải nghĩa địa if/else vĩnh viễn. Bảo mật và giá đánh giá ở BFF. Xem Q&A feature-flags-rollout cho chuyện cleanup nói thành lời.

Vì sao quan trọng: “Ship dark? Kill switch? Sao không chỉ deploy?” Họ muốn bạn đánh giá flag ở đâu, chuyện gì khi dịch vụ flag sập, và cách xóa chúng. Deploy theo env không cắt được user prod. Khác 14.3 (SHA preview): flag ship bên trong prod.

1. Cách hoạt động: Nêu rõ loại. Kill switch: tắt checkout mới, fail-safe. Gradual: hash ổn định trên user id, không Math.random() mỗi request. Entitlement: gói có export, server quyết, FE chỉ phản ánh. Experiment: copy/layout; để ý CLS.
2. Đánh giá bảo mật và giá ở BFF để client không tự gạt được. Flag phía client chỉ là chrome UX. Ghim bucket SSR trong payload để hydrate khớp. Server true còn client false là mismatch.
3. Nếu dịch vụ flag trả 500: fail-closed cho thanh toán, fail-open cho widget chat. Cleanup: một ticket và một ngày lúc 100% hoặc khi bỏ. Flag 1% suốt sáu tháng là bug process. ADR nếu nó đổi kiến trúc.
4. Giấu nút phía client không phải authz. API vẫn phải từ chối. Đừng gắn flag cho nội dung Google phải thấy. Flag localStorage lệch giữa các tab là bug đa tab.

type FlagKind = "kill" | "gradual" | "entitlement" | "experiment"
function checkoutEnabled(userId: string, flags: Flags): boolean {
  if (flags.serviceDown) return false // fail-closed cho tiền
  if (!flags.checkout_v2) return false // kill switch
  return hashToBucket(userId, "checkout_v2") < flags.checkout_v2.percent
}
// SSR: ghim boolean vào payload để hydrate khớp
// BFF đánh giá entitlement; FE chỉ giấu nút (API vẫn 403)
// ticket: xóa checkout_v2 hai sprint sau 100%

Điều gì xảy ra: Dịch vụ flag chết thì từ chối checkout, không charge mù. Phần trăm dùng hash ổn định để cùng user không bị gạt mỗi request. Boolean được ghim cho hydrate. Ticket là một phần của thiết kế, không phải hy vọng để sau. Q&A rollout là STAR nói thành lời; đây là cơ chế.

Lỗi hay gặp

• Math.random() mỗi request cho 10%. Triệu chứng: nháy, bucket không charge. Nguyên nhân: không hash ổn định. Sửa: hash(userId + flagKey).
• Chỉ giấu nút pay phía client. Triệu chứng: fetch tự chế vẫn charge. Nguyên nhân: flag như authz. Sửa: BFF + API 403.
• Flag 1% suốt sáu tháng. Triệu chứng: hai code path mãi. Nguyên nhân: không expiry. Sửa: ticket hẹn ngày lên 100%.
• SSR true, client false. Triệu chứng: hydration mismatch. Nguyên nhân: đọc flag hai lần. Sửa: ghim trong payload.

Tóm tắt: Bạn phụ trách image, ingress path, probe, và header cache / CSP. Bạn không phụ trách cluster, CNI, hay cert-manager. Sửa tag trong values.yaml không phải “làm Kubernetes”.

Vì sao quan trọng: “Bạn có viết Helm chart không?” Họ đang thử xem bạn có nhận quá không. SPA tĩnh là nginx distroless phục vụ file đã hash. Nuxt SSR là process Node với HPA, readiness, và không sticky session, trừ khi bạn giữ session trong memory của server (điều bạn không nên làm).

1. Cách hoạt động: Dockerfile hoặc bucket tĩnh + CDN. Port, health endpoint, resource request cho SSR, path (/, /app), header bạn cần (CSP, cache). SPA: nginx hoặc distroless phục vụ dist. Nuxt SSR: node .output/server/index.mjs trên HOST=0.0.0.0.
2. Liveness là /healthz rẻ. Đừng SSR / làm liveness, kẻo trang chậm giết pod. Readiness là Nitro đang listen (và có thể cache đã warm). Không readiness = traffic đến trước khi listen. SSR scale ngang không cache chung là thundering herd, không phải bí ẩn jank frontend.
3. Bạn phụ trách CSP vì bạn biết origin FE. Bạn phụ trách header cache vì bạn biết HTML khác asset đã hash (14.1). Inject config là env runtime (14.3), không phải rebuild. Image bất biến; config được mount hoặc -e.
4. Canary 10%: hai ReplicaSet hoặc weight ingress, kèm một flag (14.4) nếu cần bucket ổn định theo user. Log từ pod là request id và lỗi SSR; log browser vào Sentry (19.x). SPA fallback không được nuốt /api.

# SPA: distroless/nginx phục vụ file đã hash, HTML Cache-Control: no-store
# Nuxt SSR:
CMD ["node", ".output/server/index.mjs"]
ENV HOST=0.0.0.0 PORT=3000
GET /healthz  →  200  {"ok": true}   # liveness: rẻ, không SSR
GET /ready    →  200  sau khi Nitro listen
# probe: liveness /healthz; readiness /ready; đừng dùng GET / làm liveness
# nginx: try_files $uri /index.html, nhưng location /api/ thì proxy, không fallback

Điều gì xảy ra: Process bind 0.0.0.0 để probe với tới. /healthz không render Vue. /ready chờ đến khi Nitro nhận connection. /api là location proxy để try_files không trả index.html khi miss JSON. HTML không immutable; hash JS thì có.

Lỗi hay gặp

• Không readiness. Triệu chứng: 502 lúc roll. Nguyên nhân: traffic trước khi Nitro listen. Sửa: /ready.
• Liveness = GET /. Triệu chứng: dashboard chậm restart pod. Nguyên nhân: SSR trên probe. Sửa: /healthz rẻ.
• SPA fallback nuốt /api. Triệu chứng: HTML bị parse như JSON. Nguyên nhân: try_files mọi location. Sửa: proxy /api trước.
• Nhận đã thiết kế cluster vì đổi image tag. Triệu chứng: trượt vòng. Nguyên nhân: nhận quá. Sửa: nêu rõ phần bạn phụ trách.