Azure 실습 1일차

Source: Dev.to

프로젝트 설정

1. 레포 복제

VS Code에서 수행 단계:

git init
git clone 
cd 

• 이제 소스 코드를 로컬에서 사용할 수 있습니다
• 다음 단계:
  • npm 의존성 설치
  • 프로젝트 빌드
  • Azure Web App을 통해 배포

단계 2: Azure DevOps 프로젝트 만들기

이동

• New Project 클릭
• 프로젝트 이름 입력
• 프로젝트가 성공적으로 생성됨

단계 3: 코드 Azure Repos에 푸시

(세부 내용은 생략 – 앞 단계에서 만든 Azure Repos에 로컬 레포를 푸시합니다.)

단계 4: Azure App Service – 애플리케이션 호스팅

• Web App 만들기
• 이동
• App Services 검색
• Create → Web App 클릭

구성 세부 정보

• Subscription
• Resource Group
• App Name
• Publish
• Runtime Stack
• Version
• OS
• Region
• App Service Plan 선택

앱 확인:

• Browse 클릭
• 아직 코드가 배포되지 않은 기본 Azure App Service 페이지가 표시됩니다

단계 5: 빌드 파이프라인 – 클래식 편집기

• Azure DevOps → Pipelines → Create Pipeline
• Use Classic Editor 선택

파이프라인 작업

1. npm install

   • 작업: npm
   • 명령: install
   • 작업 디렉터리: root

2. npm build

   • 작업: npm
   • 명령: custom
   • 사용자 지정 명령: run build

3. Publish Build Artifacts

   • 작업: Publish Build Artifacts
   • 경로: build
   • 아티팩트 이름: drop

4. Azure App Service Deploy

   • 작업: Azure App Service Deploy
   • 서비스 연결: Authorize (Service Principal 생성)
   • 앱 유형: Web App on Linux
   • 앱 이름: Created App Service
   • 패키지: build
   • Runtime Stack: Static Site

단계 6: 애플리케이션 설정

App Service → Configuration → Application Settings 로 이동하여 추가:

저장하고 Restart 로 앱 서비스를 재시작합니다.

앱이 정상적으로 로드됩니다

YAML 파이프라인 – 처음부터

trigger:
- main

stages:
- stage: Build
  jobs:
  - job: BuildJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: Npm@1
      inputs:
        command: install

    - task: Npm@1
      inputs:
        command: custom
        customCommand: run build

    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: build
        artifactName: drop

- stage: Deploy
  jobs:
  - job: DeployJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: DownloadBuildArtifacts@0
      inputs:
        artifactName: drop

    - task: AzureWebApp@1
      inputs:
        appType: webAppLinux
        appName: 
        package: $(System.DefaultWorkingDirectory)/drop/build
        runtimeStack: STATIC

최종 결과

• Build Stage ✔
• Deploy Stage ✔
• Artifact created ✔
• App deployed ✔
• Website working ✔

정리 알림

불필요한 Azure 요금을 방지하기 위해 Resource Group을 삭제하세요.