1. Azure 정적 웹앱 기능
Azure에서 제공하는 완전 관리형 서비스로, 정적 콘텐츠와 API 백엔드를 쉽게 배포할 수 있는 기능을 제공합니다. 또한, GitHub, Azure DevOps와의 통합을 통해 CI/CD 파이프라인을 자동화하고, 빠르고 확장 가능한 웹 애플리케이션을 배포할 수 있도록 지원합니다.
2. 지원기능
-
자동 배포 및 CI/CD 통합
GitHub Actions 또는 Azure DevOps와 자동으로 통합되어 CI/CD 파이프라인이 설정됩니다. 코드가 변경되면 Azure에서 자동으로 빌드 및 배포가 실행되며, 배포 프로세스는 GitHub Actions 워크플로에 의해 관리됩니다. -
정적 콘텐츠 배포
HTML, CSS, JavaScript와 같은 정적 파일들을 CDN을 통해 배포하여 빠른 로드 시간과 글로벌 가용성을 제공합니다. 사용자는 정적 콘텐츠의 변경 사항을 쉽게 관리할 수 있고, 페이지를 동적으로 제공하는 데 필요한 빌드 설정을 지원합니다. -
서버리스 API 통합 => 추후 API 연결시 자세히 공부
정적 웹 앱 내에서 API 기능을 제공하기 위해 Azure Functions와 통합됩니다. API 백엔드는 Azure Functions로 구현되어 정적 웹 앱의 프론트엔드와 서버리스 백엔드를 쉽게 통합할 수 있습니다. 사용자는 정적 콘텐츠와 API를 함께 배포할 수 있습니다. API는 RESTful 엔드포인트를 제공하며, JavaScript, TypeScript, Python 등 다양한 언어로 구현할 수 있습니다. -
사용자 지정 도메인 및 무료 SSL 인증서
사용자 지정 도메인을 쉽게 추가할 수 있고 무료 SSL 인증서를 제공합니다. 도메인 이름 등록 후 Azure 포털에서 몇 가지 설정을 통해 사용자 지정 도메인으로 웹 앱을 운영할 수 있습니다. 또한,
Azure는 자동으로 무료 SSL 인증서를 제공하고 자동으로 인증서를 관리하고 갱신합니다. 그러므로 추가 비용 없이 HTTPS 트래픽을 보장할 수 있습니다. -
인증 및 권한 관리
Azure 정적 웹 앱은 인증 및 권한 관리 기능을 내장하고 있습니다. 사용자는 Azure Active Directory(AAD), GitHub, Twitter, Google과 같은 외부 인증 제공자를 사용해 로그인할 수 있습니다. 그리고 사용자 역할(Role)을 기반으로 접근 제어를 설정할 수 있으며, 앱의 특정 경로나 API 엔드포인트에 대해 인증된 사용자만 접근할 수 있도록 설정 가능합니다. -
다양한 웹 프레임워크 지원
Azure 정적 웹 앱은 React, Vue, Angular, Blazor, Svelte, Gatsby 등 다양한 웹 프레임워크를 지원합니다. -
라우팅 및 재작성(Rewrite) 규칙
정적 웹 앱 내에서 라우팅 및 URL 재작성 규칙을 설정할 수 있습니다. SPA구조에서 설정 파일을 통해 특정 경로로 리디렉션하거나, 404 페이지와 같은 기본 오류 페이지를 설정할 수 있습니다. -
미리 보기 환경 및 스테이징(Slot) 배포
정적 웹 앱은 미리 보기 환경을 제공하여 PR(Pull Request) 생성 시마다 임시 배포를 통해 변경 사항을 테스트할 수 있습니다. 그러므로 브랜치 또는 PR에 따라 개발 중인 기능을 배포하고, 최종 배포 전 문제를 발견하여 해결할 수 있습니다. 또한, 스테이징 슬롯을 통해 프로덕션 환경과 독립적인 테스트 환경을 운영할 수 있습니다. -
환경 변수 및 구성 관리
환경 변수를 설정하여 빌드 및 배포 시 다양한 환경 설정을 관리할 수 있습니다. Azure 포털에서 환경 변수를 관리하고, 배포 시점에 환경에 맞는 설정을 적용할 수 있습니다. -
로깅 및 진단
Azure 정적 웹 앱은 진단 로그와 애플리케이션 로그 기능을 통해 웹 앱의 성능 및 상태를 모니터링할 수 있습니다. Azure Monitor와 통합하여 웹 애플리케이션의 성능, 보안 상태, 트래픽 상태 등을 실시간으로 확인할 수 있습니다.
3. 테스트
정적 웹앱 생성
정적 웹앱 만들기 화면에서 리소스 그룹을 선택하고 웹앱명은 규칙에 맞게 생성하거나 선택하면 되고 github계정을 로그인 하게 되면 아래의 사진처럼 리포지토리 메뉴에서 로그인한 github계정의 리포지토리 리스트를 확인할 수 있습니다.
제가 만든 프로젝트는 React로 만들었기 때문에 React를 선택하고 API는 아직 없기 때문에 공백으로 남겨두고 생성을 진행하였습니다.
성공적으로 프로젝트가 생성되었으면 아래와 같은 화면이 표출되고 URL로 접속하게 되면 웹앱이 배포된 것을 확인할 수 있습니다.
GitHub Actions 워크플로 파일 설정하기
프로젝트가 생성되면 ./github/workflows 디렉토리에 azure-static-web-apps-zealous-rock-0aaf69c10.yml 파일이 자동으로 생성되는데 GitHub Actions 설정파일로 CI/CD 관련 설정을 할 수 있습니다. 아래의 소스를 보면 생성 당시에 출력 위치에 작성했던 내용이 output_location의 value값으로 들어가게 되는데 저는 vite 번들러를 사용했기 때문에 빌드시에 dist파일이 생성되게 됩니다. 그러므로 output_location의 value값을 build -> dist로 변경해주었습니다.
새로고침 404에러 해결하기
route관련 설정을 추가하지 않으면 nginx로 배포했을 때와 마찬가지로 최초 진입시에는 React.js에서 설정한 route들을 잘 찾아가지만, 새로고침하는 경우 아래와 같이 404에러가 발생하는 문제가 있습니다.
새로고침 전
새로고침 후
위의 문제의 경우 Azure Static Web Apps 구성의 대체 경로 목차를 참고하였고 src 디렉토리에 staticwebapp.config.json 파일을 생성하고 아래의 소스를 작성하면 해결할 수 있습니다.
{
"navigationFallback": {
"rewrite": "/index.html"
}
}4. 배포여부 모니터링 하기
github Action으로 배포기록 확인
정적 웹앱 - 개요 메뉴에서 배포기록을 클릭하면 연결된 레포지토리 Action 탭으로 이동하게 됩니다. 그 후 해당 메뉴에서 배포 로그를 확인할 수 있습니다.
Reference
