Azure에 Node.js + MongoDB 웹앱 배포

  • 아티클

Azure App Service는 Linux 운영 체제를 사용하여 확장성이 뛰어난 자체 패치 웹 호스팅 서비스를 제공합니다. 이 자습서에서는 Azure App Service에서 Azure Cosmos DB for MongoDB 데이터베이스에 연결된 Azure App Service에서 보안 Node.js 앱을 만드는 방법을 보여 줍니다. 완료되면 Express.js 앱이 Linux의 Azure App Service에서 실행됩니다.

A diagram showing how the Express.js app will be deployed to Azure App Service and the MongoDB data will be hosted inside of Azure Cosmos DB.

이 문서에서는 이미 Node.js 개발에 익숙하고 Node 및 MongoDB가 로컬로 설치되어 있다고 가정합니다. 활성 구독이 있는 Azure 계정도 필요합니다. Azure 계정이 없으면 무료 계정을 만들 수 있습니다.

샘플 응용 프로그램

이 자습서를 따르려면 리포지토리 https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app에서 샘플 애플리케이션을 복제하거나 다운로드합니다.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

애플리케이션을 로컬로 실행하려면 다음을 수행합니다.

  • npm install 명령을 실행하여 패키지 종속 항목을 설치합니다.
  • .env.sample 파일을 .env에 복사하여 DATABASE_URL 값을 MongoDB URL(예: mongodb://localhost:27017/)로 채웁니다.
  • npm start를 사용하여 애플리케이션을 시작합니다.
  • 앱을 보려면 http://localhost:3000을 찾습니다.

1. App Service 및 Azure Cosmos DB 만들기

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

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

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

1단계: Azure Portal에서 다음을 수행합니다.

  1. Azure Portal 상단의 검색 창에 "웹앱 데이터베이스"를 입력합니다.
  2. Marketplace 제목 아래에서 웹앱 + 데이터베이스라는 항목을 선택합니다. 만들기 마법사로 직접 이동할 수도 있습니다.

A screenshot showing how to use the search box in the top tool bar to find the Web App + Database creation wizard.

2단계:웹앱 + 데이터베이스 만들기 페이지에서 다음과 같이 양식을 작성합니다.

  1. 리소스 그룹 → 새로 만들기를 선택하고 msdocs-expressjs-mongodb-tutorial의 이름을 사용합니다.
  2. 지역 → 가까운 Azure 지역을 선택합니다.
  3. 이름 → msdocs-expressjs-mongodb-XYZ 여기서 XYZ는 세 개의 임의 문자입니다. 이 이름은 Azure에서 고유해야 합니다.
  4. 런타임 스택 → 노드 16 LTS.
  5. 호스팅 계획 → 기본. 준비가 되면 나중에 프로덕션 가격 책정 계층으로 스케일 업할 수 있습니다.
  6. Azure Cosmos DB for MongoDB는 기본적으로 데이터베이스 엔진으로 선택됩니다. Azure Cosmos DB는 100% MongoDB 호환 API를 제공하는 클라우드 네이티브 데이터베이스입니다. 생성된 데이터베이스 이름(<app-name>-database)을 기록해 둡니다. 나중에 필요합니다.
  7. 검토 + 만들기를 선택합니다.
  8. 유효성 검사가 완료되면 만들기를 선택합니다.

A screenshot showing how to configure a new app and database in the Web App + Database wizard.

3단계: 배포를 완료하는 데 몇 분 정도 걸립니다. 배포가 완료되면 리소스로 이동 단추를 선택합니다. App Service 앱으로 직접 이동하지만 다음 리소스가 생성됩니다.

  • 리소스 그룹 → 만들어진 모든 리소스의 컨테이너입니다.
  • App Service 요금제 → App Service의 컴퓨팅 리소스를 정의합니다. 기본 계층의 Linux 계획이 만들어집니다.
  • App Service → 앱을 나타내며 App Service 요금제에서 실행됩니다.
  • 가상 네트워크 → App Service 앱과 통합되고 백 엔드 네트워크 트래픽을 격리합니다.
  • 프라이빗 엔드포인트 → 가상 네트워크의 데이터베이스 리소스에 대한 액세스 엔드포인트입니다.
  • 네트워크 인터페이스 → 프라이빗 엔드포인트에 대한 개인 IP 주소를 나타냅니다.
  • Azure Cosmos DB for MongoDB → 프라이빗 엔드포인트 뒤에서만 액세스할 수 있습니다. 서버에 데이터베이스와 사용자가 만들어집니다.
  • 프라이빗 DNS 영역 → 가상 네트워크에서 Azure Cosmos DB 서버의 DNS 확인을 사용하도록 설정합니다.

A screenshot showing the deployment process completed.

2. 데이터베이스 연결 설정

만들기 마법사가 이미 MongoDB URI를 생성했지만 앱에는 DATABASE_URL 변수와 DATABASE_NAME 변수가 필요합니다. 이 단계에서는 앱에 필요한 형식으로 앱 설정을 만듭니다.

1단계: App Service 페이지의 왼쪽 메뉴에서 [구성]을 선택합니다.

A screenshot showing how to open the configuration page in App Service.

2단계:구성 페이지의 애플리케이션 설정 탭에서 DATABASE_NAME 설정을 만듭니다.

  1. 새 애플리케이션 설정을 선택합니다.
  2. 이름 필드에 DATABASE_NAME를 입력합니다.
  3. 값 필드에 만들기 마법사에서 자동으로 만들어진 데이터베이스 이름을 입력합니다(예: msdocs-expressjs-mongodb-XYZ-database).
  4. 확인을 선택합니다.

A screenshot showing how to see the autogenerated connection string.

3단계:

  1. 페이지 아래쪽으로 스크롤하여 MONGODB_URI 연결 문자열을 선택합니다. 만들기 마법사에 의해 생성되었습니다.
  2. 값 필드에서 복사 단추를 선택하고 다음 단계를 위해 텍스트 파일에 값을 붙여넣습니다. MongoDB 연결 문자열 URI 형식입니다.
  3. 취소를 선택합니다.

A screenshot showing how to create an app setting.

4단계:

  1. 2단계와 동일한 단계를 사용하여 DATABASE_URL이라는 앱 설정을 만들고 MONGODB_URI 연결 문자열에서 복사한 값(예: mongodb://...)으로 값을 설정합니다.
  2. 상단에 있는 메뉴 모음에서 저장을 선택합니다.
  3. 메시지가 표시되면 계속을 선택합니다.

A screenshot showing how to save settings in the configuration page.

3. 샘플 코드 배포

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

1단계: 새 브라우저 창에서 다음을 수행합니다.

  1. GitHub 계정으로 로그인합니다.
  2. https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app으로 이동합니다.
  3. 포크를 선택합니다.
  4. 포크 만들기를 선택합니다.

A screenshot showing how to create a fork of the sample GitHub repository.

2단계: GitHub 페이지에서 . 키를 눌러 브라우저에서 Visual Studio Code를 엽니다.

A screenshot showing how to open the Visual Studio Code browser experience in GitHub.

3단계: 브라우저의 Visual Studio Code 코드에서 탐색기에 있는 config/connection.js를 엽니다. getConnectionInfo 함수에서 이전에 MongoDB 연결에 대해 만든 앱 설정이 사용되는지 확인합니다(DATABASE_URL 및 DATABASE_NAME).

A screenshot showing Visual Studio Code in the browser and an opened file.

4단계: App Service 페이지로 돌아가 왼쪽 메뉴에서 배포 센터를 선택합니다.

A screenshot showing how to open the deployment center in App Service.

5단계: 배포 센터 페이지에서 다음을 수행합니다.

  1. 원본에서 GitHub를 선택합니다. 기본적으로 GitHub Actions이 빌드 공급자로 선택됩니다.
  2. GitHub 계정에 로그인하고 프롬프트에 따라 Azure를 인증합니다.
  3. 조직에서 계정을 선택합니다.
  4. 리포지토리에서 msdocs-nodejs-mongodb-azure-sample-app을 선택합니다.
  5. 분기에서 기본을 선택합니다.
  6. 상단 메뉴에서 저장을 선택합니다. App Service는 .github/workflows 디렉터리의 선택한 GitHub 리포지토리에 워크플로 파일을 커밋합니다.

A screenshot showing how to configure CI/CD using GitHub Actions.

6단계: 배포 센터 페이지에서 다음을 수행합니다.

  1. 로그를 선택합니다. 배포 실행이 이미 시작되었습니다.
  2. 배포 실행에 대한 로그 항목에서 로그 빌드/배포를 선택합니다.

A screenshot showing how to open deployment logs in the deployment center.

7단계: GitHub 리포지토리로 이동하여 GitHub 작업이 실행 중인지 확인합니다. 워크플로 파일은 빌드 및 배포라는 두 가지 개별 단계를 정의합니다. GitHub 실행이 완료 상태를 표시할 때까지 기다립니다. 약 15분 정도 소요됩니다.

A screenshot showing a GitHub run in progress.

4. 앱으로 이동

1단계: App Service 페이지에서 다음을 수행합니다.

  1. 왼쪽 메뉴에서 개요를 선택합니다.
  2. 앱의 URL을 선택합니다. https://<app-name>.azurewebsites.net으로 직접 이동할 수도 있습니다.

A screenshot showing how to launch an App Service from the Azure portal.

2단계: 목록에 몇 가지 작업을 추가합니다. 축하합니다! Azure App Service에서 보안 데이터 기반 Node.js 앱을 실행하고 있습니다.

A screenshot of the Express.js app running in App Service.

5. 진단 로그 스트림

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.');
    });
});

1단계: App Service 페이지에서 다음을 수행합니다.

  1. 왼쪽 메뉴에서 App Service 로그를 선택합니다.
  2. 애플리케이션 로깅에서 파일 시스템을 선택합니다.

A screenshot showing how to enable native logs in App Service in the Azure portal.

2단계: 왼쪽 메뉴에서 로그 스트림을 선택합니다. 플랫폼 로그 및 컨테이너 내부의 로그를 포함하여 앱에 대한 로그가 표시됩니다.

A screenshot showing how to view the log stream in the Azure portal.

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

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

1단계: App Service 페이지에서 다음을 수행합니다.

  1. 왼쪽 메뉴에서 고급 도구를 선택합니다.
  2. 이동을 선택합니다. https://<app-name>.scm.azurewebsites.net으로 직접 이동할 수도 있습니다.

A screenshot showing how to navigate to the App Service Kudu page.

2단계: Kudu 페이지에서 배포를 선택합니다.

A screenshot of the main page in the Kudu SCM app showing the different information available about the hosting environment.

Git 또는 zip 배포를 사용하여 App Service에 코드를 배포한 경우 웹앱 배포 기록이 표시됩니다.

A screenshot showing deployment history of an App Service app in JSON format.

3단계: Kudu 홈페이지로 돌아가 사이트 wwwroot를 선택합니다.

A screenshot showing site wwwroot selected.

배포된 폴더 구조를 확인하고 클릭하여 파일을 찾아서 볼 수 있습니다.

A screenshot of deployed files in the wwwroot directory.

7. 리소스 정리

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

1단계: Azure Portal 상단의 검색 창에서 다음을 수행합니다.

  1. 리소스 그룹 이름을 입력합니다.
  2. 리소스 그룹을 선택합니다.

A screenshot showing how to search for and navigate to a resource group in the Azure portal.

2단계: 리소스 그룹 페이지에서 리소스 그룹 삭제를 선택합니다.

A screenshot showing the location of the Delete Resource Group button in the Azure portal.

3단계:

  1. 리소스 그룹 이름을 입력하여 삭제를 확인합니다.
  2. 삭제를 선택합니다.

A screenshot of the confirmation dialog for deleting a resource group in the Azure portal.:

자주 묻는 질문

이 설정 비용은 얼마인가요?

리소스 만들기 가격 책정은 다음과 같습니다.

  • App Service 요금제는 Basic 계층에서 만들어지며 스케일 업 또는 스케일 다운할 수 있습니다. App Service 가격 책정을 참조하세요.
  • Azure Cosmos DB 서버는 단일 지역에서 만들어지고 다른 지역에 배포할 수 있습니다. Azure Cosmos DB 가격 책정을 참조하세요.
  • 피어링과 같은 추가 기능을 구성하지 않는 한 가상 네트워크에는 요금이 발생하지 않습니다. Azure Virtual Network 가격 책정을 참조하세요.
  • 프라이빗 DNS 영역에는 약간의 요금이 청구됩니다. Azure DNS 가격 책정을 참조하세요.

다른 도구를 사용하여 가상 네트워크 뒤에서 보호되는 Azure Cosmos DB 서버에 연결하려면 어떻게 해야 하나요?

  • 명령줄 도구에서 기본 액세스의 경우 앱의 SSH 터미널에서 mongosh을 실행할 수 있습니다. 앱의 컨테이너는 mongosh와 함께 제공되지 않으므로 수동으로 설치해야 합니다. 설치된 클라이언트는 앱 다시 시작에서 유지되지 않습니다.
  • MongoDB GUI 클라이언트에 연결하려면 컴퓨터가 가상 네트워크 내에 있어야 합니다. 예를 들어 서브넷 중 하나에 연결된 Azure VM이거나 Azure Virtual Network와 사이트 간 VPN 연결이 있는 온-프레미스 네트워크의 컴퓨터일 수 있습니다.
  • 포털의 Azure Cosmos DB 관리 페이지의 MongoDB 셸에서 연결하려면 컴퓨터도 가상 네트워크 내에 있어야 합니다. 대신 로컬 컴퓨터의 IP 주소에 대한 Azure Cosmos DB 서버의 방화벽을 열 수 있지만 구성에 대한 공격 표면이 증가합니다.

로컬 앱 개발은 GitHub Actions에서 어떻게 작동하나요?

App Service에서 자동 생성된 워크플로 파일을 예로 들면 각 git push는 새 빌드 및 배포 실행을 시작합니다. GitHub 리포지토리의 로컬 클론에서 원하는 업데이트를 GitHub로 푸시합니다. 예시:

git add .
git commit -m "<some-message>"
git push origin main

GitHub Actions 배포가 느린 이유는 무엇인가요?

App Service에서 자동 생성된 워크플로 파일은 빌드 후 배포, 2개 작업 실행을 정의합니다. 각 작업은 고유한 깨끗한 환경에서 실행되기 때문에 워크플로 파일은 deploy 작업이 build 작업의 파일에 액세스할 수 있도록 합니다.

이중 작업 프로세스에 소요되는 대부분의 시간은 아티팩트를 업로드하고 다운로드하는 데 사용됩니다. 원하는 경우 두 작업을 하나로 결합하여 워크플로 파일을 단순화할 수 있으므로 업로드 및 다운로드 단계가 필요하지 않습니다.

다음 단계

Azure 개발자 센터의 JavaScript

App Service에서 Node.js 앱 구성

 사용자 지정 도메인 및 인증서를 사용하여 보호