build frontend ใหม่ ผ่านทั้ง dev และ proc
This commit is contained in:
196
frontend/Dockerfile
Executable file → Normal file
196
frontend/Dockerfile
Executable file → Normal file
@@ -1,74 +1,122 @@
|
||||
# syntax=docker/dockerfile:1.6
|
||||
|
||||
############ Base ############
|
||||
FROM node:20-alpine AS base
|
||||
WORKDIR /app
|
||||
RUN apk add --no-cache bash curl tzdata \
|
||||
&& ln -snf /usr/share/zoneinfo/Asia/Bangkok /etc/localtime \
|
||||
&& echo "Asia/Bangkok" > /etc/timezone
|
||||
ARG NEXT_PUBLIC_API_BASE
|
||||
ENV TZ=Asia/Bangkok \
|
||||
NEXT_TELEMETRY_DISABLED=1 \
|
||||
CHOKIDAR_USEPOLLING=true \
|
||||
WATCHPACK_POLLING=true \
|
||||
NEXT_PUBLIC_API_BASE=${NEXT_PUBLIC_API_BASE} \
|
||||
npm_config_yes=true
|
||||
# (ค่าพวกนี้ซ้ำกับ compose ได้ ไม่เป็นปัญหา)
|
||||
|
||||
############ Deps (install) ############
|
||||
FROM base AS deps
|
||||
## COPY package.json package-lock.json* ./
|
||||
# ถ้ามี lock ใช้ npm ci; ถ้าไม่มีก็ npm i
|
||||
## RUN if [ -f package-lock.json ]; then npm ci --no-audit --no-fund; else npm install --no-audit --no-fund; fi
|
||||
|
||||
COPY package.json ./
|
||||
# ไม่ copy lock เพื่อบังคับให้ใช้ npm install
|
||||
RUN npm install --no-audit --no-fund
|
||||
|
||||
# เพิ่ม shadcn/ui + tailwind deps
|
||||
# RUN npm install -D tailwindcss postcss autoprefixer shadcn@latest \
|
||||
# && npm install class-variance-authority clsx framer-motion lucide-react tailwind-merge tailwindcss-animate
|
||||
|
||||
# init tailwind config (กัน No Tailwind CSS configuration found)
|
||||
# RUN npx tailwindcss init -p
|
||||
|
||||
# bake components ของ shadcn แบบ non-interactive
|
||||
# RUN npx shadcn add -y button badge card input tabs progress dropdown-menu tooltip switch
|
||||
|
||||
############ Dev (hot-reload) ############
|
||||
# ใช้ร่วมกับ compose: bind ทั้งโปรเจ็กต์ → /app
|
||||
# และใช้ named volume แยกสำหรับ /app/node_modules และ /app/.next
|
||||
FROM base AS dev
|
||||
RUN apk add --no-cache git openssh-client ca-certificates
|
||||
# สำคัญ: สร้างโฟลเดอร์ที่ Next ใช้งาน (เวลายังไม่ bind อะไรเข้ามา)
|
||||
RUN install -d -o node -g node /app/public /app/app /app/.logs /app/.next /app/.next/cache
|
||||
# นำ node_modules จากชั้น deps มาไว้ (ลดเวลาตอน start ครั้งแรก)
|
||||
COPY --from=deps /app/node_modules /app/node_modules
|
||||
|
||||
# ไม่กำหนด USER ที่นี่ ปล่อยให้ compose คุม (ตอนนี้คุณใช้ user: "1000:1000")
|
||||
ENV NODE_ENV=development
|
||||
EXPOSE 3000
|
||||
CMD ["npm", "run", "dev"]
|
||||
|
||||
############ Build (production) ############
|
||||
FROM deps AS builder
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
############ Prod runtime (optimized) ############
|
||||
FROM node:20-alpine AS prod
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
RUN apk add --no-cache libc6-compat
|
||||
# RUN apk add --no-cache libc6-compat \
|
||||
# && addgroup -g 1000 node && adduser -D -u 1000 -G node node
|
||||
# คัดเฉพาะของจำเป็น
|
||||
COPY --from=builder /app/package.json /app/package-lock.json* ./
|
||||
# ติดตั้งเฉพาะ prod deps
|
||||
RUN if [ -f package-lock.json ]; then npm ci --omit=dev --no-audit --no-fund; else npm i --omit=dev --no-audit --no-fund; fi
|
||||
COPY --from=builder --chown=node:node /app/.next ./.next
|
||||
COPY --from=builder --chown=node:node /app/public ./public
|
||||
USER node
|
||||
EXPOSE 3000
|
||||
CMD ["npm", "start"]
|
||||
# docker compose -f docker-frontend-build.yml build --no-cache
|
||||
# syntax=docker/dockerfile:1.6
|
||||
|
||||
############ Base ############
|
||||
FROM node:24-alpine AS base
|
||||
WORKDIR /app
|
||||
RUN apk add --no-cache bash curl tzdata \
|
||||
&& ln -snf /usr/share/zoneinfo/Asia/Bangkok /etc/localtime \
|
||||
&& echo "Asia/Bangkok" > /etc/timezone
|
||||
|
||||
ARG NEXT_PUBLIC_API_BASE
|
||||
ENV TZ=Asia/Bangkok \
|
||||
NEXT_TELEMETRY_DISABLED=1 \
|
||||
CHOKIDAR_USEPOLLING=true \
|
||||
WATCHPACK_POLLING=true \
|
||||
NEXT_PUBLIC_API_BASE=${NEXT_PUBLIC_API_BASE} \
|
||||
npm_config_yes=true
|
||||
|
||||
# สร้างโฟลเดอร์ที่ Next.js ต้องเขียนทับ และกำหนดสิทธิ์
|
||||
RUN mkdir -p /app/.next/cache /app/.next/server /app/.next/types && \
|
||||
chmod -R 777 /app/.next
|
||||
|
||||
############ Deps (install) ############
|
||||
FROM base AS deps
|
||||
COPY package.json package-lock.json* ./
|
||||
# ถ้ามี lock ใช้ npm ci; ถ้าไม่มีก็ npm i
|
||||
RUN if [ -f package-lock.json ]; then \
|
||||
npm ci --no-audit --no-fund; \
|
||||
else \
|
||||
npm install --no-audit --no-fund; \
|
||||
fi
|
||||
|
||||
############ Dev (hot-reload) ############
|
||||
FROM base AS dev
|
||||
RUN apk add --no-cache git openssh-client ca-certificates
|
||||
# สร้างโฟลเดอร์ที่ Next ใช้งาน
|
||||
RUN install -d -o node -g node /app/public /app/app /app/.logs /app/.next /app/.next/cache
|
||||
# นำ node_modules จากชั้น deps มาไว้
|
||||
COPY --from=deps /app/node_modules /app/node_modules
|
||||
|
||||
# สำหรับ development: คาดหวังว่าจะมี bind mount source code
|
||||
# แต่ก็ COPY ไว้เผื่อรัน standalone
|
||||
COPY --chown=node:node . .
|
||||
|
||||
ENV NODE_ENV=development
|
||||
EXPOSE 3000
|
||||
CMD ["npm", "run", "dev"]
|
||||
|
||||
############ Build (production) ############
|
||||
FROM deps AS builder
|
||||
# ล้างและสร้างโฟลเดอร์ใหม่ทั้งหมด
|
||||
RUN rm -rf /app/.next && \
|
||||
mkdir -p /app/.next && \
|
||||
chmod 777 /app/.next
|
||||
|
||||
# Copy all necessary files for build
|
||||
COPY . .
|
||||
|
||||
ARG NEXT_PUBLIC_API_BASE
|
||||
ENV NEXT_PUBLIC_API_BASE=${NEXT_PUBLIC_API_BASE}
|
||||
|
||||
# Debug: Check if components exist before build
|
||||
RUN echo "=== Checking components ===" && \
|
||||
ls -la components/ui/ || echo "WARNING: No components/ui" && \
|
||||
ls -la lib/utils.* || echo "WARNING: No lib/utils" && \
|
||||
cat jsconfig.json || cat tsconfig.json || echo "WARNING: No jsconfig/tsconfig" && \
|
||||
echo "=== Checking .next permissions ===" && \
|
||||
ls -lad /app/.next
|
||||
|
||||
RUN npm run build
|
||||
|
||||
############ Prod runtime (optimized) ############
|
||||
FROM node:24-alpine AS prod
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
RUN apk add --no-cache libc6-compat
|
||||
|
||||
# คัดเฉพาะของจำเป็น
|
||||
COPY --from=builder /app/package.json /app/package-lock.json* ./
|
||||
# ติดตั้งเฉพาะ prod deps
|
||||
RUN if [ -f package-lock.json ]; then \
|
||||
npm ci --omit=dev --no-audit --no-fund; \
|
||||
else \
|
||||
npm i --omit=dev --no-audit --no-fund; \
|
||||
fi
|
||||
|
||||
COPY --from=builder --chown=node:node /app/.next ./.next
|
||||
COPY --from=builder --chown=node:node /app/public ./public
|
||||
COPY --from=builder --chown=node:node /app/next.config.* ./
|
||||
|
||||
RUN mkdir -p /app/.next/cache && chown -R node:node /app
|
||||
USER node
|
||||
EXPOSE 3000
|
||||
CMD ["npm", "start"]
|
||||
|
||||
# === STEP 1: Generate Components ===
|
||||
# cd /share/Container/dms
|
||||
# UID=$(id -u) GID=$(id -g) docker compose -f generate-shadcn-components.yml run --rm setup-shadcn
|
||||
|
||||
# === STEP 2: ตรวจสอบไฟล์ ===
|
||||
# cd frontend
|
||||
# echo "📁 Components created:"
|
||||
# ls -la components/ui/ 2>/dev/null || echo "⚠️ No components/ui/ directory"
|
||||
# ls -la lib/ 2>/dev/null || echo "⚠️ No lib/ directory"
|
||||
# ls -la components.json 2>/dev/null || echo "⚠️ No components.json"
|
||||
|
||||
# === STEP 3: Commit to Git ===
|
||||
# git add components/ lib/ components.json
|
||||
# git status
|
||||
# git commit -m "Add shadcn/ui components and utilities"
|
||||
|
||||
# === STEP 4: Build Docker Image ===
|
||||
# cd /share/Container/dms
|
||||
# docker compose -f docker-frontend-build.yml build --no-cache
|
||||
# docker compose -f docker-frontend-build.yml build --no-cache 2>&1 | tee build.log
|
||||
|
||||
# === ต่อไปที่ต้องเพิ่ม component ใหม่:
|
||||
# docker run --rm -v "$PWD:/app" -w /app node:24-alpine \
|
||||
# npx shadcn@latest add dialog
|
||||
|
||||
# แล้ว commit
|
||||
# git add components/ui/dialog.jsx
|
||||
# git commit -m "Add dialog component"
|
||||
Reference in New Issue
Block a user