자습서: Azure에 Node.js + MongoDB 웹앱 배포

• 활성 구독이 있는 Azure 계정. Azure 계정이 없으면 무료 계정을 만들 수 있습니다.
• GitHub 계정. 무료로 가져올 수도 있습니다.
• Express.js 개발에 대한 지식.
• (선택 사항) GitHub Copilot을 사용해 보려면 GitHub Copilot 계정 30일 평가판을 사용할 수 있습니다.

• 활성 구독이 있는 Azure 계정. Azure 계정이 없으면 무료 계정을 만들 수 있습니다.
• Azure 개발자 CLI를 설치해야 합니다. Azure Developer CLI가 이미 설치되어 있으므로 Azure Cloud Shell을 사용하여 단계를 수행할 수 있습니다.
• Express.js 개발에 대한 지식.
• (선택 사항) GitHub Copilot을 사용해 보려면 GitHub Copilot 계정 30일 평가판을 사용할 수 있습니다.

2. App Service 및 Azure Cosmos DB 만들기

이 단계에서는 Azure 리소스를 만듭니다. 이 자습서에 사용된 단계에서는 App Service 및 Azure Cosmos DB for MongoDB를 포함하는 기본 보안 리소스 세트를 만듭니다. 만들기 프로세스의 경우 다음을 지정합니다.

• 웹앱의 이름입니다. 이는 https://<app-name>-<hash>.<region>.azurewebsites.net 형식의 앱에 대한 DNS 이름의 일부로 사용됩니다.
• 전 세계에서 앱을 물리적으로 실행할 지역입니다. 사용자 앱의 DNS 이름의 일부로도 사용됩니다.
• 앱의 런타임 스택입니다. 여기서 앱에 사용할 노드 버전을 선택합니다.
• 앱에 대한 호스팅 계획입니다. 앱에 대한 기능 및 크기 조정 용량 세트를 포함하는 가격 책정 계층입니다.
• 앱의 리소스 그룹입니다. 리소스 그룹을 사용하면 애플리케이션에 필요한 모든 Azure 리소스를 논리 컨테이너에 그룹화할 수 있습니다.

Azure Portal에 로그인하고 다음 단계에 따라 Azure App Service 리소스를 만듭니다.

문제가 있나요? 문제 해결 섹션을 확인하세요.

3. 보안 연결 비밀

만들기 마법사는 앱 설정이 연결 문자열을 이미 생성했습니다. 그러나 보안을 위한 가장 좋은 방법은 App Service에서 비밀을 완전히 보호하는 것입니다. 서비스 커넥터의 도움으로 비밀을 키 자격 증명 모음으로 옮기고 앱 설정을 Key Vault 참조로 변경합니다.

문제가 있나요? 문제 해결 섹션을 확인하세요.

4. 샘플 코드 배포

이 단계에서는 GitHub Actions를 사용하여 GitHub 배포를 구성합니다. 이는 App Service에 배포하는 여러 방법 중 하나일 뿐 아니라 배포 프로세스에서 연속적으로 통합할 수 있는 좋은 방법이기도 합니다. 기본적으로 GitHub 리포지토리에 대한 모든 git push는 빌드 및 배포 작업을 시작합니다.

문제가 있나요? 문제 해결 섹션을 확인하세요.

5. 앱으로 이동

6. 진단 로그 스트림

Azure App Service는 애플리케이션 문제를 진단하는 데 도움이 되도록 콘솔에 기록된 모든 메시지를 캡처합니다. 샘플 앱은 각 엔드포인트에 콘솔 로그 메시지를 출력하여 이 기능을 보여 줍니다. 예를 들어 get 엔드포인트는 데이터베이스에서 검색된 작업 수에 대한 메시지를 출력하고 오류가 발생하면 오류 메시지가 나타납니다.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

7. Kudu를 사용하여 배포된 파일 검사

Azure App Service는 웹앱에 대한 서버 호스팅 환경을 검사할 수 있는 Kudu라는 웹 기반 진단 콘솔을 제공합니다. Kudu를 사용하여 Azure에 배포된 파일을 보고, 애플리케이션의 배포 기록을 검토하고, 호스팅 환경으로 SSH 세션을 열 수도 있습니다.

8. 리소스 정리

완료되면 리소스 그룹을 삭제하여 Azure 구독에서 모든 리소스를 삭제할 수 있습니다.

2. Azure 리소스 만들기 및 샘플 앱 배포

이 단계에서는 Azure 리소스를 만들고 Linux의 App Service에 샘플 앱을 배포합니다. 이 자습서에 사용된 단계에서는 App Service와 Azure Cosmos DB를 포함하는 기본 보안 리소스 세트를 만듭니다.

개발 컨테이너에는 이미 AZD(Azure Developer CLI)가 있습니다.

1. 리포지토리 루트에서 azd init를 실행합니다.

   azd init --template nodejs-app-service-cosmos-redis-infra
   

2. 메시지가 표시되면 다음 답변을 제공합니다.

   질문	답변
   현재 디렉터리는 비어 있지 않습니다. '<your-directory>'에서 프로젝트를 초기화하시겠습니까?	예
   이러한 파일로 어떤 작업을 하고 싶나요?	기존 파일을 변경하지 않은 상태로 유지
   새 환경 이름 입력	고유한 이름을 입력합니다. AZD 템플릿은 Azure(<app-name>-<hash>.azurewebsites.net)에서 웹앱의 DNS 이름의 일부로 이 이름을 사용합니다. 영숫자 및 하이픈은 허용됩니다.

3. azd auth login 명령을 실행하고 프롬프트에 따라 Azure에 로그인합니다.

   azd auth login
   

4. 필요한 Azure 리소스를 만들고 azd up 명령을 사용하여 앱 코드를 배포합니다. 프롬프트에 따라 Azure 리소스에 대해 원하는 구독 및 위치를 선택합니다.

   azd up
   

   azd up 명령을 완료하는 데 약 15분이 걸립니다(Redis Cache에 가장 많은 시간이 소요됨). 또한 애플리케이션 코드가 컴파일 및 배포되지만 여기서는 나중에 App Service에서 작동하도록 코드를 수정할 것입니다. 실행되는 동안 명령은 Azure 배포에 대한 링크를 포함하여 프로비전 및 배포 프로세스에 대한 메시지를 제공합니다. 완료되면 명령은 배포 애플리케이션에 대한 링크도 표시합니다.

   이 AZD 템플릿에는 다음 Azure 리소스를 사용하여 기본 보안 아키텍처를 생성하는 파일(azure.yaml 및 인프라 디렉터리)이 포함되어 있습니다.

   • 리소스 그룹: 생성된 모든 리소스에 대한 컨테이너입니다.
   • App Service 계획: App Service에 대한 컴퓨팅 리소스를 정의합니다. B1 계층에 Linux 계획이 만들어집니다.
   • App Service: 앱을 나타내고 App Service 계획에서 실행됩니다.
   • 가상 네트워크: App Service 앱과 통합되고 백 엔드 네트워크 트래픽을 격리합니다.
   • MongoDB API를 사용하는 Azure Cosmos DB 계정: 프라이빗 엔드포인트를 통해서만 액세스할 수 있습니다. 서버에 데이터베이스가 만들어집니다.
   • Azure Cache for Redis: 가상 네트워크 내에서만 액세스할 수 있습니다.
   • Key Vault: 프라이빗 엔드포인트를 통해서만 액세스할 수 있습니다. App Service 앱의 비밀을 관리하는 데 사용됩니다.
   • 프라이빗 엔드포인트: 가상 네트워크의 키 자격 증명 모음, 데이터베이스 서버 및 Redis Cache에 대한 액세스 엔드포인트입니다.
   • 프라이빗 DNS 영역: 가상 네트워크에서 Cosmos DB 데이터베이스, Redis 캐시, 키 자격 증명 모음의 DNS 확인을 사용합니다.
   • log Analytics 작업 영역: 로그를 쿼리할 수도 있는 로그를 발송하기 위한 앱의 대상 컨테이너 역할을 합니다.

   명령이 리소스를 만들고 처음으로 애플리케이션 코드를 배포하는 작업을 완료하면, 배포된 샘플 앱은 아직 작동하지 않습니다. Azure의 데이터베이스에 연결하려면 약간의 변경을 해야 하기 때문입니다.

3. 연결 문자열 확인

사용하는 AZD 템플릿은 앱 설정으로 이미 연결 변수를 생성하고 편의를 위해 터미널에 출력합니다. 앱 설정은 코드 리포지토리에서 연결 비밀을 유지하는 좋은 방법입니다.

1. AZD 출력에서 앱 설정 AZURE_COSMOS_CONNECTIONSTRING을(를) 찾습니다. 설정 이름만 표시됩니다. AZD 출력에서 다음과 같이 표시됩니다.

    App Service app has the following app settings:
            - AZURE_COSMOS_CONNECTIONSTRING
            - AZURE_REDIS_CONNECTIONSTRING
            - AZURE_KEYVAULT_RESOURCEENDPOINT
            - AZURE_KEYVAULT_SCOPE
    

   AZURE_COSMOS_CONNECTIONSTRING에는 Azure의 Cosmos DB 데이터베이스에 대한 연결 문자열이 포함됩니다. 나중에 코드에서 사용해야 합니다.

2. 편의를 위해 AZD 템플릿에는 앱의 앱 설정 페이지에 대한 직접 링크가 표시됩니다. 링크를 찾아 새 브라우저 탭에서 엽니다.

문제가 있나요? 문제 해결 섹션을 확인하세요.

4. 샘플 코드 수정 및 다시 배포

문제가 있나요? 문제 해결 섹션을 확인하세요.

5. 앱으로 이동

1. AZD 출력에서 앱의 URL을 찾아 브라우저에서 탐색합니다. URL은 AZD 출력에서 다음과 같습니다.

    Deploying services (azd deploy)
   
      (✓) Done: Deploying service web
      - Endpoint: https://<app-name>-<hash>.azurewebsites.net/
    

2. 목록에 몇 가지 작업을 추가합니다.

   

   축하합니다. Azure Cosmos DB에 대한 보안 연결을 통해 Azure App Service에서 웹앱을 실행하고 있습니다.

문제가 있나요? 문제 해결 섹션을 확인하세요.

6. 진단 로그 스트림

Azure App Service는 애플리케이션 문제를 진단하는 데 도움이 되도록 콘솔에 기록된 모든 메시지를 캡처합니다. 샘플 앱은 각 엔드포인트에 콘솔 로그 메시지를 출력하여 이 기능을 보여 줍니다. 예를 들어 get 엔드포인트는 데이터베이스에서 검색된 작업 수에 대한 메시지를 출력하고 오류가 발생하면 오류 메시지가 나타납니다.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

AZD 출력에서 App Service 로그를 스트리밍하는 링크를 찾아 브라우저에서 탐색합니다. 링크는 AZD 출력에서 다음과 같습니다.

Stream App Service logs at: https://portal.azure.com/#@/resource/subscriptions/<subscription-guid>/resourceGroups/<group-name>/providers/Microsoft.Web/sites/<app-name>/logStream

.NET, Node.js, Python 및 Java 애플리케이션에 대한 Azure Monitor OpenTelemetry 사용 시리즈의 Java 앱에서 로깅에 대해 자세히 알아보세요.

문제가 있나요? 문제 해결 섹션을 확인하세요.

7. 리소스 정리

현재 배포 환경에서 모든 Azure 리소스를 삭제하려면 azd down을(를) 실행하고 프롬프트를 따릅니다.

azd down