[Microsoft Azure] 6. 클라우드 웹 서비스 플랫폼 (2)

지난 시간에 Streamlit으로 웹 앱을 만들어 봤다.

로컬에서 streamlit run으로 돌리면 잘 된다.

근데 나는 남들이 쓸 수 있게 배포가 하고 싶은거다.

이번 주에는 실제로 Azure Web App에 배포하는 과정을 실습하고,

DB 연동 Todo 앱을 만들어 본 뒤, Azure Static Web Apps의 동작 방식을 살펴본다.

---

7-1. 웹 앱 서비스의 배포

Python 가상 환경

배포 전에 가상 환경부터 잡아야 한다. Python 가상 환경은 프로젝트마다 독립적인 실행 환경을 제공하는 도구다.

• 독립적인 환경 — 프로젝트별로 패키지 버전을 별도 관리. A 프로젝트는 pandas 1.x, B 프로젝트는 pandas 2.x를 쓸 수 있다.
• 의존성 관리 — requirements.txt로 필요한 패키지와 버전을 명확하게 정의. 다른 프로젝트와의 충돌 방지.
• 생성 방법 — python -m venv <env_name>

Azure App Service에 배포할 때도 requirements.txt가 필수다. 플랫폼이 이 파일을 읽고 자동으로 의존성을 설치한다.

VS Code Extensions

VS Code의 진짜 힘은 확장(Extension)에서 나온다. Ctrl+Shift+X로 확장 마켓을 열 수 있다.

Azure 배포에 필요한 핵심 확장은 Azure App Service 확장이다. 이걸 설치하면 VS Code 사이드바에서 Azure 구독에 로그인하고, 리소스를 확인하고, 우클릭 한 번으로 배포까지 가능하다. Azure Portal에 들어갈 필요가 없어진다.

---

7-2. 웹 앱 서비스의 운영과 활용

Todo 앱 만들기

이론만 하면 재미없으니, DB 연동되는 실제 앱을 만들어 본다. 구조는 이렇다:

사용자 ↔ Streamlit (Python) ↔ MySQL Connector ↔ MySQL

기능은 기본적인 CRUD다:

• Todo 추가 (Create) — 새로운 할일 등록
• Todo 목록 (Read) — 현재 할일 리스트 조회
• Todo 수정 (Update) — 할일 내용 변경
• Todo 완료 — 완료 시 목록에서 제외

Streamlit이 프론트엔드를 담당하고, mysql-connector-python 패키지로 MySQL에 직접 연결한다. ORM 없이 raw SQL을 쓰는 구조다. 학습용으로는 이게 오히려 DB 동작을 이해하기 좋다.

실무 관점에서 보면, Streamlit + MySQL 직접 연결은 프로토타입이나 내부 도구 수준이다. 프로덕션에서는 API 서버를 분리하고, connection pooling을 적용하고, 인증/인가를 추가해야 한다.

---

7-3. 스테틱 앱 서비스의 이해

Azure Static Web Apps

6주차에서 간략히 언급했던 Azure Static Web Apps를 좀 더 깊이 살펴본다.

동작 흐름:

GitHub에 push/PR → Repository → GitHub Actions 실행 → Azure Static Web Apps에 배포 → 사용자에게 서빙

정적 콘텐츠(HTML/JS/CSS)는 글로벌 CDN으로 배포되고, 동적 API가 필요하면 Azure Functions가 백엔드 역할을 한다. 이 두 가지가 하나의 서비스 안에 통합되어 있다는 게 핵심이다.

Static Web Apps로 할 수 있는 것

• Angular, React, Svelte, Vue 등 프론트엔드 프레임워크로 빌드한 SPA 배포
• Gatsby, Hugo, VuePress 등으로 만든 정적 사이트 게시
• Next.js, Nuxt.js 같은 SSR/SSG 프레임워크의 웹 애플리케이션 배포

주요 기능

• HTML, CSS, JS, 이미지 등 정적 콘텐츠 웹 호스팅
• Azure Functions 기반 통합 API
• 리포지토리 변경 시 자동 빌드+배포되는 GitHub 통합
• 글로벌 CDN으로 전역 분산 배포
• 자동 갱신되는 무료 SSL 인증서
• 커스텀 도메인 지정
• 역방향 프록시를 사용하는 보안 모델 (CORS 구성 불필요)
• Azure AD, Facebook, Google, GitHub, Twitter 등 인증 공급자 통합
• PR 기반 스테이징 버전 (게시 전 미리보기)

기존 App Service와의 가장 큰 차이는 정적/동적 분리다. 정적 콘텐츠는 CDN에서 빠르게 서빙하고, 동적 로직만 Azure Functions로 처리하므로 비용과 성능 양쪽에서 이점이 있다. 단, Static Web Apps를 제대로 활용하려면 Azure Functions에 대한 이해가 필요하다.

---

실습 진행

지난번 주차 실습에서 환경변수 PATH를 못찾는 문제가 있었다.

사실 이게 다 venv 가상 환경을 사용하지 않아서 그렇다.

각 프로젝트마다 무조건 venv를 사용하여

프로젝트에 맞는 라이브러리 환경을 구성해야한다

venv 생성 및 활성화

이후 이 환경에서 다시 streamlit을 설치하면 된다.

익스텐션 설치

테넌트 모두 활성화

처음 계정 로그인해서 들어가면

모든 테넌트가 활성화되어있지 않으므로

아래 탭에서 한양대 테넌트를 체크해줘서

구독 목록을 활성화 할 수 있었다.

코드 작성 완료

배포에 필요한 파일들을 다 작성해주고

웹앱 배포

배포를 시작한다

배포 완료

azure 페이지로 돌아와서...

이후 웹 앱 스택 시작 명령을 작성해준다.

 

적용하고 기본 도메인으로 접속하게되면

배포 성공

이제 DB를 구축해야한다.

지난시간에 실습한 mysql 리소스 설정 방법을 바탕으로 진행해보자

DB연결 및 테이블 설정

테이블 생성 완료

이제 다시 app.py로 돌아가서 DB를 연결하고 데이터를 저장해보자.

mysql 연동 라이브러리 설치

venv에 라이브러리 설치해주고

코드 작성

연결 코드 작성해주면

씻어야함...

DB에 잘 저장되는 것을 확인할 수 있었다.

---

 

정리

• Python 가상 환경으로 프로젝트별 의존성을 격리하고, requirements.txt로 배포 환경을 재현한다
• VS Code Azure Extension으로 개발~배포까지 한 곳에서 처리할 수 있다
• Streamlit + MySQL로 CRUD 기능을 가진 Todo 앱을 만들 수 있다
• Azure Static Web Apps는 정적 콘텐츠와 동적 API를 분리하여 효율적으로 서비스한다
• Static Web Apps를 잘 쓰려면 Azure Functions를 함께 이해해야 한다

다음 시간에는 서버리스 서비스의 이해를 다뤄보자.