layout: post title: asp.net legacy system에 vuejs & nodejs system 적용하기(1탄) categories: [dev] author: 노혜진 email: [email protected] date: 2021-10-29 / 2022-01-28 tag:

개요

새로운 서비스를 위해 javascript 기반 Open Source Framework을 사용하여 웹사이트를 구축하기로 하였습니다. 서비스를 새로 만들게 되면 으례 내부 운영 관리할 BackOffice도 같이 작업을 하게 되는데 여기에 문제가 있었습니다.

기존 BackOffice 개발 환경이 우리가 사용하려고 하는 개발 및 운영 환경과 매우 상이하다는 것입니다.

# Legacy 환경:
  - OS: Windows
  - Web Server: IIS
  - develop language: ASP.NET, C#, jquery
  - DB: MSSQL
  - SSR
# 신규 환경:
  - OS: LINUX
  - API Server: Node.js Express.js
  - develop language:  Vue.js, javascript
  - DB: Postgresql,
  - Search Engine: ElasticSearch
  - SPA
  - Deployment: docker

신규 서비스만 별도 BackOffice로 구성할 수도 있습니다. 그렇게 되면 로그인, 사용자 권한 관리 및 메뉴관리, 로그관리 등이 통합되지 못하고 신규로 중복된 기능을 모두 개발해야됩니다. 개발 기간 및 사용자의 편의성을 고려하여 아래의 기준에 맞추어 작업을 진행하기로 하였습니다.

- 하나의 사이트로 운영
- 사용자는 한번만 로그인(기존의 asp.NET Forms 인증을 그대로 사용).
- 사용자 메뉴별 기능별 권한 확인도 .NET에서 처리
- 웹로그 및 보안 검토를 위한 개인정보 접근 로그도 .NET 에서 기존 위치에 저장
- 화면 메뉴구성은 asp.NET에서 제어.

결론은 하나의 사이트에 다양한 개발 환경에서 구성한 비지니스 컴포넌트를 조합하는 Microservice Architecture 구조를 가지게 되어야 합니다. 우리는 기존 Legacy 시스템에 영향을 주지 않고 공통적인 비지니스 컴포넌트 기능은 그대로 활용하면서 기존의 구성에서 신규 메뉴에 추가하되 실행되는 페이지만 신규 컴포넌트로 작동합니다. 이렇게 될 경우 사용자는 BackOffice를 사용하면서도 두개의 시스템이 결합되어 있다는 것을 알지 못합니다.

기존 legacy 시스템에 새로운 개발과 운영 플랫폼을 적용하려는 경우가 있을 경우 이 자료가 도움이 되었으면 합니다.

화면 구성

Header와 메뉴 부분은 asp.net VIEW 소스로 구성하고 메뉴 선택에 따른 기능 페이지는 Vue로 구현한 javascript로 구성합니다.

deploy_screen.png