ASP.NET MVC의 점진적 Vue 3 전환을 위한 Hybrid Rendering 설계

Convert an ASP .NET MVC application to Vue JS 3 TS page-by-page

Yogesh Bhavsar2026년 4월 17일10분intermediate

AI 요약

Context

기존 운영 중인 ASP.NET MVC 애플리케이션을 한 번에 교체하기 어려운 리스크 상황 분석. 전체 시스템 중단 없이 페이지 단위로 프론트엔드 스택을 Vue JS 3로 전환하는 점진적 Migration 전략 필요.

Vite의 outDir 설정을 통한 Vue 빌드 결과물의 MVC wwwroot 폴더 내 직접 주입 구조 설계
빌드 시마다 변경되는 파일 해시값 해결을 위해 manifest: true 설정을 통한 manifest.json 기반의 에셋 매핑 체계 구축
base: '/dist/' 경로 설정을 통해 MVC 정적 파일 서빙 경로와 Vue 에셋 경로 간의 일치성 확보
onMounted 생명주기를 이용한 API 호출 방식과 Model 기반의 Props 전달 방식을 혼합하여 데이터 바인딩 유연성 확보
최종적으로 모든 페이지 전환 완료 후 Vue Router 도입을 통한 완전한 SPA 아키텍처로의 전환 경로 설계

실천 포인트

1. Vite 빌드 설정에서 `outDir`와 `base` 경로가 호스트 서버의 정적 파일 경로와 일치하는지 확인

2. 파일 해싱으로 인한 경로 깨짐 방지를 위해 `manifest.json` 활용 로직 검토

3. 점진적 전환 시 API 우선 개발 후 `onMounted`에서 호출하는 방식으로 프론트엔드 의존성 분리

4. CI/CD 파이프라인 내 Vue 빌드와 MVC 빌드 단계를 분리하여 배포 효율성 최적화

태그