[클라우드 응용 SW 개발] 6,7주차

[클라우드응용SW개발] 6-7주차 - Azure 웹 앱 서비스의 이해와 배포

들어가며

이번 주차에서는 Azure에서 제공하는 다양한 웹 서비스 플랫폼을 살펴보고,
실제로 Python + Streamlit 기반의 웹 앱을 개발 및 배포하는 과정을 다뤘다.
Azure Web App을 중심으로, Static Web App까지 이어지는 흐름을 정리해보자.

---

6주차 - 클라우드 기반 웹 서비스 플랫폼

Cloud Service의 종류

클라우드 서비스는 크게 세 가지로 나뉜다.

종류	설명	관리 주체
IaaS	인프라 제공 (VM, 네트워크 등)	사용자가 OS 이상 직접 관리
PaaS	플랫폼 제공, 앱 개발에 집중 가능	클라우드가 인프라+플랫폼 관리
SaaS	소프트웨어 자체를 서비스로 제공	클라우드가 전부 관리

---

Azure 웹 서비스 플랫폼 종류

Azure App Service (PaaS)

• 웹 앱, RESTful API, 모바일 백엔드를 호스팅하는 완전 관리형 PaaS
• .NET, Java, Node.js, Python, PHP 등 다양한 런타임 지원
• 자동 확장(AutoScale) 및 로드 밸런싱 내장
• CI/CD 통합 및 배포 슬롯 지원
• SSL 인증서 및 도메인 관리 기능 제공

배포 방법도 다양하다.
Visual Studio Online, Git, GitHub, BitBucket, DropBox, FTP 등 입맛에 맞게 선택 가능

AutoScale

• 트래픽이 늘어나면 인스턴스를 자동으로 늘리고, 줄면 다시 축소
• CPU 사용량 기준(6080%)으로 인스턴스 수(26개)를 자동 조절하는 방식

Azure Static Web Apps

• 정적 웹 애플리케이션 호스팅 전용 서비스
• GitHub / Azure DevOps 연동으로 Push/PR 시 자동 빌드 및 배포
• Azure Functions를 통해 서버리스 API 통합 가능
• 글로벌 CDN을 통한 콘텐츠 배포 + 무료 SSL 인증서 제공

Azure Container Apps

• 컨테이너화된 앱을 위한 서버리스 플랫폼
• Kubernetes 기반 오케스트레이션
• 마이크로서비스 아키텍처, 이벤트 기반 앱에 적합
• 자동 스케일링 및 트래픽 분산 지원

Azure Virtual Machines (IaaS)

• 사용자가 직접 VM을 구성하고 관리
• 완전한 제어와 유연성 제공
• 레거시 시스템 호스팅에 적합하지만, 수동 관리 부담 있음

---

웹 앱 개발 환경: Python + VSCode + Streamlit

Visual Studio Code

• 경량 에디터이면서도 IDE에 가까운 기능 제공
• 언어 지원, 디버깅, Git 통합, 테마 등 확장(Extension)으로 커스터마이징
• Azure Extension을 설치하면 VSCode에서 바로 Azure 리소스 생성 및 배포 가능
  • Ctrl + Shift + X로 Extensions 설치

Python 가상환경 (venv)

• 프로젝트마다 독립적인 Python 실행 환경 제공
• 패키지 버전 충돌 방지 및 의존성 격리

python -m venv <env_name>

Streamlit

• Python 기반 웹 UI 프레임워크 — HTML/CSS 없이 빠르게 웹 앱 제작 가능
• 주요 구성 요소

요소	설명
st.write()	텍스트, 데이터프레임, 그래프 등 범용 출력
st.dataframe()	인터랙티브 테이블 표시
st.button()	버튼 위젯
st.chat_input() / st.chat_message()	챗봇 UI 구성

빠른 프로토타이핑엔 Streamlit,
프로덕션 수준의 전문 개발에는 Django / Flask / FastAPI 사용을 권장한다.

---

7주차 - 웹 앱 배포 및 Static Web App

VSCode Azure Extension으로 배포하기

• VSCode에 Azure App Service 익스텐션 설치 후 계정 연결
• 로컬 웹 앱을 Azure Web App으로 바로 배포 가능
• 다양한 배포 방법 중 개발자 친화적인 방법으로 관리 가능

MySQL 연동 Todo 앱 (Streamlit + MySQL Connector)

[사용자] ↔ Streamlit (Python + MySQL Connector) ↔ MySQL DB

• Todo 추가 / 목록 조회 / 완료 처리 / 수정 — CRUD 전체 구현
• MySQL 테이블 설계 → Python으로 데이터 입출력 → Streamlit으로 UI 제공

---

Azure Static Web App 심화

동작 원리

GitHub (Push/PR) → Repository → GitHub Actions → Azure Static Web App
                                                  ├── 정적 콘텐츠 (HTML/JS/CSS)
                                                  └── API (Azure Functions)

주요 기능 요약

• 정적 콘텐츠 웹 호스팅 (HTML, CSS, JS, 이미지)
• Azure Functions 기반 통합 API
• GitHub 연동 자동 빌드/배포 (CI/CD 내장)
• 전역 분산 CDN
• 무료 SSL 인증서 + 사용자 지정 도메인
• AAD, Google, GitHub, Facebook 등 인증 공급자 통합
• 역방향 프록시를 이용한 CORS-free 보안 모델
• PR 기반 스테이징(미리보기) 버전 자동 생성

Static Web Apps로 할 수 있는 것

• Angular, React, Svelte, Vue + Azure Functions 조합으로 최신 JS 앱 빌드
• Gatsby, Hugo, VuePress 등으로 정적 사이트 게시
• Next.js, Nuxt.js로 SSR 웹 앱 배포

---

핵심 정리

항목	핵심 요약
PaaS vs IaaS	PaaS 쓰면 인프라 관리 부담 대폭 감소
Azure App Service	자동 확장·배포·SSL 다 내장된 완전 관리형 플랫폼
Static Web App	정적/동적 분리 + GitHub 자동 배포 + 글로벌 CDN
Python venv	프로젝트 간 패키지 충돌 방지 필수
Streamlit	빠른 웹 UI 프로토타입용, 프로덕션은 Django/Flask/FastAPI
VSCode Extensions	Azure 연동으로 개발-배포 사이클을 한 곳에서