Taeyoung Kim
English

Cloud & Platform

Azure Storage + Web App(Backend API & Frontend) 배포 및 이미지 업로드 실습

Azure Storage + Web App(Backend API & Frontend) 배포 및 이미지 업로드 실습 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

1. Storage 계정 생성

  • 리소스 그룹: rg-myManagedPlatform
  • 스토리지 계정 이름: imgstorkty00 (형식: imgstor<이니셜>)
  • 지역: Korea Central
  • 성능: 표준
  • 중복도: LRS (로컬 중복 스토리지)
  • 네트워크 액세스: 모든 네트워크에서 퍼블릭 액세스 허용

액세스 키 확인

  • 위치: /보안+네트워킹 → 액세스 키
  • 연결 문자열 복사 (환경변수로 활용)
DefaultEndpointsProtocol=https;AccountName=imgstorkty00;AccountKey=...;EndpointSuffix=core.windows.net

2. 샘플 Blob 데이터 업로드

  • 컨테이너 생성: images
  • 업로드 파일: grilledcheese.jpg
    • 경로: Allfiles\Labs\01\Starter\Images

3. Backend Web App(API) 생성

  • 리소스 그룹: rg-myManagedPlatform
  • 이름: imgapikty (형식: imgapi<이니셜>)
  • 런타임 스택: .NET 8 (LTS)
  • 운영체제: Windows
  • 지역: Korea Central
  • 가격 책정 플랜: Standard S1 (100 ACU, 1.75GB 메모리, 1 vCPU)
  • Application Insights: 사용 안 함

4. Backend Web App 환경변수 설정

  • 경로: /App Services / imgapi~~~ → 설정 → 환경변수
  • 앱 설정 추가:
    • 이름: StorageConnectionString
    • 값: 저장소 연결 문자열
  • 적용 후 저장

5. Backend Web App 초기 확인

  • 기본 URL: https://imgapi<이니셜>.azurewebsites.net/
  • 현재는 임시 웹 페이지 반환 (코드 미배포 상태)

6. ASP.NET API 앱 코드 확인 및 배포

코드 확인 (VS Code → Allfiles\Labs\01\Starter\API)

  • ImagesController.cs
    • Line 26: GetCloudBlobContainer → 컨테이너 검색
    • Line 36: Get → Blob 이미지 목록 비동기 검색
    • Line 68: Post → 업로드 이미지 저장

CLI 작업

  1. Azure CLI 설치 (azure-cli-2.75.0-x64.msi)

  2. 로그인:

    az login
az group list -o table

  3. 웹앱 확인:

    az webapp list --resource-group rg-myManagedPlatform -o table

  4. 코드 배포 (api.zip → imgapikty):

    az webapp deployment source config-zip --resource-group rg-myManagedPlatform --src api.zip --name imgapikty

배포 확인

  • URL: https://imgapikty.azurewebsites.net/

7. Frontend Web App 생성

  • 리소스 그룹: rg-myManagedPlatform
  • 이름: imgwebkty (형식: imgweb<이니셜>)
  • 런타임 스택: .NET 8 (LTS)
  • 운영체제: Windows
  • 지역: Korea Central
  • 가격 책정 플랜: Standard S1
  • Application Insights: 사용 안 함

8. Frontend Web App 환경변수 설정

  • 경로: /App Services / imgweb~~~ → 설정 → 환경변수
  • 앱 설정 추가:
    • 이름: ApiUrl
    • 값: API 앱 URL (https://imgapikty.azurewebsites.net/)

9. ASP.NET Web 앱 코드 확인 및 배포

코드 확인 (VS Code → Allfiles\Labs\01\Starter\Web)

  • Index.cshtml.cs
    • Line 30: OnGetAsync → API에서 이미지 목록 가져오기
    • Line 41: OnPostAsync → 업로드 이미지를 API로 전송

CLI 작업

  1. 웹앱 목록 확인:

    az webapp list --resource-group rg-myManagedPlatform -o table

  2. 코드 배포 (web.zip → imgwebkty):

    az webapp deployment source config-zip --resource-group rg-myManagedPlatform --src web.zip --name imgwebkty

배포 확인

  • URL: https://imgwebkty.azurewebsites.net/
  • 웹 페이지 실행 시 Contoso 포토 갤러리 화면 표시

10. 이미지 업로드 테스트

  • 업로드 파일: banhmi.jpg
    • 경로: Allfiles\Labs\01\Starter\Images
  • 웹 페이지에서 새 이미지 업로드 후 업데이트 확인