Merge branch 'frontend-devops'

Author: BongSeongEun

.gitignore

@@ -21,4 +21,7 @@ DevOps/nginx/ssl/
 DevOps/.env
 
 DevOps/docker-compose.prod.yml
-DevOps/.env.prod
+DevOps/.env.prod
+DevOps/.env.dev
+
+frontend/.env.production

DevOps/.env.dev

@@ -38,9 +38,6 @@ services:
     ports:
       - "443:443"
       - "80:80"
-    env_file:
-      - .env.dev
-      - .env
     depends_on:
       - frontend
       - backend

DevOps/docker-compose.yml

@@ -1,6 +1,9 @@
 FROM nginx:stable-alpine
-WORKDIR /etc/nginx
 
-COPY default.conf.template /etc/nginx/conf.d/default.conf.template
+# nginx 설정 복사
+COPY default.conf.template /etc/nginx/conf.d/default.conf
 
-CMD ["/bin/sh", "-c", "envsubst '$$SSL_CERT_PATH $$SSL_KEY_PATH' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
+# 정적 파일은 frontend 컨테이너에서 서빙하므로 제거
+# COPY dist/ /usr/share/nginx/html
+
+EXPOSE 80 443

DevOps/nginx/Dockerfile

@@ -11,18 +11,31 @@ server {
     ssl_certificate /etc/letsencrypt/live/tukcbu.com/fullchain.pem;
     ssl_certificate_key /etc/letsencrypt/live/tukcbu.com/privkey.pem;
 
+    # API 요청을 backend로 프록시
     location /api/v1/ {
         proxy_pass http://backend:8080/api/v1/;
         proxy_set_header Host $host;
         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;
     }
 
+    # 정적 파일은 frontend 컨테이너에서 직접 서빙
     location / {
         proxy_pass http://frontend:80;
         proxy_set_header Host $host;
         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_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
+        
+        # 정적 파일 캐싱 설정
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            proxy_pass http://frontend:80;
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
     }
 }

DevOps/nginx/default.conf.template

@@ -2,9 +2,10 @@ FROM eclipse-temurin:17-jdk AS build
 
 WORKDIR /app
 
-# Gradle wrapper 복사
+# Gradle wrapper 복사 및 실행 권한 부여
 COPY gradlew .
 COPY gradle gradle
+RUN chmod +x gradlew
 
 # 소스 복사
 COPY build.gradle .
@@ -21,4 +22,5 @@ WORKDIR /app
 
 COPY --from=build /app/build/libs/*.jar app.jar
 
-ENTRYPOINT ["nohup", "java", "-jar", "app.jar"]
+EXPOSE 8080
+ENTRYPOINT ["java", "-jar", "app.jar"]

backend/Dockerfile

@@ -1,10 +1,29 @@
-FROM node:18-alpine as build
+FROM nginx:stable-alpine
+
+# Node.js 설치
+RUN apk add --no-cache nodejs npm
+
 WORKDIR /app
 
-COPY .env .env
+# .env 파일이 있는 경우에만 복사 (선택적)
+COPY .env* ./
 
+# Copy package files
 COPY package*.json ./
 RUN npm install
 
+# Copy source code
 COPY . .
+
+# 빌드 시 환경변수 설정
+ENV VITE_API_URL=/api/v1
 RUN npm run build
+
+# Copy built files to nginx directory
+RUN cp -r dist/* /usr/share/nginx/html/
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile

@@ -0,0 +1,24 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA 라우팅을 위한 설정
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 정적 파일 캐싱
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # gzip 압축
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+} 

frontend/nginx.conf

@@ -1,6 +1,7 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { useUserStore } from "../stores/userStore";
+import { API_ENDPOINTS } from "../utils/api";
 
 interface LoginParams {
     studentId: string;
@@ -14,8 +15,6 @@ export function useLogin() {
     const router = useRouter();
 
     const handleLogin = async ({ studentId = "", password = "" }: LoginParams): Promise<void> => {
-        const SERVER_URL = import.meta.env.VITE_API_URL;
-
         if (!studentId || !password) {
             errorMessage.value = "아이디와 비밀번호를 입력하세요.";
             alert(errorMessage.value);
@@ -25,7 +24,7 @@ export function useLogin() {
         const studentNumber = Number(studentId.replace(/^cbu/, ""));
 
         try {
-            const response = await fetch(`${SERVER_URL}/login`, {
+            const response = await fetch(API_ENDPOINTS.LOGIN, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",

frontend/src/hooks/useLogin.ts

@@ -0,0 +1,24 @@
+// API URL 설정
+const getApiUrl = (): string => {
+  // 환경변수가 설정되어 있으면 사용, 없으면 기본값 사용
+  const envUrl = import.meta.env.VITE_API_URL;
+  
+  if (envUrl && envUrl !== 'undefined') {
+    return envUrl;
+  }
+  
+  // 기본값: 현재 도메인의 /api/v1
+  return '/api/v1';
+};
+
+export const API_BASE_URL = getApiUrl();
+
+// API 엔드포인트들
+export const API_ENDPOINTS = {
+  LOGIN: `${API_BASE_URL}/login`,
+  SIGNUP: `${API_BASE_URL}/login/signup`,
+  MAIL_SEND: `${API_BASE_URL}/mail/send`,
+  MAIL_VERIFY: `${API_BASE_URL}/mail/verify`,
+  VERIFY_USER: `${API_BASE_URL}/verify`,
+  CHANGE_PASSWORD: `${API_BASE_URL}/change-password`,
+} as const;