Azure App Service에 Node.js 배포

소개

이 가이드에서는 GitHub Actions을(를) 사용하여 Node.js 프로젝트를 Azure App Service 에 빌드하고 테스트하고 배포하는 방법에 대해 설명합니다.

필수 조건

GitHub Actions 워크플로를 만들기 전에 먼저 다음 설정 단계를 완료해야 합니다.

1. Azure App Service 요금제를 만듭니다.

   예를 들어 Azure CLI를 사용하여 새 App Service 요금제를 만들 수 있습니다.

   Bash

   az appservice plan create \
      --resource-group MY_RESOURCE_GROUP \
      --name MY_APP_SERVICE_PLAN \
      --is-linux
   

   위의 명령에서 MY_RESOURCE_GROUP을 기존 Azure 리소스 그룹으로 바꾸고 MY_APP_SERVICE_PLAN을 App Service 요금제의 새 이름으로 바꿉니다.

   Azure CLI 사용에 대한 자세한 내용은 Azure 설명서를 참조하세요.

   • 인증은 “Azure CLI로 로그인”을 참조하세요.
   • 새 리소스 그룹을 만들어야 하는 경우 “az group”을 참조하세요.

2. 웹앱 만들기

   예를 들어 Azure CLI를 사용하여 Node.js 런타임으로 Azure App Service 웹앱을 만들 수 있습니다.

   Bash

   az webapp create \
       --name MY_WEBAPP_NAME \
       --plan MY_APP_SERVICE_PLAN \
       --resource-group MY_RESOURCE_GROUP \
       --runtime "NODE|14-lts"
   

   위의 명령에서 매개 변수를 고유한 값으로 바꿉니다. 여기서 MY_WEBAPP_NAME은 웹앱의 새 이름입니다.

3. Azure 게시 프로필을 구성하고 AZURE_WEBAPP_PUBLISH_PROFILE 비밀을 만듭니다.

   게시 프로필을 사용하여 Azure 배포 자격 증명을 생성합니다. 자세한 내용은 Azure 설명서의 “배포 자격 증명 생성”을 참조하세요.

   GitHub 리포지토리에서 게시 프로필의 콘텐츠가 포함된 AZURE_WEBAPP_PUBLISH_PROFILE이라는 비밀을 만듭니다. 비밀을 만드는 방법의 자세한 내용은 "GitHub Actions에서 비밀 사용"을 참조하세요.

4. 필요에 따라 배포 환경을 구성합니다. 환경은 일반적인 배포 대상(예: production, staging 또는 development)을 설명하는 데 사용됩니다. GitHub Actions 워크플로가 환경에 배포되면 환경이 리포지토리의 기본 페이지에 표시됩니다. 작업을 진행하기 위해 승인을 요구하거나 워크플로, 사용자 지정 배포 보호 규칙을 사용하여 게이트 배포를 트리거할 수 있는 분기를 제한하거나 비밀에 대한 액세스를 제한할 수 있습니다. 환경을 만드는 방법에 대한 자세한 내용은 "배포 환경 관리"을 참조하세요.

워크플로 만들기

필수 구성 요소를 완료한 후에는 워크플로 만들기를 진행할 수 있습니다.

다음 예시 워크플로는 main 분기에 푸시가 있을 때 Node.js 프로젝트를 빌드하고 테스트하고 Azure App Service에 배포하는 방법을 보여줍니다.

워크플로 env 키에서 AZURE_WEBAPP_NAME을 만든 웹앱의 이름으로 설정했는지 확인합니다. 프로젝트 경로가 리포지토리 루트가 아닌 경우 AZURE_WEBAPP_PACKAGE_PATH를 프로젝트 경로로 변경합니다. 10.x 이외의 Node.js 버전을 사용하는 경우 NODE_VERSION을 사용 중인 버전으로 변경합니다.

배포 환경을 구성한 경우 환경의 이름으로 environment 값을 변경합니다. 환경을 구성하지 않은 경우 또는 워크플로가 프라이빗 리포지토리에 있고 GitHub Enterprise Cloud를 사용하지 않는 경우 environment 키를 삭제합니다.

# 이 워크플로는 GitHub에서 인증되지 않은 작업을 사용합니다.
# 작업은 타사에서 제공하며
# 별도의 서비스 약관, 개인정보처리방침, 지원 설명서에서 규정됩니다.
# 참조하세요.

# 커밋 SHA에 작업을 고정하는 것이 좋습니다.
# 최신 버전을 얻으려면 SHA를 업데이트해야 합니다.
# 태그 또는 분기를 참조할 수도 있지만 경고 없이 작업이 변경될 수 있습니다.

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: MY_WEBAPP_NAME   # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '14.x'                # set this to the node version to use

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v4
      with:
        name: node-app
        path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v4
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

# 이 워크플로는 GitHub에서 인증되지 않은 작업을 사용합니다.
# 작업은 타사에서 제공하며
# 별도의 서비스 약관, 개인정보처리방침, 지원 설명서에서 규정됩니다.
# 참조하세요.

# 커밋 SHA에 작업을 고정하는 것이 좋습니다.
# 최신 버전을 얻으려면 SHA를 업데이트해야 합니다.
# 태그 또는 분기를 참조할 수도 있지만 경고 없이 작업이 변경될 수 있습니다.

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: MY_WEBAPP_NAME   # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '14.x'                # set this to the node version to use

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v4
      with:
        name: node-app
        path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v4
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

추가 리소스

다음 리소스도 유용할 수 있습니다.

• 원래의 워크플로 템플릿은 GitHub Actions starter-workflows 리포지토리의 azure-webapps-node.yml 항목을 참조하세요.
• 웹앱을 배포하는 데 사용되는 작업은 공식 Azure Azure/webapps-deploy 작업입니다.
• Azure에 배포하는 GitHub Actions 워크플로에 대한 자세한 예시는 actions-workflow-samples 리포지토리를 참조하세요.
• Azure 웹앱 설명서의 "Azure에서 Node.js 웹 앱 만들기" 빠른 시작은 Azure App Service 확장과 함께 Visual Studio Code을(를) 사용하는 방법을 보여줍니다.