Tim Corey가 설명하는 무료 Azure 정적 웹 앱 설정 및 배포

Azure Static Web Apps의 개요 및 중요성

비디오의 시작에서 Tim Corey는 Azure Static Web Apps가 원하는 만큼 많은 웹 애플리케이션을 무료로 배포할 수 있게 한다고 설명합니다. 그는 이러한 앱이 Microsoft Azure 데이터 센터를 통해 전 세계적으로 호스팅되고 콘텐츠 전달 네트워크를 통해 제공되어 HTTP 요청을 하는 사용자에게 높은 가용성, 부하 균형 및 낮은 대기 시간을 보장한다고 강조합니다.

Tim은 이러한 웹 앱이 인증, API 앱 및 RESTful API와의 통합을 지원한다고 지적합니다. 무료 계층에서도 Azure Static Web Apps는 서버, 가상 머신 및 기본 인프라를 관리하지 않아도 되는 보안성과 높은 성능을 제공합니다. 이는 Azure 가상 머신이나 온프레미스 서버를 관리할 필요가 없는 플랫폼 사용의 중요한 장점 중 하나입니다.

그는 Azure Static Web Apps가 HTML, CSS, JavaScript, React 및 Blazor WebAssembly와 같은 프론트엔드 웹 애플리케이션에는 적합하지만 서버 측 처리를 필요로 하는 애플리케이션에는 적합하지 않다고 설명합니다.

영상 범위 및 Azure 학습 맥락

Tim은 이 비디오가 모든 Azure 서비스를 포괄하지 않고 특정 서비스에 집중한 튜토리얼을 제공한다고 설명합니다. Azure App Service는 여러 언어, 모바일 앱, API 앱 및 Docker 컨테이너를 지원하지만 이 비디오는 Microsoft Azure 내에서 특정 서비스에 집중합니다.

시청자가 보안을 포함한 주제를 원하면 자신의 Azure 코스에서 다루고 있다고 언급합니다. 그러나 이곳의 목표는 Azure Static Web Apps와 연속 배포를 사용하여 얼마나 빠르게 웹 앱을 생성하고 배포할 수 있는지를 보여주는 것입니다.

정적 웹사이트를 위한 GitHub 저장소 생성

Tim은 새로운 GitHub 저장소를 생성하여 GitHub가 무료이며 Azure 서비스와 원활하게 통합된다고 설명하며 시작합니다. 이 저장소는 간단한 정적 웹사이트의 소스 코드를 포함합니다.

그는 저장소를 비공개로 설정하고, README 파일을 추가하며, Visual Studio 및 Visual Studio Code에 적합한 .gitignore 파일을 선택합니다. Tim은 Visual Studio Code를 사용하지만 동일한 과정이 Visual Studio에서 작동한다고 명확히 합니다.

이 저장소는 Azure를 사용하여 웹사이트를 호스팅하는 출발점을 나타냅니다. Tim은 Azure Static Web Apps가 소스 코드에서 직접 배포되어 연속 배포를 간단하고 신뢰할 수 있게 만든다고 강조합니다.

간단한 HTML 웹 애플리케이션 구축

Visual Studio Code를 사용하여 Tim은 index.html 파일을 만들어 웹사이트의 진입점으로 사용합니다. 그는 Emmet 단축키를 사용하여 기본 HTML 구조를 생성하고 기능을 보여주기 위해 최소한의 콘텐츠를 추가합니다.

이 단계는 백엔드 서비스, 데이터베이스, 서버 없이 기본 웹 애플리케이션을 배포할 수 있음을 보여줍니다. Tim은 이 단순함이 의도적임을 분명히 하며, Azure Static Web Apps는 프론트엔드 작업을 위해 설계되었다고 설명합니다.

완료되면 그는 변경 사항을 커밋하고 소스 코드를 GitHub에 푸시하여 프로세스 후반의 배포 파이프라인을 트리거합니다.

Azure Portal에서 Azure Static Web App 생성

Tim은 Azure Portal로 전환하여 새 Static Web App 리소스를 생성합니다. 그는 리소스 그룹 생성의 중요성을 강조하며, 리소스 그룹은 리소스를 관리, 환경 정리 및 불필요한 비용 피하기 쉽게 만든다고 설명합니다.

그는 무료 계층을 선택할 것을 강조하며, 무료 계층은 빠르고 신뢰할 수 있으며 대부분의 소규모 비즈니스 웹사이트와 개인 프로젝트에 충분하다고 설명합니다. Azure App Service 계획은 앱 서비스 계획 및 월 요금이 필요할 수 있지만, 무료 계층의 Azure Static Web Apps는 이러한 복잡성을 완전히 제거합니다.

Tim은 자신의 웹사이트가 Azure Static Web Apps에서 실행된다는 언급하며 실제 현업에서 이 서비스의 사용 사례를 보여줍니다.

GitHub 연결 및 연속 배포 활성화

Tim은 Azure Static Web App을 GitHub에 연결하고 저장소 및 브랜치를 선택합니다. 그는 Azure가 자동으로 GitHub Actions 워크플로를 설정하여 연속 배포를 처리한다고 설명합니다.

이 워크플로는 수동 배포 단계의 필요성을 제거합니다. 소스 코드가 변경될 때마다 웹 앱이 자동으로 다시 빌드 및 배포됩니다. Tim은 이를 현대적인 클라우드 플랫폼의 핵심 기능이자 Microsoft Azure를 웹 호스팅에 사용하는 주요 이점 중 하나로 언급합니다.

배포 토큰 및 보안 설정

Tim은 GitHub 저장소 설정으로 이동하여 비밀로 저장된 배포 토큰을 보여줍니다. 이 토큰은 GitHub과 Azure 간에 안전한 통신을 허용합니다.

그는 이 설정이 개발자가 자격 증명을 수동으로 구성할 필요 없이 보안을 강화한다고 설명합니다. Azure Static Web App API 토큰은 승인된 워크플로만 애플리케이션을 배포할 수 있게 보장합니다.

배포된 정적 웹사이트 보기

배포가 완료되면 Tim은 Azure Portal에서 바로 라이브 웹사이트를 엽니다. 이 사이트는 이제 퍼블릭 클라우드에 호스팅되어 공개적으로 접근 가능합니다.

그는 다른 프론트엔드 프레임워크에도 동일한 프로세스가 작동함을 설명하며, 최종적으로 정적 파일을 생성해 Azure Static Web Apps가 효과적으로 제공할 수 있음을 보여줍니다. 앱 서비스 계획, 가상 머신 또는 백엔드 서버는 필요하지 않습니다.

Blazor WebAssembly 애플리케이션 배포

Tim은 Blazor WebAssembly 독립 애플리케이션 배포를 보여주며 Blazor Web Apps와 Blazor WebAssembly 간의 차이점을 강조합니다.

그는 Blazor WebAssembly가 완전히 클라이언트에서 실행되어 Azure Static Web Apps에 적합하다고 설명합니다. ASP.NET Core MVC, PHP, Java 백엔드와 같은 서버 측 기술은 대신 Azure Web Apps가 필요합니다.

이 섹션은 Azure Static Web Apps가 클라이언트 전용 웹 애플리케이션을 위해 설계되었음을 강조합니다.

Blazor 애플리케이션 생성 및 테스트

Visual Studio를 사용하여 Tim은 Blazor WebAssembly 프로젝트를 생성하고 .NET 9를 선택하며 HTTPS 및 프로그레시브 웹 애플리케이션 지원과 같은 기능을 활성화합니다.

그는 애플리케이션을 로컬에서 실행하여 배포 전에 작동하는 것을 확인하고 프로덕션 준비를 위한 모범 사례를 강화합니다. 검증 후, 그는 Visual Studio에서 직접 GitHub 저장소를 생성하고 소스 코드를 푸시합니다.

Azure Static Web Apps으로 Blazor 배포하기

Tim은 또 다른 Static Web App 리소스를 만들어 Blazor 저장소에 연결합니다. 그는 GitHub Actions 워크플로가 Blazor에 특정한 경로, 예를 들어 출력 디렉토리를 자동으로 구성한다고 강조합니다.

이는 Azure가 수동 구성을 요구하지 않고 여러 프로그래밍 언어 및 프레임워크를 지원하는 방법을 보여줍니다. 플랫폼은 기본 인프라 및 빌드 복잡성을 추상하여 제거합니다.

빌드 프로세스 및 배포 완료

Tim은 Blazor 빌드가 컴파일 및 최적화 단계 때문에 더 오래 걸린다고 설명합니다. Azure는 배포 중에 애플리케이션을 트림하여 성능을 개선합니다.

완료 후, Blazor WebAssembly 앱은 실시간으로, 글로벌하게 접근 가능하며 Microsoft Azure의 클라우드 인프라에 호스팅됩니다.

Azure Static Web Apps의 추가 기능

Tim은 다음을 포함한 다른 기능에 대해 간단히 설명합니다:

• 사용자 지정 도메인

• 내장 보안이 있는 API 통합

• 개발, 스테이징, 프로덕션 슬롯과 같은 배포 슬롯

그는 API가 자동으로 잠겨 비인가 접근을 방지하며 통합을 간소화한다고 설명합니다.

리소스 그룹을 사용하여 리소스 정리

마무리로 Tim은 리소스 그룹을 삭제하여 Azure가 개발자가 한 번에 관련 리소스를 제거할 수 있도록 하는 방법을 보여줍니다. 이는 클라우드 서비스를 테스트할 때 의도치 않은 비용을 피하는 데 특히 중요합니다.

그는 리소스 그룹 삭제는 영구적이면서 되돌릴 수 없음을 경고합니다.

Azure Static Web Apps를 사용할 시점 그리고 피할 시점

Tim은 Azure Static Web Apps는 PHP 애플리케이션, MVC 앱, Blazor Web Apps와 같은 서버 측 작업에는 적합하지 않다고 설명합니다.

이들은 HTML, JavaScript, CSS, React, Angular, Vue 및 Blazor WebAssembly로 구축된 프론트엔드 웹 애플리케이션에 이상적입니다. 모두 클라이언트에서 실행되므로 이러한 앱을 완전히 무료로 호스팅할 수 있습니다.

Tim Corey가 비디오를 통해 보여주는 것처럼 Azure Static Web Apps는 Microsoft Azure를 사용하여 서버, 확장성 또는 인프라에 신경 쓰지 않으면서 현대적인 웹 애플리케이션을 배포하는 간단하고 안전하며 완전히 관리되는 방법을 제공합니다.