Azure Static Web Apps 개요

• 풀 스택 웹 앱 자동 빌드 + Azure 배포 서비스
  • SWA의 워크플로우 조정
  • Repo의 선택한 브랜치 모니터링
  • 선택 브랜치에 커밋 푸시 또는 PR 수락 > 자동빌드 > Azure에 앱과 API 배포
• 라이브러리와 프레임워크
  • 서버 쪽 렌더링이 필요하지 않은 라이브러리 및 웹 프레임워크 사용
  • HTML, CSS, JavaScript, 이미지

1. 정적 WebApp 생성

(1) App Services 생성화면에서 정적 웹앱 선택

(2) 만들기 클릭

(3) 정적 웹앱 만들기

[기본]

• 리소스 그룹: stataicwebapps-kms-rg
• 이름: staticweb
• 계획 유형 : 무료

• Azure Functions API 및 스테이징 환경을 위한 영역 : East Asia

• 배포 세부 정보 : Github 개인계정 연동 진행
  • Github 연동 후 해당 리포지토리 선택
    • 깃허브 아이디
    • 배포할 소스가 있는 리포지토리 선택
    • 배포 브랜치
  • 빌드 세부 정보
    • 빌드 사전 설정 : Custom
    • 앱 위치 : 리포지토리/웹사이트 컨텐츠

리소스 이동 화면

URL 클릭하면 배포된 소스의 웹으로 접근할 수 있다.

배포 웹사이트

(4) 워크플로 편집기능 소개

리소스 배포가 끝나고 리소스로 이동하면  
아래 이미지와 같은 화면을 볼 수 있다.
워크플로 편집 클릭하면 깃허브에 등록된 워크플로가 열리는데
필요시 워크플로 작업을 수행후 commit해서 반영하면 된다.

(5) 워크플로 편집 url 클릭

(6) 워크플로 화면

워크플로에서 해당 3가지가 가장 중요

          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "/" # Built app content directory - optional

배포시 소스 위치와 관련된 부분으로 웹이 실행이 되지 않으면  
이 부분을 참고하는것이 좋다.

(7) Github Action 페이지

소스코드를 이용해 Azure에 있는 정적 웹사이트가 deploy된다.
Github Action은 소스코드에 Commit이 발생할때 마다 자동으로 실행된다.

By 김민서

The BlackCode got Dream

• ← Previous Post
• Next Post →