[Nuxt3] 컨테이너 배포 환경에서 메뉴 동적으로 관리하기

SI 솔루션의 특성상 잦은 변경이 발생하기 때문에, 코드 수정 없이 외부 설정을 주입해 동적으로 구성을 변경할 수 있는 방법이 필요합니다. Kubernetes 환경에서는 ConfigMap을, 도커 환경에서는 JSON 파일을 활용해 요구사항에 맞게 메뉴를 변경하도록 설정할 수 있습니다. 다만, 사용자가 URL을 통해 해당 설정 파일에 접근할 수 있다는 단점이 있습니다.

 

1. ConfigMap으로 메뉴 데이터 관리

먼저, 메뉴 구성 정보를 JSON 파일로 작성합니다. 예를 들어, 아래와 같이 menu.json 파일을 생성합니다:

[
  { "label": "Home", "icon": "home", "to": "/home", "use": true },
  { "label": "Inbox", "icon": "inbox", "to": "/inbox", "use": true },
  { "label": "Outbox", "icon": "send", "to": "/send", "use": true, "separator": true },
  { "label": "Settings", "icon": "settings", "to": "/settings", "use": true },
  { "label": "Help", "icon": "help_outline", "to": "/help", "use": true }
]

이 파일을 Kubernetes ConfigMap으로 생성합니다. 예를 들어, 아래와 같이 YAML 파일을 작성할 수 있습니다:

apiVersion: v1
kind: ConfigMap
metadata:
  name: menu-config
data:
  menu.json: |
    [
      { "label": "Home", "icon": "home", "to": "/home", "use": true },
      { "label": "Inbox", "icon": "inbox", "to": "/inbox", "use": true },
      { "label": "Outbox", "icon": "send", "to": "/send", "use": true, "separator": true },
      { "label": "Settings", "icon": "settings", "to": "/settings", "use": true },
      { "label": "Help", "icon": "help_outline", "to": "/help", "use": true }
    ]

이후 Deployment YAML에서 해당 ConfigMap을 컨테이너에 마운트합니다. 예를 들어:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nuxt-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nuxt-app
  template:
    metadata:
      labels:
        app: nuxt-app
    spec:
      containers:
        - name: nuxt-container
          image: your-nuxt-image:latest
          volumeMounts:
            - name: menu-config-volume
              mountPath: /app/config
              readOnly: true
      volumes:
        - name: menu-config-volume
          configMap:
            name: menu-config

위와 같이 설정하면, 컨테이너 내부의 /app/config/menu.json 경로에 ConfigMap의 JSON 파일이 마운트됩니다.

2. Nuxt 3에서 JSON 파일 읽어오기

Nuxt 3에서는 nuxt.config.ts 파일 내에서 Node.js의 파일 시스템 모듈을 사용해 외부에서 주입된 JSON 파일을 읽어, 런타임 구성(runtimeConfig)에 주입할 수 있습니다.

// https://nuxt.com/docs/api/configuration/nuxt-config
import { existsSync, readFileSync } from 'fs'
import { resolve } from 'path'

let menuData = [];
const menuFilePath = resolve(__dirname, 'config/menu.json'); // 마운트 경로 확인

if (existsSync(menuFilePath)) {
  try {
    const fileContent = readFileSync(menuFilePath, 'utf-8');
    menuData = JSON.parse(fileContent);
  } catch (error) {
    console.error('Error reading menu.json:', error);
  }
} else {
  console.warn('menu.json not found at', menuFilePath);
}
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  typescript: {
    typeCheck: true,
    shim: false,
  },
  modules: ["nuxt-quasar-ui"],
  runtimeConfig: {
    public: {
      menuList: menuData
    }
  }
});

이 코드는 컨테이너 내부에서 /app/config/menu.json 파일을 읽어, runtimeConfig.public.menuList에 메뉴 데이터를 저장합니다.

3. 컴포넌트에서 메뉴 데이터 사용하기

이제 컴포넌트에서는 useRuntimeConfig()를 사용해 메뉴 데이터를 가져와 사용할 수 있습니다.

<template>
  <div>
   <q-list>
      <template v-for="(menuItem, index) in menuList" :key="index">
        <q-item clickable :active="$route.path === menuItem.to" :to="menuItem.to" v-ripple>
          <q-item-section avatar>
            <q-icon :name="menuItem.icon" />
          </q-item-section>
          <q-item-section>
            {{ menuItem.label }}
          </q-item-section>
        </q-item>
        <q-separator :key="'sep' + index" v-if="menuItem.separator" />
      </template>
    </q-list>
  </div>
</template>

<script setup lang="ts">
import { useRuntimeConfig } from '#app';

interface MenuItem {
  label: string;
  icon: string;
  to: string;
  use: boolean;
  separator?: boolean;
}

const config = useRuntimeConfig();
const menuList = (config.public.menuList as MenuItem[])
  .filter(menuItem => menuItem.use);
export {
  menuList,
};
</script>

이렇게 하면, 외부에서 ConfigMap을 통해 주입된 메뉴 JSON 데이터가 컴포넌트에 동적으로 반영됩니다.