Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

점진적인 레거시 웹 애플리케이션 개선 과정

8,034 views

Published on

지난 1년 6개월간 배민찬 레거시 시스템을 개선하는 과정에서 주어졌던 고민거리 생각했던 아이디어 만들었던 결과물을 공유합니다.

Published in: Software
  • Be the first to comment

점진적인 레거시 웹 애플리케이션 개선 과정

  1. 1. ✔ ✔ (customizing) ✔ , 5 ✔ (Amazon Web Service)
  2. 2. legacy.php { HTML += CSS += JAVASCRIPT += PHP += SQL }
  3. 3. STRANGLER FACADE LEGACY MODERN STRANGLER FACADE MODERN LEGACY MODERN STRANGLER FACADE
  4. 4. 
   Backend Frontend
  5. 5. Embedded servlet containers(undertow.io) jOOQ 3.xSpring MVC 4.x Spring Boot 1.5.x, Spring Framework 4.x, Spring Cloud AWS 1.2.x  BackendAWS Elastic Beanstalk / JVM(Java 1.8) Presentation Application Business (Domain) Data Access
  6. 6.  Backend Frontend 
 
  7. 7. 
   Backend Frontend
  8. 8. RPC Stub RPC Server SHARED LIBRARY
  9. 9. HTTP Client HTTP Server - (RESOURCE) - URI - (Verb) - HTTP Method - (Representations)
  10. 10. TWELVE-FACTOR APP METHODOLOGY
  11. 11. . . . . , , . (Codebase): . (Dependencies): . (Config): . (Backing services): . , , (Build, Release, Run): , . (Processes): . (Port binding): . (Concurrency): . (Disposability): . / (Dev/Prod parity): , . (Logs): . (Admin Process): (admin/management) .
  12. 12. Backend Frontend 
  function getUsableMileage(){ if (FeatureToggle::create()->isEnable(FeatureToggle::USE_BE_MILEAGE)) { // Backend } // return $usable_mileage; } https://martinfowler.com/articles/feature-toggles.html 
  13. 13.  API GATEWAY Backend Frontend 
 
  14. 14. Eureka Client (service discovery) Ribbon (load balancer) Zuul Proxy (edge service) Eureka Server Hystrix Dashboard, Turbine Hystrix
 (circuit breaker)
  15. 15. http://woowabros.github.io/experience/2017/08/21/hystrix-tunning.html
  16. 16. http://woowabros.github.io/experience/2018/06/07/vue-story-of-baminchan.html
  17. 17.  API GATEWAY Backend Frontend . .
  18. 18. legacy.php { require_once '/common/config.php'; require '/common/init.php'; include 'header'; include 'view'; include 'footer'; } Frontend
  19. 19.  API GATEWAY
  20. 20.  API GATEWAY
  21. 21.  API GATEWAY
  22. 22. babel(ES6), sass, webpack Node.js v8.x http-proxy, requestExpress.js, Handlebars Vue.js v2.x axios gradle, babel(ES6), sass, webpack Java 1.8, Node.js v8.x Spring Cloud NetflixSpring MVC, Thymeleaf Vue.js v2.x axios Spring Boot 1.5.x
  23. 23. babel(ES6), sass, webpack Node.js v8.x http-proxy, requestExpress.js, Handlebars Vue.js v2.x axios gradle, babel(ES6), sass, webpack Java 1.8, Node.js v8.x Spring Cloud NetflixSpring MVC, Thymeleaf Vue.js v2.x axios Spring Boot 1.5.x
  24. 24. babel(ES6), sass, webpack Node.js v8.x http-proxy, requestExpress.js, Handlebars Vue.js v2.x axios gradle, babel(ES6), sass, webpack Java 1.8, Node.js v8.x Spring Cloud NetflixSpring MVC, Thymeleaf Vue.js v2.x axios Spring Boot 1.5.x
  25. 25. https://github.com/arawn/continual-improve-legacy-web
  26. 26. ORDER SYSTEM [ WEB ]
 USER-SERVICE API GATEWAY PRODUCT SYSTEM SCM SYSTEM EXTERNAL SYSTEMS 
 
 MDM SYSTEM[ WEB ]
 BACK-OFFICE
  27. 27. ORDER SYSTEM [ WEB ]
 USER-SERVICE API GATEWAY PRODUCT SYSTEM SCM SYSTEM EXTERNAL SYSTEMS 
 
 MDM SYSTEM[ WEB ]
 BACK-OFFICE
  28. 28. ORDER SYSTEM PRODUCT SYSTEM SCM SYSTEM EXTERNAL SYSTEMS 
 
 MDM SYSTEM local.baeminchan.com dev.baeminchan.com test.baeminchan.com staging.baeminchan.com production.baeminchan.com
  29. 29. local.baeminchan.com dev.baeminchan.com test.baeminchan.com staging.baeminchan.com production.baeminchan.com Application Code https://12factor.net/config
  30. 30. └── resources ├── application.yml # ├── application-local.yml # ├── application-dev.yml # ├── application-test.yml # ├── application-staging.yml # ├── application-production.yml # └── application-ec2.yml # AWS EC2 > java -jar application.jar --spring.profiles.active=dev,ec2 + OS environment variables (AWS Elastic Beanstalk) { export DB_USERNAME="order_service" export DB_PASSWORD="7%wo9;ttArRYMfYp" } https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-external-config.html
  31. 31. AWS Elastic Beanstalk { WEB UI } AWS EC2 { SSH } AWS LAMBDA { WEB UI } WEB APP BATCH APP SERVERLESS APP
  32. 32. https://projects.spring.io/spring-cloud/
  33. 33. SERVICE#1 Config Server  SERVICE#2 SERVICE#3 Config Repository Config Client Config Client Config Client
  34. 34. SERVICE#1 Config Server  Config Repository Config Client └── resources ├── application.yml # Spring Boot └── bootstrap.yml # Spring Cloud > service#1.jar spring: application.name: application cloud.config.uri: https://config.arawn.io
  35. 35. Service discovery and configuration management with Apache Zookeeper. Service discovery and configuration management with Hashicorp Consul. Centralized external configuration management backed by a git repository. The configuration resources map directly to Spring `Environment` but could be used by non-Spring applications if desired.
  36. 36. Consul Server (Cluster) Consul Server (Cluster) SERVICE#1 Consul Server (Cluster)  SERVICE#2 SERVICE#3 Git Repository Consul Client Consul Client Consul Template Jenkins application.yml https://www.consul.io DNS (load balancer)
  37. 37. https://github.com/hashicorp/consul-template Consul Server (Cluster) Consul Server (Cluster) SERVICE#1 Consul Server (Cluster)  SERVICE#2 SERVICE#3 Git Repository Consul Client Consul Client Consul Template Jenkins application.yml DNS (load balancer)
  38. 38. datasource: username: '{cipher}65794a6492kfc627782d59534d4845355167' password: '{cipher}6575f2d938928525976712e6d7a679616641' AWS Key Management Service AWS LAMBDA Consul Server (Cluster) SERVICE#1  Git Repository Consul Client Jenkins application.yml DNS (load balancer)
  39. 39. ORDER SYSTEMUSER SERVICE API GW PRODUCT SYSTEM SCM SYSTEM EXTERNAL SYSTEMS 
 MDM SYSTEMBACK-OFFICE SCM SYSTEM
  40. 40. ORDER SYSTEMUSER SERVICE API GW PRODUCT SYSTEM SCM SYSTEM EXTERNAL SYSTEMS 
 MDM SYSTEMBACK-OFFICE SCM SYSTEM
  41. 41. ✔ (strangler patterns) ✔ (strangler application) ✔ Refactoring a Monolith into Microservices ✔ API ✔ Pattern: API Gateway / Backend for Front-End ✔ Netflix Zuul : Importance of Reverse Proxy in Microservices Architecture ✔ Cloud Native Java ✔ The Twelve-Factor app (12 )

×