Azure Static Web Apps의 정적 사이트에 인증 추가
이 문서는 첫 번째 사이트를 Azure Static Web Apps에 배포하는 방법을 보여 주는 시리즈의 2부입니다. 이전에는 선택한 웹 프레임워크를 사용하여 정적 사이트를 만들고 배포했습니다.
이 문서에서는 클라우드에 배포하기 전에 사이트에 인증을 추가하고 사이트를 로컬로 실행합니다.
필수 조건
이 자습서에서는 이전 자습서의 내용이 계속되며 동일한 필수 조건이 있습니다.
인증 및 권한 부여
Azure Static Web Apps를 사용하면 보안 관련 코드를 작성하지 않고도 Microsoft Entra 및 Google과 같은 일반적인 인증 공급자를 쉽게 사용할 수 있습니다.
참고 항목
백 엔드 API를 사용할 때 선택적으로 사용자 지정 공급자를 등록하고 사용자 지정 역할을 할당하여 더욱 세밀하게 제어할 수 있습니다.
이 문서에서는 인증을 위해 Microsoft Entra ID를 사용하도록 사이트를 구성합니다.
인증 추가
지난 문서에서는 staticwebapp.config.json
파일을 만들었습니다. 이 파일은 인증을 포함하여 Azure Static Web Apps의 다양한 기능을 제어합니다.
다음 구성과 일치하도록
staticwebapp.config.json
을 업데이트합니다.{ "navigationFallback": { "rewrite": "/index.html" }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } }
routes
섹션을 사용하면 명명된 역할에 대한 액세스를 제한할 수 있습니다. 미리 정의된 역할에는authenticated
및anonymous
라는 두 가지 역할이 있습니다. 연결된 사용자에게 허용된 역할이 없으면 서버는 "401 Unauthorized" 응답을 반환합니다.responseOverrides
섹션의 값은 인증되지 않은 사용자에게 서버 오류가 표시되는 대신 브라우저가 로그인 페이지로 리디렉션되도록 사이트를 구성합니다.사이트를 로컬로 실행합니다.
사이트를 로컬로 시작하려면 Static Web Apps CLI
start
명령을 시작합니다.npx swa start
이 명령은
http://localhost:4280
에서 Azure Static Web Apps 에뮬레이터를 시작합니다.이 URL은 서비스가 시작된 후 터미널 창에 표시됩니다.
해당 사이트로 이동하려면 URL을 선택합니다.
브라우저에서 사이트를 열면 로컬 인증 로그인 페이지가 표시됩니다.
로컬 인증 로그인 페이지는 외부 서비스 없이도 실제 인증 환경을 에뮬레이션합니다. 이 화면에서 사용자 ID를 만들고 사용자에게 적용할 역할을 선택할 수 있습니다.
사용자 이름을 입력한 다음 로그인을 선택합니다.
인증하면 사이트가 표시됩니다.
Azure에 사이트 배포
지난 자습서에서 했던 것과 같은 방식으로 사이트를 배포합니다.
사이트 빌드:
npx swa build
사이트를 정적 웹앱 배포:
npx swa deploy --app-name swa-demo-site
배포가 완료되면 사이트의 URL이 표시됩니다. 브라우저에서 사이트를 열려면 사이트 URL을 선택합니다. 표준 Microsoft Entra ID 로그인 페이지가 표시됩니다.
Microsoft 계정으로 로그인합니다.
리소스 정리(선택 사항)
다른 자습서를 계속하지 않는 경우 Azure 리소스 그룹 및 리소스를 제거합니다.
az group delete -n swa-tutorial
리소스 그룹을 제거하면 포함된 모든 리소스가 삭제됩니다. 이 작업은 취소할 수 없습니다.