비 개발자의 Feature Flag 체험해보기

이것은 무엇인가 ( 누군가는 Feature toggle 이라고도 하네요 )

아무래도 비개발 직군이기 때문에 바로 데모 영상을 보았고 구글검색으로도 어떻게 사용하는지 찾아보았다.

어떻게 개발하느냐에 차이가 있겠지만 웹 서비스중 제목을 바꾼다던가 특정 기능을 꺼버리거나 할수있는것같다.

게임 쪽에서는 서버에서 보스나 대미지등의 계수를 조정하여 실시간으로 난이도를 조정하는것으로 사용하기도 한다.

 

비개발인데 어떻게 테스트 해볼까

모를때는 일단 CNCF Landscape에 관련 태그가 있는지 찾아보고 거기서 오픈소스 찾아서 쓴다. ( 회사에서 쓰는건 아니지만 당연히 라이센스 체크! )

아주 간단한 테스트라서 그냥 별 많아보이는거로 했다. ( Flagsmith 당첨 )

참조 : 깃허브 링크

• https://github.com/Flagsmith/flagsmith-js-examples
• https://github.com/Flagsmith/flagsmith

example 에서 next.js approuter로 하였다. ( 라이브 스트리밍 튜토리얼에 사용됨 )

인프라 만들기

개인 GCP 프로젝트에다가 인프라를 만들것이다.

필요한것은 가상머신 1대에 공인ip 그리고 도메인에 레코드 등록 정도이다.

내 친구 GPT에게 물어봐서 테라폼을 완성하고 인프라를 생성하였다.

키만들기 귀찮으니 Cloud Shell에서 작업하였다

서비스 만들기

심플하게 docker-compose 파일 보고 생성하고 포트는 80으로 바꿔서 시작하였다.

대충 계정 한개 만들고나면 시작할수있다. 

그리고 샘플 코드에서 안내된 feture 2개 만들기! ( beta_users , welcom_message )

짜잔

샘플 폴더도 실행해줘야 하지만 일부파일에 코드를 추가해야한다.

파일 : flagsmith-js-examples/nextjs-approuter/app/lib/flagsmith.ts 여기서 아래 코드를 찾아서 추가한다. 

그리고 .env 파일 에 프로젝트의 environment id를 넣어주면 끝!

export async function getFlagsmith(): Promise<IFlagsmith> {
  const defaultUser = await getDefaultUser()
  const traits = getTraits(defaultUser)

  await flagsmith.init({
    // Although this init is done on the server, the environment key is
    // public and can be accessed by the client because the key gets passed
    // with state to the client-side Provider component (it is not a secret).
    environmentID: process.env.NEXT_PUBLIC_FLAGSMITH_ENVIRONMENT_KEY || '',
    identity: defaultUser?.id,
    traits,
    // 내가 추가한 부분 
    api: 'http://내서버주소/api/v1/',
    eventSourceUrl: 'http://내서버주소/api/v1/',
  })

  return flagsmith
}

 

그리고 샘플 프로젝트 루트로가서 실행한다.

npm run dev

나오는 화면 ( 원래 가운데에 '기능 테스트 페이지' 는 없는 텍스트이다 )

 

간단한 테스트를 해보기

가운데에 나오는 웰컴 문구를 바꿔보자

아까 만든 feature를 눌러서 value를 바꾸고 update 하였다.

그리고나서 시크릿 모드에서 페이지를 새로고침 하였더니?

 

거의 바로 적용되어 웰컴 문구가 바뀌었다.

개쩌는듯...

후기

생소한거고 자세히는 알아보지 않았지만 빌드나 패치없이 특정기능을 바꾸거나 문자는 물론 숫자도 변경되는거같다.

아마도 개발할때 개발자는 힘들수 있겟지만... 빌드 횟수도 줄어들수 있을것으로도 생각된다.

너무 희망편인것 같기도 하다. ><