JSON 스키마로 정적 웹 앱 구성 작성

이제 Azure Static Web Apps는 GA와 동시에 Azure AD 및 Facebook과 같은 외부 IdP를 사용한 로그인을 지원합니다.

인증을 위해 추가 코드를 작성할 필요는 없지만 staticwebapp.config.json 를 생성해야 합니다.

Configure Azure Static Web Apps | Microsoft Docs

Custom authentication in Azure Static Web Apps | Microsoft Docs

설명서를 읽었다면 구성 파일을 올바르게 작성하는 것이 어렵다는 것을 알았을 것입니다. 저도 그렇게 느꼈던 사람 중 하나였습니다.

JSON 스키마를 사용하여 구성 파일을 쉽게 작성해 봅시다.

스키마 저장소에서 로드

staticwebapp.config.json에 대한 JSON 스키마는 Schema Store라는 서비스에서 이미 공유됩니다.

JSON Schema Store

실제 JSON 스키마의 URL은 다음과 같습니다.

https://json.schemastore.org/staticwebapp.config.json

자동 완성 및 형식 유효성 검사를 위해 이 JSON 스키마를 지원되는 편집기 또는 IDE에 로드할 수 있습니다.

내 권장 사항은 Visual Studio Code이지만 동일한 기능을 Visual Studio에서 사용할 수 있습니다.

비주얼 스튜디오 코드

Visual Studio Code에는 JSON 스키마에 대한 기본 제공 지원이 있지만 특정 파일에서 JSON 스키마를 사용하려면 추가 구성이 필요합니다.

JSON schemas and settings | JSON editing in Visual Studio Code

Visual Studio Code의 설정을 열고 JSON 스키마를 검색하여 항목을 찾습니다.


json.schemas 에 다음 정의를 추가합니다. 배열이라는 사실에서 알 수 있듯이 여러 정의를 추가할 수 있습니다.

{
  "json.schemas": [
    {
      "fileMatch": [
        "/staticwebapp.config.json"
      ],
      "url": "https://json.schemastore.org/staticwebapp.config.json"
    }
  ]
}

JSON 스키마 정의를 추가하면 앞으로 열 때 JSON 스키마가 자동으로 로드됩니다staticwebapp.config.json.

결과적으로 JSON 스키마를 사용한 자동 완성은 Visual Studio Code에서 작동합니다.



필수 속성을 수동으로 입력할 필요가 없기 때문에 실수할 가능성이 매우 낮습니다.

물론 유효성 검사는 편집기에서 실시간으로 수행됩니다.

비주얼 스튜디오

Visual Studio를 사용하는 경우 스키마 저장소 카탈로그 파일이 이미 설정되어 있습니다.

설정되지 않은 경우 카탈로그 파일의 URL을 수동으로 추가하십시오.

http://schemastore.org/api/json/catalog.json

파일 이름에 따라 해당 JSON 스키마를 다운로드하여 사용합니다.

Visual Studio에서 열기staticwebapp.config.json만 하면 자동 완성을 위해 IntelliSense를 사용할 수 있습니다.



JSON 스키마를 사용하면 실수 없이 복잡한 라우팅 및 인증 정의를 작성할 수 있습니다.