React 및 Azure 앱 구성을 위한 기능 플래그 후크를 빌드해 봅시다.

블로그

내가 사랑하는 두 가지가 있는데, 마이크로소프트 애저 (내 이동 클라우드) 및 리액트.js 확장 가능한 웹 애플리케이션 구축을 위한

최근에 내 앱에 동적 구성을 추가해야 할 필요성을 발견했고 이를 탐색할 기회로 보았습니다. Azure 앱 구성 서비스 더 자세하게.

각도 cli 생성 구성 요소

Azure 앱 구성이란 무엇입니까?

보완 Azure 키 자격 증명 모음 (응용 프로그램 비밀을 저장하는 데 사용됨) 앱 구성을 사용하면 다음 시나리오를 더 쉽게 구현할 수 있습니다.

  • 다양한 환경 및 지역에 대한 계층적 구성 데이터의 중앙 집중식 관리 및 배포
  • 애플리케이션을 재배포하거나 다시 시작할 필요 없이 애플리케이션 설정을 동적으로 변경
  • 실시간으로 기능 가용성 제어

빌드하자!

대본: 랜딩 페이지가 있고 이 랜딩 페이지 상단에는 다음과 같은 간단한 무시 가능한 배너 알림이 있습니다.

방문 페이지에 표시되는 경고

내 목표: 기능 플래그와 동적 구성을 활용하여 다음을 수행하고 싶습니다.

이상한 이모티콘 찾기
  1. 사용자에게 시스템 메시지를 전달하고 싶을 때마다 이 경고를 표시합니다.
  2. 내가 전달하고자 하는 메시지를 반영하도록 이 경고의 텍스트를 변경하십시오.

0단계: Azure에서 앱 구성 서비스 만들기

간결함을 위해 Azure에서 App Configuration Service를 이미 만들었다고 가정합니다. 이 경우 다음으로 이동하십시오. 설정 > 액세스 키 기본 읽기 전용 복사 연결 문자열 나중에.

1단계: 기능 플래그 및 구성 생성

  1. 다음으로 이동합니다. 기능 관리자 클릭 추가하다 새 플래그를 생성합니다.

2. 다음 속성을 추가하고 플래그를 활성화한 후 다음을 클릭합니다. 저장을 신청합니다.

3. 다음으로 이동합니다. 구성 탐색기 그리고 선택 창조하다 새 키-값 구성을 추가합니다(주의: Key Vault 비밀을 참조하는 옵션도 있지만 React가 클라이언트 측에서 이를 노출할 수 있음을 기억하십시오).

아인슈타이늄(emc2)

4. 다음 구성 세부 정보를 추가하고 다음을 클릭합니다. 적용하다

2단계: NPM 패키지 설치

3단계: useFeatureFlag 후크 만들기

React 프로젝트에서 useFeatureFlag.js 다음 코드 조각을 붙여넣습니다.

#hooks #feature-flags #react #azure

로데이터사이언스닷컴

React 및 Azure 앱 구성을 위한 기능 플래그 후크를 빌드해 봅시다.

내가 좋아하는 두 가지가 있습니다. Microsoft Azure(클라우드로 이동)와 확장 가능한 웹 앱 구축을 위한 React.js입니다.