프론트는 1개, 백엔드는 2개?

회사 내 서비스의 어드민 프로젝트가 있는데, 어드민도 서비스 단위로 생성되있지 않고
2개 서비스를 한개의 프로젝트로 개발해놓았다.

그래서 추가 개발이 있을 때, 사이드 이펙트도 터지고 불필요한 검수도 하게 되고
여러모로 번거로움이 있어 프로젝트를 분리하게 되었다.

정말 간단한 어드민 페이지로, 프론트는 그대로 1개
백엔드는 서비스 단위로 2개로 분리했다. 어떻게?

1. 백엔드 분리

1. jwt 로 로그인 검증을 하는 프로젝트로 security에 대한 로직은 두개 프로젝트에 모두 존재하고,
   대신 로그인에 관련된 컨트롤러는 기존 프로젝트에 두었다.
2. 그리고 충돌되지 않도록 새로운 미사용 포트를 잡아주면 끝!

2. 프론트 연결

프론트는 vuejs를 사용중이고, 기존에는 서버로 프록시하는 주소가 다 하나의 port로 요청되고,
url 주소의 첫 경로가 /api로 시작되었기 때문에 1개의 프록시만 설정하면 되었는데
포트가 분리되면서 이에 대한 정보를 추가해야 한다.

//vite.config.ts
...
server: {
    proxy: {
    //1번 서비스
      "/api/admin/aaa": {
        target: 'http://localhost:8050', 
        changeOrigin: true,
        secure: false,
        // rewrite: (path) => path.replace(/^\/api/, '')
      },


      //2번 서비스
      "/api/admin/bbb": {
        target: 'http://localhost:8060',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api\/admin\/bbb/, '/api/admin/bbb'),
      }
    }
  },
  ...

rewrite는 생략해도 되는 내용
생각보다 쉽당!