Merge pull request #100 from MBTips/dev

3차 배포 Test (Dev -> Main)

Author: Soohyuniii

.github/workflows/ci.yml

@@ -3,7 +3,8 @@ name: 빌드 자동화
 on:
   push:
     branches:
-      - dev
+      - main
+      - feat/cicd
 
 jobs:
   build:
@@ -13,13 +14,36 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
 
-      - name: Set up Node.js (또는 다른 언어 환경)
+      - name: Set up Node.js (언어 환경)
         uses: actions/setup-node@v2
         with:
           node-version: '20'  
 
       - name: Install dependencies
-        run: npm install  
+        run: |
+          npm install
+          npm install tailwindcss@latest postcss@latest autoprefixer@latest
+          npm install --save-dev @types/node
+
 
       - name: Run build
-        run: npm run build  # 또는 프로젝트에 맞는 빌드 명령어
+        run: npm run build --verbose # 프로젝트에 맞는 빌드 명령어
+
+      - name: Docker build & push
+        run: |
+          docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+          docker build -t ${{ secrets.DOCKER_USERNAME }}/embitips_front .
+          docker push ${{ secrets.DOCKER_USERNAME }}/embitips_front
+      
+      - name: Deploy to GCP
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.HOST_PROD }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.PRIVATE_KEY }}
+          script: |
+            sudo docker stop embitips_front || true
+            sudo docker rm embitips_front || true
+            sudo docker pull ${{ secrets.DOCKER_USERNAME }}/embitips_front
+            sudo docker run -d -p 3000:3000 --name embitips_front ${{ secrets.DOCKER_USERNAME }}/embitips_front
+            sudo docker image prune -f

Dockerfile

@@ -0,0 +1,14 @@
+# 1. Node.js 환경에서 빌드
+FROM node:20-alpine
+WORKDIR /app
+
+COPY package.json .
+RUN npm install
+COPY . .
+
+RUN npm run build
+
+EXPOSE 3000
+
+# 🚀 컨테이너를 계속 유지하도록 추가
+CMD ["npm", "run", "start"]

package.json

@@ -7,7 +7,8 @@
     "dev": "vite --mode development",
     "build": "vite build --mode production",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "vite --port 3000"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.3",

src/components/Indicator.tsx

@@ -10,6 +10,7 @@ const Indicator = ({ order, setOrder }: IndicatorProps) => {
     <div className="flex gap-3">
       {[0, 1, 2].map((el) => (
         <button
+        key={el}
           onClick={() => setOrder(el)}
           className={cls(
             "bg-white rounded-full w-2 h-2",

vite.config.ts

@@ -12,6 +12,14 @@ export default defineConfig(({ mode }: { mode: string }) => {
 
   return {
     server: {
+      port: 3000,
+      host: true, // 외부에서 접속 가능하도록 설정
+      strictPort: true,
+      allowedHosts: ["mbtips.kr"],
+      hmr: {
+        host: "mbtips.kr",
+        protocol: "wss"
+      },
       https: isProduction
         ? undefined // 배포 환경에서는 HTTPS를 비활성화 (Nginx가 처리)
         : {