Blazor 로 CI CD 구성하는 방법

Blazor Server 애플리케이션 (SSR)을 개발하면서 CI/CD(지속적인 통합 및 배포) 파이프라인을 어떻게 구성할지에 대해 얘기해보려고 해요.

이렇게 하면 코드가 수정될 때마다 자동으로 테스트되고, 빌드되고, 배포되는 과정을 자동화할 수 있죠.

이번 포스팅에서는 GitHub Actions랑 Azure DevOps를 이용해서 Blazor 프로젝트의 CI/CD를 단계별로 구성하는 방법을 알려드릴게요.

1. 프로젝트 준비

먼저 Blazor 솔루션을 Git 저장소에 올려야 해요. GitHub나 Azure DevOps 같은 저장소 서비스를 사용할 수 있어요.

프로젝트 이름은 Test.Blazor로 해줄게요. Blazor Server 애플리케이션의 구성은 보통 이렇게 돼요

– Test.Blazor: 서버 사이드 렌더링(SSR)을 사용하는 Blazor Server 프로젝트로, 사용자 인터페이스와 서버 로직을 하나의 프로젝트에서 관리해요.

아래 그림은 CI/CD 파이프라인의 기본적인 흐름을 보여줘요. 코드가 수정되면, 빌드 -> 테스트 -> 배포의 과정이 자동으로 진행되는 모습을 나타냅니다.

GitHub Actions를 사용해서 코드가 변경될 때마다 빌드하고 테스트하도록 설정할 수 있어요. 다음은 간단한 예시 워크플로우 파일이에요.

name: Test.Blazor CI/CD

on:
push:
branches:
- main
pull_request:
branches:
- main

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v2

- name: Setup .NET
uses: actions/setup-dotnet@v3
with:
dotnet-version: '7.0.x'

- name: Restore dependencies
run: dotnet restore Test.Blazor.sln Test.Blazor.sln

- name: Build solution
run: dotnet build Test.Blazor.sln --configuration Release

- name: Run tests
run: dotnet test Test.Blazor.sln --no-build --verbosity normal

deploy:
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to Azure Web App
uses: azure/webapps-deploy@v2
with:
app-name: 'Test.Blazor-app'
publish-profile: '${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}'
package: '.'

이 파일은 main 브랜치에 코드 변경 사항이 있을 때마다 빌드, 테스트, 배포를 자동으로 해줘요.

Azure Web App에 배포하려면 Azure에서 발급한 Publish Profile을 사용해야 하고, 이걸 GitHub Secrets에 저장해서 보안을 유지할 수 있어요.

2. Azure DevOps를 통한 CI/CD 구성

Azure DevOps를 사용해서 Test.Blazor 애플리케이션의 빌드와 배포 파이프라인을 구성하는 것도 좋은 방법이에요.

Azure Pipelines를 이용해서 YAML 파일로 구성할 수 있어요:

trigger:
- main

pool:
vmImage: 'ubuntu-latest'

steps:
- task: UseDotNet@2
inputs:
packageType: 'sdk'
version: '7.x'

- script: dotnet restore
displayName: 'Restore Dependencies'

- script: dotnet build Test.Blazor.sln --configuration Release
displayName: 'Build Solution'

- script: dotnet test Test.Blazor.sln --no-build --verbosity normal
displayName: 'Run Tests'

- task: AzureWebApp@1
inputs:
azureSubscription: 'your-azure-subscription'
appName: 'Test.Blazor-app'
package: '$(Build.ArtifactStagingDirectory)'

Azure DevOps도 GitHub Actions랑 비슷하게 빌드랑 배포를 자동화할 수 있고, Azure랑의 통합이 아주 잘 되어 있어서 편리해요.

Blazor 솔루션에 CI/CD 파이프라인을 구성하면 코드 품질을 유지하고, 배포 과정을 자동화해서 개발 프로세스를 크게 개선할 수 있어요.

GitHub Actions나 Azure DevOps를 사용해서 빌드와 배포를 자동화하는 게 처음엔 좀 복잡해 보일 수 있지만, 일단 설정하고 나면 정말 편리하답니다.