아래 장표는 배민찬 레거시 웹 애플리케이션을 개선하는 과정에서 나온 아이디어 중 하나이다. 스트랭글러 패턴을 기반으로 구상된 아이디어로 새로운 웹앱이 스트랭글러 파사드(Strangler facade) 역할을 내재한 상태로 만들어지고, 리버스 프록시(Reverse Proxy)를 사용해 레거시 웹 애플리케이션과 자연스럽게 연계하는 방식으로 설계했다.
데모 프로젝트 구조는 다음과 같다.
.
├── legacy-web # Spring MVC 기반 레거시 웹 애플리케이션 (Boot 를 사용했지만, 없다고 치자!)
│ └── src
├── modern-web # Spring Boot, Spring Cloud Netflix Zuul 기반 현대적 웹 애플리케이션 + 스트랭글러 파사드 (신규 웹앱)
│ └── src
├── modern-web-client # Vue.js 기반 현대적 웹 애플리케이션 클라이언트
│ ├── node_modules
│ ├── public
│ ├── src
│ ├── babel.config.js
│ ├── package.json
│ ├── vue.config.js
│ └── yarn.lock
├── build.gradle
└── settings.gradle
현대적 웹 애플리케이션은 Spring Boot 기반으로 만들어졌다. 클라이언트에 요청이 들어오면 Spring MVC와 Thymeleaf를 통해 Vue.js로 만들어진 싱글 페이지 애플리케이션(SPA, Single Page Application)을 클라이언트에게 제공한다. 만약 해당 요청을 처리할 수 없다고 판단하면 Spring Cloud Netflix Zuul을 통해 레거시 웹 애플리케이션에 요청을 전달하고, 응답을 클라이언트에게 돌려준다.
데모 프로젝트 실행하기 위해서는 다음 환경이 필요하다.
- Java 1.8 이상
- Node 8.x 이상
- Yarn 1.9.x 이상
데모 프로젝트를 실행하는 방법은 아래와 같다. (윈도우 환경은 run.sh 파일을 참고해서 실행하길 바란다.)
> git clone [email protected]:arawn/continual-improve-legacy-web.git
> cd continual-improve-legacy-web
> ./run.sh stop && ./gradlew clean build && ./run.sh start
레거시 웹 애플리케이션에는 3개 페이지가 존재한다.
현대적 웹 애플리케이션에는 1개 페이지와 1개 API가 존재한다.
현대적 웹 애플리케이션은 /order.jsp 요청에 대해 Vue.js로 작성된 애플리케이션으로 응답하고, 그외 요청(/index.jsp, /support.jsp)은 레거시 웹 애플리케이션에게 전달한다. Vue.js로 작성된 /order.jsp에서는 API 호출 후 console.log 를 통해 출력하는 기능이 구현되어 있다.
점진적인 레거시 웹 애플리케이션 개선 과정에 대한 전체 이야기는 Presentation 에서 볼 수 있다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent