Develop

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+npm-debug.log
+.npm
+.nyc_output
+.coverage
+.cache
+.git
+.github
+README.md
+.env
+.DS_Store
+*.log 

.github/workflows/deploy.yml

@@ -0,0 +1,64 @@
+name: Deploy to Kubernetes
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run tests
+      run: npm run test -- --coverage --watchAll=false
+
+    - name: Build application
+      run: npm run build
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Login to Container Registry
+      uses: docker/login-action@v2
+      with:
+        registry: ${{ secrets.REGISTRY_URL }}  # Docker Registry URL
+        username: ${{ secrets.REGISTRY_USERNAME }}
+        password: ${{ secrets.REGISTRY_PASSWORD }}
+
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v4
+      with:
+        context: .
+        push: true
+        tags: ${{ secrets.REGISTRY_URL }}/trendist-frontend:${{ github.sha }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+    - name: Set up kubectl
+      uses: azure/setup-kubectl@v3
+      with:
+        version: 'latest'
+
+    - name: Configure kubectl
+      run: |
+        echo "${{ secrets.KUBE_CONFIG }}" | base64 -d > $HOME/.kube/config
+
+    - name: Update deployment
+      run: |
+        sed -i 's|leeseojung/trendist-frontend:latest|${{ secrets.REGISTRY_URL }}/trendist-frontend:${{ github.sha }}|' k8s/deployment.yaml
+        kubectl apply -f k8s/
+        kubectl rollout status deployment/trendist-frontend 

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

Dockerfile

@@ -0,0 +1,34 @@
+# Build stage
+FROM node:18-alpine as build
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source code
+COPY . .
+
+# Set environment variables for build
+ENV REACT_APP_API_BASE_URL=http://trendist.site
+ENV REACT_APP_FALLBACK_API_URL=http://trendist.site
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy build files to nginx
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy nginx configuration (optional)
+# COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port 80
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"] 

deploy.sh

@@ -0,0 +1,64 @@
+#!/bin/bash
+
+# 색상 정의
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# 환경 변수 설정 (필요에 따라 수정)
+REGISTRY_URL="leeseojung"  # Docker Hub 사용자명
+IMAGE_NAME="trendist-frontend"
+TAG="latest"
+
+echo -e "${YELLOW}🚀 TRENDIST 프론트엔드 배포를 시작합니다...${NC}"
+
+# 1. 애플리케이션 빌드
+echo -e "${YELLOW}📦 애플리케이션을 빌드 중...${NC}"
+npm run build
+
+if [ $? -ne 0 ]; then
+    echo -e "${RED}❌ 빌드에 실패했습니다.${NC}"
+    exit 1
+fi
+
+# 2. Docker 이미지 빌드
+echo -e "${YELLOW}🐳 Docker 이미지를 빌드 중...${NC}"
+docker build -t ${REGISTRY_URL}/${IMAGE_NAME}:${TAG} .
+
+if [ $? -ne 0 ]; then
+    echo -e "${RED}❌ Docker 이미지 빌드에 실패했습니다.${NC}"
+    exit 1
+fi
+
+# 3. Docker 이미지 푸시
+echo -e "${YELLOW}📤 Docker 이미지를 레지스트리에 푸시 중...${NC}"
+docker push ${REGISTRY_URL}/${IMAGE_NAME}:${TAG}
+
+if [ $? -ne 0 ]; then
+    echo -e "${RED}❌ Docker 이미지 푸시에 실패했습니다.${NC}"
+    exit 1
+fi
+
+# 4. Kubernetes에 배포
+echo -e "${YELLOW}☸️  Kubernetes에 배포 중...${NC}"
+kubectl apply -f k8s/
+
+if [ $? -ne 0 ]; then
+    echo -e "${RED}❌ Kubernetes 배포에 실패했습니다.${NC}"
+    exit 1
+fi
+
+# 5. 배포 상태 확인
+echo -e "${YELLOW}⏳ 배포 상태를 확인 중...${NC}"
+kubectl rollout status deployment/trendist-frontend
+
+if [ $? -eq 0 ]; then
+    echo -e "${GREEN}✅ 배포가 성공적으로 완료되었습니다!${NC}"
+    echo -e "${GREEN}🌐 서비스 정보:${NC}"
+    kubectl get pods -l app=trendist-frontend
+    kubectl get svc trendist-frontend-service
+else
+    echo -e "${RED}❌ 배포 확인에 실패했습니다.${NC}"
+    exit 1
+fi 

k8s/configmap.yaml

@@ -0,0 +1,102 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: trendist-frontend-config
+data:
+  REACT_APP_API_BASE_URL: "http://trendist.site"
+  REACT_APP_FALLBACK_API_URL: "http://trendist.site"
+  NODE_ENV: "production"
+  default.conf: |
+    server {
+        listen 80;
+        server_name trendist.site;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # 가장 구체적인 API 경로들을 먼저 처리
+        location /users/ {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/users/;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /global-issues {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/global-issues;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /activities/ {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/activities/;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /reviews/ {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/reviews/;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /posts/ {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/posts/;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /rankings/ {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/rankings/;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # API 프록시 설정
+        location /api/ {
+            proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/;
+            proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/ http://trendist.site/;
+        }
+
+            # OAuth 콜백 처리 
+    location /login/oauth2/code/google {
+        proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/login/oauth2/code/google;
+        proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_redirect default;
+        proxy_redirect ~^http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2\.ke\.kr-central-2\.kakaocloud\.com(.*)$ http://trendist.site$1;
+    }
+
+            # OAuth 인증 처리
+    location /oauth2/ {
+        proxy_pass http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/oauth2/;
+        proxy_set_header Host k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_redirect http://k8s-trendis-gateway-55272f9955-9df8d864228042f1945c5a7d6a1bcde2.ke.kr-central-2.kakaocloud.com/ http://trendist.site/;
+    }
+
+
+
+        # 정적 파일 서빙
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    } 

k8s/deployment.yaml

@@ -0,0 +1,43 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: trendist-frontend
+  labels:
+    app: trendist-frontend
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: trendist-frontend
+  template:
+    metadata:
+      labels:
+        app: trendist-frontend
+    spec:
+      containers:
+      - name: trendist-frontend
+        image: leeseojung/trendist-frontend:v1.1.21
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 80
+        resources:
+          requests:
+            memory: "64Mi"
+            cpu: "250m"
+          limits:
+            memory: "128Mi"
+            cpu: "500m"
+        env:
+        - name: NODE_ENV
+          value: "production"
+        envFrom:
+        - configMapRef:
+            name: trendist-frontend-config
+        volumeMounts:
+        - name: nginx-config
+          mountPath: /etc/nginx/conf.d/
+          readOnly: true
+      volumes:
+      - name: nginx-config
+        configMap:
+          name: trendist-frontend-config 

k8s/ingress.yaml

@@ -0,0 +1,26 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: trendist-frontend-ingress
+  annotations:
+    nginx.ingress.kubernetes.io/rewrite-target: /
+    # SSL 인증서가 있다면 아래 주석 해제
+    # cert-manager.io/cluster-issuer: "letsencrypt-prod"
+spec:
+  ingressClassName: nginx
+  # SSL 설정 (필요시)
+  # tls:
+  # - hosts:
+  #   - your-domain.com
+  #   secretName: trendist-tls
+  rules:
+  - host: trendist.site
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: trendist-frontend-service
+            port:
+              number: 80 

k8s/service.yaml

@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: trendist-frontend-service
+  labels:
+    app: trendist-frontend
+spec:
+  type: ClusterIP
+  ports:
+  - port: 80
+    targetPort: 80
+    protocol: TCP
+  selector:
+    app: trendist-frontend