OpenCSP Console로 VM 생성해보기

2026.04.13 - [프로젝트/OpenCSP] - [OpenCSP] Index - Provisioning Flow

[OpenCSP] Index - Provisioning Flow

 

---

 

이전 글에서 API 요청만으로 실제 리소스를 구성하는 걸 성공했다.

이제 프론트에서 사용자 값 넣고, 백엔드에서 그 값들을 양식만 잘 맞춰서 k3s에 요청보내면 항상 일정한 리소스가 생성된다. (테라폼 기반이기 때문에 멱등성)

 

이제 아래 이미지의 빨간 박스 부분의 동작을 개발하고 테스트해보려고 함

 

가장 왼쪽의 프론트엔드는 Next.js 16, 백엔드는 자바 스프링 부트로 되어 있고 인증은 다른 플로우를 사용해서 IAM과 진행한다. (나중에 포스팅 예정)

 

백엔드 구조

Java Spring Boot 3.5.x를 사용중이고 여기서 k8s로 요청 보내려면 여러 방법이 있다.

 

처음엔 Fabric8:Kubernetes Client을 사용해서 개발했었는데,

이전 글들에서 테스트하면서 key-value 구조의 vm 정보를 담았던 자유 형식 필드(additionalProperties) 부분을 Map<String, Object>로 다뤘는데, 이 부분을 역직렬화 시킬 때 Fabric8의 ObjectMapper를 사용하면 원본 타입을 못찾고 이상한 형태로 나와 JSON Parse 에러가 나는 문제가 있었다. 

그래서 Spring 기본 ObjectMapper를 사용해서 원본 JSON을 그대로 다루도록 WebClient로 직접 호출했음

 

아무튼 위의 과정은 잘 동작했고 아래처럼 스웨거로 API를 보내면

응답 잘 오고

 

 

CrName으로 상태를 조회하면

이것도 잘 된다. 

 

 

그리고 실제 pve에도 잘 위에 정의한 스펙대로 잘 생성됐다. 

 

이제 백엔드 API도 잘생성됐으니까 프론트에서 양식만 잘 맞춰서 요청보내주면 끝인 듯

 

 

프론트엔드 구조

 

프론트는 Next.js로 구성했고 UI는 나름 일관성을 주기위해 tailwind 기반의 커스텀 UI 패키지를 만들어서 npm에 배포했다. 

(관련 링크 : https://ui-storybook-ruddy.vercel.app/?path=/docs/patterns-simplecarousel--docs)

 

근데 아직은 개발중이라 전체 UI 컴포넌트가 위에 패키지를 사용하진 않고, 일부 기능이 필요한 경우는 console/fe의 components에 별도로 정의해서 사용하고 나중에 패키지로 옮기는 방식으로 작업할 예정

 

우선 지금 개발 중인 UI는 아래처럼 되어 있다. (변경될 수 있음)

 

인스턴스 페이지인데 추가 버튼 누르면

 

이렇게 채워주고 시작 눌러주면 아래처럼 백엔드가 폴링으로 테라폼 CR 상태를 체크하면서 DB를 업데이트 해준다.

 

눌러서보면 이렇게 세부 정보도 나옴

 

아래는 테라폼 상태고

 

pve에서 확인해보면

 

잘 생성된거 같다.

---

참고로 백엔드로 요청하는 부분은 BFF(Backend for Frontend) 패턴을 사용했다. 

API Proxy를 두고 해당 경로로 fecth하면 서버 사이드에서 환경변수나 세션에 저장된 토큰 등 필요한 정보를 가져와서 백엔드로 요청을 보내준다. 

서버 사이드에서 동작하기 때문에 클라이언트 사이드에 토큰이 노출되지 않고 백엔드 엔드포인트를 직접 노출하지 않아 보안성이 높아졌고, CORS 문제도 구조적으로 해결된다.