moddo-frontend/vite.config.ts at develop · moddo-kr/moddo-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { VitePWA } from 'vite-plugin-pwa';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const parsedServerUrl =
    env.VITE_SERVER_URL && URL.canParse(env.VITE_SERVER_URL)
      ? new URL(env.VITE_SERVER_URL)
      : null;
  // Storybook 빌드인지 확인
  const isStorybook = process.env.STORYBOOK === 'true';

  return {
    optimizeDeps: {
      include: ['react-toastify'], // react-toastify를 의존성에 포함시켜 번들링을 보장
    },
    plugins: [
      react(),
      svgr({
        svgrOptions: {
          icon: true,
        },
      }),
      // Storybook 빌드가 아닐 때만 VitePWA 플러그인 적용
      !isStorybook &&
        VitePWA({
          registerType: 'autoUpdate',
          strategies: 'generateSW',
          includeAssets: [
            '/pwa/favicon.ico',
            '/pwa/apple-touch-icon.png',
            '/pwa/mask-icon.svg',
          ],
          /** @Todo 서비스의 기획 및 디자인에 따라 manifest 설정 바꾸기 */
          manifest: {
            name: '모또(MODDO)',
            short_name: '모또',
            description: '즐거운 만남, 정산까지 즐겁게! 모또',
            theme_color: '#ffffff',
            background_color: '#ffffff',
            display: 'standalone', // 독립형 앱처럼 실행
            lang: 'ko',
            icons: [
              {
                src: '/pwa/pwa-64x64.png',
                sizes: '64x64',
                type: 'image/png',
              },
              {
                src: '/pwa/pwa-192x192.png',
                sizes: '192x192',
                type: 'image/png',
              },
              {
                src: '/pwa/pwa-512x512.png',
                sizes: '512x512',
                type: 'image/png',
                purpose: 'any',
              },
              {
                src: '/pwa/maskable-icon-512x512.png',
                sizes: '512x512',
                type: 'image/png',
                purpose: 'maskable',
              },
            ],
          },
          devOptions: {
            enabled: true, // 개발 모드에서 PWA 활성화
            type: 'module', // Service Worker 파일 타입
          },
          /** 최신 상태가 바로 반영되도록 service worker 캐시 설정 변경 */
          workbox: {
            maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10MB로 설정 (기본값은 2MB)
            skipWaiting: true,
            clientsClaim: true,
            runtimeCaching: [
              {
                urlPattern: /\.(?:js|css|png|jpg|jpeg|svg)$/,
                handler: 'StaleWhileRevalidate', // 네트워크를 먼저 시도
                options: {
                  cacheName: 'static-assets',
                  expiration: {
                    maxEntries: 60, // 최대 캐시 항목 수
                    maxAgeSeconds: 30 * 24 * 60 * 60, // 30일
                  },
                },
              },
              /** 사이트맵이 서비스워커에 캐시되지 않도록 설정 */
              {
                urlPattern: /^https:\/\/www\.moddo\.kr\/sitemap\.xml$/,
                handler: 'NetworkOnly', // 캐시하지 않고 항상 네트워크 요청
                options: {
                  cacheName: 'sitemap-no-cache',
                },
              },
            ],
          },
        }),
    ],
    resolve: {
      alias: [{ find: '@', replacement: '/src' }],
    },
    server: {
      host: '0.0.0.0',
      port: 3000,
      ...(parsedServerUrl && {
        proxy: {
          '/api/v1': {
            target: parsedServerUrl.origin,
            changeOrigin: true,
            cookieDomainRewrite: { '*': 'localhost' },
          },
        },
      }),
    },
  };
});