Develop

Dockerfile

@@ -1,15 +1,19 @@
-# Tóm tắt: Image chạy portfolio React bằng dependency đúng từ package-lock.
-FROM node:22-alpine
+# Tóm tắt: Build portfolio React thành static bundle rồi serve bằng Nginx.
+FROM node:22-alpine AS build
 
 WORKDIR /app
 
-ENV HOST=0.0.0.0
-ENV PATH=/app/node_modules/.bin:$PATH
-
 COPY package.json package-lock.json ./
 RUN npm ci
 
 COPY . .
+RUN node scripts/verify-lfs-assets.js
+RUN npm run build
+
+FROM nginx:1.27-alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/build /usr/share/nginx/html
 
-EXPOSE 3000
-CMD ["npm", "start"]
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,22 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location ^~ /skills/ {
+    add_header Cache-Control "no-cache";
+    try_files $uri =404;
+  }
+
+  location ~* \.(?:css|js|jpg|jpeg|gif|png|svg|ico|webp|woff2?)$ {
+    expires 7d;
+    add_header Cache-Control "public";
+    try_files $uri =404;
+  }
+}

scripts/verify-lfs-assets.js

@@ -0,0 +1,61 @@
+const fs = require("fs");
+const path = require("path");
+
+const assetRoots = ["public", path.join("src", "assests")];
+const binaryExtensions = new Set([
+  ".eot",
+  ".gif",
+  ".ico",
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".svg",
+  ".ttf",
+  ".webp",
+  ".woff",
+  ".woff2",
+]);
+const lfsPointerMarker = "version https://git-lfs.github.com/spec/v1";
+
+function walkFiles(root) {
+  if (!fs.existsSync(root)) {
+    return [];
+  }
+
+  const entries = fs.readdirSync(root, { withFileTypes: true });
+  return entries.flatMap((entry) => {
+    const currentPath = path.join(root, entry.name);
+    return entry.isDirectory() ? walkFiles(currentPath) : [currentPath];
+  });
+}
+
+const unresolvedAssets = assetRoots
+  .flatMap(walkFiles)
+  .filter((filePath) =>
+    binaryExtensions.has(path.extname(filePath).toLowerCase())
+  )
+  .filter((filePath) => {
+    const handle = fs.openSync(filePath, "r");
+    try {
+      const buffer = Buffer.alloc(lfsPointerMarker.length);
+      fs.readSync(handle, buffer, 0, buffer.length, 0);
+      return buffer.toString("utf8") === lfsPointerMarker;
+    } finally {
+      fs.closeSync(handle);
+    }
+  });
+
+if (unresolvedAssets.length > 0) {
+  console.error(
+    "Git LFS assets are not resolved. Run `git lfs install` and `git lfs pull` before building Docker."
+  );
+  unresolvedAssets
+    .slice(0, 20)
+    .forEach((filePath) => console.error(`- ${filePath}`));
+  if (unresolvedAssets.length > 20) {
+    console.error(`...and ${unresolvedAssets.length - 20} more files.`);
+  }
+  process.exit(1);
+}
+
+console.log("Git LFS asset check passed.");

src/components/softwareSkills/SoftwareSkill.js

@@ -2,6 +2,8 @@ import React from "react";
 import "./SoftwareSkill.css";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
+const skillAssetVersion = "2026-06-29-lfs-refresh";
+
 // Tóm tắt: Render lưới kỹ năng phần mềm từ cấu hình, hỗ trợ cả Iconify và ảnh tĩnh.
 class SoftwareSkill extends React.Component {
   render() {
@@ -35,7 +37,7 @@ class SoftwareSkill extends React.Component {
                       <img
                         className="skill-image"
                         style={logo.style}
-                        src={`${process.env.PUBLIC_URL}/skills/${logo.imageSrc}`}
+                        src={`${process.env.PUBLIC_URL}/skills/${logo.imageSrc}?v=${skillAssetVersion}`}
                         alt={logo.skillName}
                       />
                     )}