feat: Dockerfile 및 GitHub Actions CI/CD 추가 (ECR 배포)

.github/workflows/ci.yml

@@ -0,0 +1,68 @@
+name: CI/CD
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+    branches: [main, dev]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npx tsc --noEmit
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
+        env:
+          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL || 'http://localhost:8080/api' }}
+          NEXT_PUBLIC_SSE_URL: ${{ secrets.NEXT_PUBLIC_SSE_URL || 'http://localhost:8080/api/stream' }}
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+
+      - name: Build, tag, and push image to ECR
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: dgu-cap-frontend
+          IMAGE_TAG: ${{ github.sha }}
+        run: |
+          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+          docker tag $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:latest
+          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+          docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest
+          echo "Image pushed: $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"

Dockerfile

@@ -0,0 +1,33 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

app/page.tsx

@@ -4,7 +4,6 @@ import { useQuery } from "@tanstack/react-query";
 import { getPods, getTickets } from "./lib/api";
 import { useAlertStore } from "./store/useAlertStore";
 import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Badge } from "../components/ui/badge";
 import {
   Table,
   TableBody,

app/pods/page.tsx

@@ -12,7 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
-import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card";
+import { Card, CardContent } from "../../components/ui/card";
 import {
   Dialog,
   DialogContent,

app/tickets/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import type { Ticket } from "../../lib/types";
 import { useParams } from "next/navigation";
@@ -49,7 +49,7 @@ export default function TicketDetailPage() {
   const id = params.id as string;
   const queryClient = useQueryClient();
 
-  const [status, setStatus] = useState<TicketStatus>("OPEN");
+  const [statusOverride, setStatusOverride] = useState<TicketStatus | null>(null);
   const [action, setAction] = useState("");
   const [memo, setMemo] = useState("");
   const [performedBy, setPerformedBy] = useState("");
@@ -60,9 +60,7 @@ export default function TicketDetailPage() {
     queryFn: () => getTicket(id),
   });
 
-  useEffect(() => {
-    if (ticket) setStatus(ticket.status);
-  }, [ticket]);
+  const status = statusOverride ?? ticket?.status ?? "OPEN";
 
   const { data: logs } = useQuery({
     queryKey: ["ticket-logs", id],
@@ -216,7 +214,7 @@ export default function TicketDetailPage() {
                 <label className="text-xs text-gray-400">상태</label>
                 <Select
                   value={status}
-                  onValueChange={(v) => setStatus(v as TicketStatus)}
+                  onValueChange={(v) => setStatusOverride(v as TicketStatus)}
                 >
                   <SelectTrigger className="bg-gray-800 border-gray-700 text-gray-200">
                     <SelectValue />

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;