팀 백설공주의 사보타지 프로토타입 구현 프로젝트 ^_^
-> 배포된 링크는 여기!

🗓️ 프로젝트 기간 : 2025.04.15~ 2025.06.10
👥 참여 인원 : 7명
🖥️ 플랫폼 : 웹 (safari)

• Project Charter : 프로젝트의 목적, 범위, 주요 이해관계자, 일정, 예산 등을 간략히 요약한 문서입니다.

• SRS : 시스템이 가져야 할 기능/비기능 요구사항들을 정리합니다.

• 활동 보고서 : 스프린트 회고 및 피드백을 기록하였습니다.

• API 명세 : HTTP/WebSocket API 설명입니다.

• Git Convention : 깃허브 협업에 사용된 표준화된 기록 방식입니다.

• QA/QC : 품질 확보를 위해 여러 시나리오 상황에서의 테스트 결과입니다.

• API 명세서 : HTTP/WebSocket API 명세가 정리되어 있습니다.

• CI/CD : 자동회된 빌드/배포 파이프라인입니다.

• FIGMA : 프로토타입 디자인이 그려져 있습니다.

• JIRA : 프로젝트를 어떻게 진행했는지 관리 과정을 볼 수 있습니다.

* 단위 및 통합 테스트 코드는 각자의 로컬 환경에서만 테스트를 진행하였으며, GitHub에는 업로드되지 않았음을 참고해 주시기 바랍니다.

테스트 진행 전, 프로토타입인 만큼 웹 페이지 새로고침, 앞/뒤로가기 기능은 삼가주시길 바랍니다!
사크릿 창에서 테스트 하는 것을 권장드립니다.

(프론트 코드가 있는 폴더에서 진행)

1. 현재 프로젝트의 package.json에 명시된 모든 패키지 설치

   npm i

2. vite.confif.ts 에 server 부분 추가

   바이트 서버 호스트 추가: 개발 용도의 서버

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react-swc'
   import tailwindcss from '@tailwindcss/vite'
   import biomePlugin from "vite-plugin-biome"
   import tsconfigPaths from "vite-tsconfig-paths"
   
   // https://vite.dev/config/
   export default defineConfig({
     plugins: [
       react(),
       tailwindcss(),
       biomePlugin({
         mode: 'lint',
         files: './src',
       }),
       tsconfigPaths(), 
     ],
     server: {
         allowedHosts: ['server.snowhite-hyu.local'],
     },
     build: {
       rollupOptions: {
         output: {
           manualChunks(id: string) {
             if (id.includes("axios")) {
               return "@network";
             }
             if (id.includes("node_modules")) {
               return "@vendor";
             }
           },
         },
       },
     },
   })

3. .env.dev 작성

   vite_api_base_url : api 요청을 보내는 주소

   vite_asset_base_url : cdn

   vite_ws_base_url : websocket 요청을 보내는 주소

   content 전송 네트워크. 정적 데이터를 동적 데이터로 가져옴

   VITE_API_BASE_URL=https://server.snowhite-hyu.local/api
   VITE_ASSET_BASE_URL=http://127.0.0.1:8080
   VITE_WS_BASE_URL=wss://server.snowhite-hyu.local/ws

4. 프론트 실행

   npm run dev

(백엔드 코드가 있는 폴더에서 진행)

아래 환경변수를 설정하여 백엔드 코드 실행

로컬에 MySQL, Redis가 설치되어 있는 것을 전제로 함

# Profile
PROFILE=local

# DB
MYSQL_URL={로컬 DB URL}
MYSQL_USERNAME={로컬 MYSQL USERNAME}
MYSQL_PASSWORD={로컬 MYSQL PASSWORD}

# JPA
JPA_DDL=create

# REDIS
REDIS_HOST=localhost
REDIS_PORT=6379

# JWT
JWT_SECRET=qhI6Q1ruJiuFxDVFVjF8vswHPfK8B/Dz5mkhY+0+bug\=

(caddy 파일에서 진행)

1. Caddy 설치

   https://caddyserver.com/download

   • 실행파일로 만들기 (caddy_darwin_arm64 는 다운받은 caddy 이름)

     chmod +x caddy_darwin_arm64

   • 실행권한 주기

     sudo xattr -cr caddy_darwin_arm64

   • caddy 폴더 만들어서 위 파일을 넣기

     mkdir caddy

2. Caddyfile 생성

    server.snowhite-hyu.local {
    	tls internal
    	reverse_proxy /api/* localhost:8080
    	reverse_proxy /ws/* 127.0.0.1:8080 {
    		header_up Connection "Upgrade"
    		header_up Upgrade "websocket"
        	}
    	reverse_proxy /* localhost:5173
    }
   

3. caddy 실행

   ./caddy_darwin_arm64 run --config Caddyfile

(맥 설정이기 때문에 어디서든 진행 가능)

1. /etc/hosts 파일에 해당 도메인주소를 127.0.0.1로 설정

   server.snowhite-hyu.local 의 ip 가 127.0.0.1 라는 것을 알려줌

   127.0.0.1 server.snowhite-hyu.local

아래 페이지에서 실행 가능
server.snowhite-hyu.local