chore: Vite 빌드 설정 및 프로젝트 구조 개선

- esbuild drop 옵션으로 빌드 시 console/debugger 자동 제거
- 개발용 폴더(publish, component/wrap) 빌드 시 제외
- 프록시 설정 추가 (signal-api, ship/image, tracks)
- index.html root 이동 (public/ → root)
- 의존성 업데이트

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HeungTak Lee 2026-02-05 06:35:31 +09:00
부모 8292251758
커밋 c123f234f2
7개의 변경된 파일1869개의 추가작업 그리고 13512개의 파일을 삭제

7
.gitignore vendored
파일 보기

@ -23,6 +23,8 @@ npm-debug.log*
# Claude # Claude
.claude/ .claude/
*.md
# TypeScript files (메인 프로젝트 참조용, 빌드/커밋 제외) # TypeScript files (메인 프로젝트 참조용, 빌드/커밋 제외)
**/*.ts **/*.ts
**/*.tsx **/*.tsx
@ -30,4 +32,7 @@ npm-debug.log*
# !**/*.d.ts # !**/*.d.ts
# Publish 폴더 (퍼블리시 원본 참조용, 빌드/커밋 제외) # Publish 폴더 (퍼블리시 원본 참조용, 빌드/커밋 제외)
src/publish/ src/publish/
nul
확인요청.txt

파일 보기

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GIS 함정용</title> <title>GIS 함정용</title>
<!-- Vite가 빌드 시 '/'로 시작하는 경로에 base를 자동 적용 -->
<link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/common.css"> <link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/font.css"> <link rel="stylesheet" href="/css/font.css">

15260
package-lock.json generated

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다. Load Diff

파일 보기

@ -7,12 +7,16 @@
"dev": "vite --port 3000", "dev": "vite --port 3000",
"build": "vite build", "build": "vite build",
"build:dev": "vite build --mode dev", "build:dev": "vite build --mode dev",
"build:prod": "vite build --mode prod", "build:qa": "vite build --mode qa",
"build:prod": "vite build",
"preview": "vite preview --port 3000", "preview": "vite preview --port 3000",
"preview:dev": "vite preview --mode dev --port 3000",
"preview:qa": "vite preview --mode qa --port 3000",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0" "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0"
}, },
"dependencies": { "dependencies": {
"@deck.gl/core": "^9.2.6", "@deck.gl/core": "^9.2.6",
"@deck.gl/extensions": "^9.2.6",
"@deck.gl/layers": "^9.2.6", "@deck.gl/layers": "^9.2.6",
"@stomp/stompjs": "^7.2.1", "@stomp/stompjs": "^7.2.1",
"axios": "^1.4.0", "axios": "^1.4.0",
@ -22,6 +26,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.30.3", "react-router-dom": "^6.30.3",
"sockjs-client": "^1.6.1",
"zustand": "^4.5.2" "zustand": "^4.5.2"
}, },
"devDependencies": { "devDependencies": {

파일 보기

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>GIS 함정용</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<!-- <link rel="stylesheet" href="css/layout.css"> -->
<script src="js/contents.js" defer></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="js/jquery-1.12.3.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

파일 보기

@ -9,8 +9,13 @@ import 'ol/ol.css';
// //
import './scss/global.scss'; import './scss/global.scss';
// (: '/kcgv', '' )
// Vite import.meta.env.BASE_URL vite.config.js base
// basename trailing slash ('' '/kcgv')
const basename = import.meta.env.BASE_URL.replace(/\/$/, '');
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter> <BrowserRouter basename={basename}>
<App /> <App />
</BrowserRouter> </BrowserRouter>
); );

파일 보기

@ -1,10 +1,44 @@
import { defineConfig, loadEnv } from 'vite'; import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import path from 'path';
export default ({ mode }) => { export default ({ mode, command }) => {
const env = loadEnv(mode, process.cwd(), ''); const env = loadEnv(mode, process.cwd(), '');
// 환경 판별
// - development: 로컬 개발 환경 (yarn dev)
// - dev: 개발서버 배포 환경 (yarn build:dev)
// - qa: QA 환경 (yarn build:qa)
// - production: 프로덕션 환경 (yarn build, yarn build:prod)
const isLocalDev = mode === 'development';
const isDev = mode === 'dev';
const isQA = mode === 'qa';
const isProd = !isLocalDev && !isDev && !isQA; // production 또는 기타 모드
const isBuild = command === 'build';
// 배포 경로 설정 (예: '/kcgv/', '/' 등)
// 로컬 개발 모드(development)에서는 항상 '/' 사용
// 빌드 모드(dev, qa, prod)에서는 VITE_BASE_URL 사용
const base = isLocalDev ? '/' : (env.VITE_BASE_URL || '/');
console.log(`[Vite] Mode: ${mode}, Command: ${command}, Base: ${base}, isLocalDev: ${isLocalDev}`);
// 빌드 시 제외할 폴더 패턴 (로컬 개발 모드 제외)
// - publish: 퍼블리싱 미리보기 (개발용)
// - component/wrap: 레거시 퍼블리시 컴포넌트
// 참고: tracking 폴더의 TS 파일은 JS 파일이 우선 사용되므로 자동 제외됨
const excludePatterns = isBuild && !isLocalDev
? [
/[/\\]publish[/\\]/,
/[/\\]component[/\\]wrap[/\\]/,
]
: [];
return defineConfig({ return defineConfig({
base,
define: {
global: 'globalThis', // sockjs-client/stompjs용 global polyfill
},
server: { server: {
host: true, host: true,
port: 3000, port: 3000,
@ -29,6 +63,20 @@ export default ({ mode }) => {
secure: false, secure: false,
rewrite: (path) => path.replace(/^\/signal-api/, ''), rewrite: (path) => path.replace(/^\/signal-api/, ''),
}, },
// 선박 이미지 (국기, 선종 아이콘)
// 참조: mda-react-front/vite.config.ts - /ship/image 프록시
'/ship/image': {
target: env.VITE_API_URL || 'http://10.26.252.39:9090',
changeOrigin: true,
secure: false,
},
// 항적 조회 API (별도 서버)
// 참조: mda-react-front/vite.config.ts - /api/v2/tracks 프록시
'/api/v2/tracks': {
target: env.VITE_TRACK_API || 'http://10.26.252.51:8090',
changeOrigin: true,
secure: false,
},
// API 서버 // API 서버
'/api': { '/api': {
target: env.VITE_API_URL || 'http://localhost:8080', target: env.VITE_API_URL || 'http://localhost:8080',
@ -37,12 +85,41 @@ export default ({ mode }) => {
}, },
}, },
}, },
plugins: [react()], plugins: [
react(),
// 빌드 시 개발용 폴더 제외 플러그인 (로컬 개발 모드 제외)
isBuild && !isLocalDev && {
name: 'exclude-dev-folders',
resolveId(source, importer) {
// 제외 패턴에 매칭되는 import를 빈 모듈로 대체
const normalizedSource = source.replace(/\\/g, '/');
for (const pattern of excludePatterns) {
if (pattern.test(normalizedSource)) {
return { id: 'virtual:empty-module', moduleSideEffects: false };
}
}
return null;
},
load(id) {
if (id === 'virtual:empty-module') {
return 'export default null;';
}
return null;
},
},
].filter(Boolean),
resolve: { resolve: {
alias: { alias: {
'@': '/src', '@': '/src',
}, },
}, },
// 빌드 시 console.log, debugger 제거 (로컬 개발 모드 제외)
// 개발서버(dev), QA(qa), 프로덕션(prod) 빌드에서만 적용
esbuild: isBuild && !isLocalDev
? {
drop: ['console', 'debugger'],
}
: {},
build: { build: {
outDir: 'dist', outDir: 'dist',
cssCodeSplit: true, cssCodeSplit: true,