diff --git a/Docker/svc.front/.env b/Docker/svc.front/.env
new file mode 100644
index 0000000..acd24ae
--- /dev/null
+++ b/Docker/svc.front/.env
@@ -0,0 +1,20 @@
+# Project
+PROJ_NAME=proj_bims_ils-svc
+
+# Network 網路環境
+NET_TRAEFIK=net-traefik_svc
+
+# Image: org/name
+IMAGE_PROJ_NAME=proj_bims_ils
+IMAGE_NAME=empower-front
+TAG_VERSION=0.1.0
+
+# Remote
+REMOTE_URL=harbor.mjm-staging.developers-homelab.net
+
+# ------------------------------------------------------------------------------
+# Basic 基本配置
+
+HOST_DOMAIN=ibms.mjmtech.com.tw
+CUSTOMER_ID=empower1
+WEB_TITLE=新創賦能
diff --git a/Docker/svc.front/1.start.container.bat b/Docker/svc.front/1.start.container.bat
new file mode 100644
index 0000000..0eb777a
--- /dev/null
+++ b/Docker/svc.front/1.start.container.bat
@@ -0,0 +1,21 @@
+@echo off
+cd /d "%~dp0"
+setlocal enabledelayedexpansion
+
+REM === 載入 .env 變數（忽略註解與空行） ===
+for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+    if "%%a" neq "" (
+        if not "%%a"=="REM" (
+            set "%%a=%%b"
+        )
+    )
+)
+
+REM === 檢查變數 ========================
+echo -----------------------------------
+echo PROJ_NAME=!PROJ_NAME!
+echo -----------------------------------
+echo.
+
+:: 啓動: 容器(containers)
+docker-compose --project-name !PROJ_NAME! --env-file .env up -d
diff --git a/Docker/svc.front/11.build-image.bat b/Docker/svc.front/11.build-image.bat
new file mode 100644
index 0000000..16767da
--- /dev/null
+++ b/Docker/svc.front/11.build-image.bat
@@ -0,0 +1,27 @@
+@echo off
+cd /d "%~dp0"
+setlocal enabledelayedexpansion
+
+REM === 載入 .env 變數（忽略註解與空行） ===
+for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+    if "%%a" neq "" (
+        if not "%%a"=="REM" (
+            set "%%a=%%b"
+        )
+    )
+)
+
+REM === 檢查變數 ========================
+echo -----------------------------------
+echo Check: IMAGE_NAME=!IMAGE_NAME!
+echo Check: TAG_VERSION=!TAG_VERSION!
+echo -----------------------------------
+echo.
+
+REM === 流程 ============================
+
+:: 0. 移除舊 Image
+docker rmi !IMAGE_NAME!:!TAG_VERSION!
+
+:: 1. 打包 映像檔 ( -f: 文件位置(注:是相對於目錄) -t: 標簽 ..: 上一層作爲根目錄(.: 表示當前當作根目錄))
+docker build -f Dockerfile -t !IMAGE_NAME!:!TAG_VERSION! ../../
diff --git a/Docker/svc.front/12.push-image.bat b/Docker/svc.front/12.push-image.bat
new file mode 100644
index 0000000..9b44796
--- /dev/null
+++ b/Docker/svc.front/12.push-image.bat
@@ -0,0 +1,47 @@
+@echo off
+cd /d "%~dp0"
+setlocal enabledelayedexpansion
+
+REM === 載入 .env 變數（忽略註解與空行） ===
+for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+    if "%%a" neq "" (
+        if not "%%a"=="REM" (
+            set "%%a=%%b"
+        )
+    )
+)
+
+REM === 檢查變數 ========================
+echo -----------------------------------
+echo Check: IMAGE_PROJ_NAME=!IMAGE_PROJ_NAME!
+echo Check: IMAGE_NAME=!IMAGE_NAME!
+echo Check: TAG_VERSION=!TAG_VERSION!
+echo Check: REMOTE_URL=!REMOTE_URL!
+echo -----------------------------------
+echo.
+
+REM === 設定目標 image tag ==============
+set "LOCAL_TAG=!IMAGE_NAME!:!TAG_VERSION!"
+set "REMOTE_TAG=!REMOTE_URL!/!IMAGE_PROJ_NAME!/!IMAGE_NAME!:!TAG_VERSION!"
+
+
+REM === 流程 ============================
+
+:: 1. 登入 遠端倉庫
+echo.
+echo Login...
+docker login !REMOTE_URL!
+
+:: 2. 標簽 標記映像檔
+echo.
+echo Tagging image...
+docker tag !LOCAL_TAG! !REMOTE_TAG!
+
+:: 3. 推送 映像檔
+echo.
+echo Pushing image...
+docker push !REMOTE_TAG!
+
+:: 4. 完成
+echo Done.
+pause
diff --git a/Docker/svc.front/2.stop.container.bat b/Docker/svc.front/2.stop.container.bat
new file mode 100644
index 0000000..879ab1e
--- /dev/null
+++ b/Docker/svc.front/2.stop.container.bat
@@ -0,0 +1,22 @@
+@echo off
+cd /d "%~dp0"
+setlocal enabledelayedexpansion
+
+REM === 載入 .env 變數（忽略註解與空行） ===
+for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+    if "%%a" neq "" (
+        if not "%%a"=="REM" (
+            set "%%a=%%b"
+        )
+    )
+)
+
+REM === 檢查變數 ========================
+echo -----------------------------------
+echo PROJ_NAME=!PROJ_NAME!
+echo -----------------------------------
+echo.
+
+:: 停止: 容器(containers)
+docker-compose stop
+
diff --git a/Docker/svc.front/3.remove.container.bat b/Docker/svc.front/3.remove.container.bat
new file mode 100644
index 0000000..6651888
--- /dev/null
+++ b/Docker/svc.front/3.remove.container.bat
@@ -0,0 +1,22 @@
+@echo off
+cd /d "%~dp0"
+setlocal enabledelayedexpansion
+
+REM === 載入 .env 變數（忽略註解與空行） ===
+for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+    if "%%a" neq "" (
+        if not "%%a"=="REM" (
+            set "%%a=%%b"
+        )
+    )
+)
+
+REM === 檢查變數 ========================
+echo -----------------------------------
+echo PROJ_NAME=!PROJ_NAME!
+echo -----------------------------------
+echo.
+
+:: 刪除: 容器(containers)
+docker-compose down
+
diff --git a/Docker/svc.front/9.delete.all.bat b/Docker/svc.front/9.delete.all.bat
new file mode 100644
index 0000000..b3cfe6c
--- /dev/null
+++ b/Docker/svc.front/9.delete.all.bat
@@ -0,0 +1,22 @@
+@echo off
+cd /d "%~dp0"
+setlocal enabledelayedexpansion
+
+REM === 載入 .env 變數（忽略註解與空行） ===
+for /f "usebackq tokens=1,* delims==" %%a in (".env") do (
+    if "%%a" neq "" (
+        if not "%%a"=="REM" (
+            set "%%a=%%b"
+        )
+    )
+)
+
+REM === 檢查變數 ========================
+echo -----------------------------------
+echo PROJ_NAME=!PROJ_NAME!
+echo -----------------------------------
+echo.
+
+:: 刪除: 容器(containers) & 資料(volumes) & 網路(network)
+docker-compose down -v
+
diff --git a/Docker/svc.front/Dockerfile b/Docker/svc.front/Dockerfile
new file mode 100644
index 0000000..32ada09
--- /dev/null
+++ b/Docker/svc.front/Dockerfile
@@ -0,0 +1,43 @@
+ # 使用 Node.js 作為基礎映像
+FROM node:18-alpine AS builder
+
+# 設定工作目錄
+WORKDIR /app
+
+# 複製 package.json 和 package-lock.json (或 yarn.lock) 到工作目錄
+COPY package*.json ./
+
+# 安裝依賴
+RUN npm install --legacy-peer-deps
+
+# 複製所有檔案到工作目錄
+COPY . .
+
+# 清理緩存並重新構建
+RUN npm cache clean --force
+RUN rm -rf node_modules
+RUN npm install --legacy-peer-deps
+
+# 構建前端應用 (如果需要)
+RUN npm run build --omit=dev
+
+# 使用一個更小的映像來提供靜態文件 (例如 Nginx)
+FROM nginx:alpine
+
+# 將構建好的靜態檔案複製到 Nginx 的預設目錄
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# (可選) 複製自定義 Nginx 設定檔
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 暴露 Nginx 預設的 80 端口
+EXPOSE 80
+
+# 2025-08-29 說明
+LABEL changelog="2025-08-29: 打包測試。"
+
+# Nginx 已經預設啟動，所以不需要 CMD 指令
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+ENTRYPOINT ["/docker-entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/Docker/svc.front/docker-compose.yml b/Docker/svc.front/docker-compose.yml
new file mode 100644
index 0000000..45f12fe
--- /dev/null
+++ b/Docker/svc.front/docker-compose.yml
@@ -0,0 +1,31 @@
+# 指令
+# - 啓動容器: docker-compose --env-file .env up -d
+# - 停止容器: docker-compose down
+# - 移除容器: docker ps -a >> docker rm <containerId>
+
+networks:
+  internal:
+    driver: bridge
+  traefik:
+    name: ${NET_TRAEFIK}
+    external: true
+
+volumes:
+  upload:
+
+services:
+
+  font:
+    environment:
+        # 動態設定 API 及檔案服務的 URL
+        VITE_API_BASEURL: https://${CUSTOMER_ID}-api.${HOST_DOMAIN}
+        VITE_FILE_API_BASEURL: https://${CUSTOMER_ID}-front.${HOST_DOMAIN}
+        VITE_APP_TITLE: ${WEB_TITLE} 
+        #VITE_MQTT_BASEURL: wss://${CUSTOMER_ID}-mqtt.${HOST_DOMAIN}
+
+    volumes:
+      - upload:/usr/share/nginx/html/upload
+      
+    networks:
+      - internal
+      - traefik