Azure Static-Web-App & CI/CD

ding·2024년 12월 6일

Static Web App

Static Web App은 HTML, CSS, JS와 같은 정적 파일로 구성된 웹 애플리케이션을 배포하는데 사용되는 구조나 서비스를 말한다. 여기에는 주로 CSR을 통해 실행되는 SPA 또는 정적 웹사이트가 포함된다.
대표적인 Static Web App 호스팅 서비스로는 Netlify, Vercel, Github Pages, Azure Static Web Apps 등이 있다.

Azure Static Web App

이 중 Azure Static Web App은 CI/CD를 지원한다.
Azure Static Web App을 CI/CD와 연계하면 코드를 변경하는 즉시 자동으로 빌드, 테스트, 배포가 진행된다. 이를 통해 빠른 개발과 안정적인 배포가 가능하며, Git 기반 워크플로우를 중심으로 효율적인 작업을 지원한다.

기본 원리

Azure Static Web App은 GitHub, Azure DevOps와 같은 Git 기반 소스 컨트롤과 통합되어 CI/CD 파이프라인을 자동화한다.

GitHub Actions 연동
- GitHub 리포지토리의 특정 브랜치에 푸시되거나 PR이 생성될 때 자동으로 워크플로우가 실행된다.
- Azure Static Web App은 기본적으로 GitHub Actions 템플릿을 제공한다.

CI/CD 워크플로우 구성

Azure Static Web App은 리소스를 생성할 때 자동으로 GitHub Actions workflow를 설정한다. 생성된 *.yml 파일은 다음과 같은 과정으로 진행된다.
1. 빌드 및 배포 트리거

특정 브랜치에 커밋이 발생하거나 PR이 생성될 때 실행된다.
일반적으로 main브랜치를 배포 대상으로 설정한다.

빌드 단계

프로젝트를 빌드한다.
빌드 결과물을 생성한다.

배포 단계

빌드된 정적 파일을 Azure Static Web Apps 서비스에 업로드한다.
배포가 완료되면 자동으로 SSL 인증서와 CDN이 설정된다.

// 예시
name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened]
    branches:
      - main

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout GitHub Action
        uses: actions/checkout@v2

      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          app_location: "/"
          api_location: "api"
          output_location: "build"

Azure Static Web App CI/CD를 위한 필수 설정

API Key 설정

AZURE_STATIC_WEB_APPS_API_TOKEN이나 GITHUB_TOKEN을 설정해야 Azure와 CI/CD가 통신할 수 있다.

빌드 출력 경로

빌드된 정적 파일이 저장되는 경로를 정확히 지정해야 한다.

API 경로 설정

서버리스 함수(API)가 있다면 해당 경로를 명시적으로 지정해야 한다.

GIT 브랜치 전략

main, staging 등 브랜치를 분리하여 환경별로 배포를 관리한다.

  deploy:
    needs: lint_and_test
    runs-on: ubuntu-latest
    name: Deploy
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Azure Static Web Apps
        id: deploy
        uses: Azure/static-web-apps-deploy@latest
        with: //#1. API Key 설정
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WITTY_HILL_0EE86E600 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          app_location: '/'
          api_location: ''
          output_location: 'out' //#2. 빌드 출력 경로
        env:
          ~~

ding

이전 포스트

npm i vs npm ci

다음 포스트

Azure Static-Web-App & CI/CD

Static Web App