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에서 실행됩니다.
이 문서에서는 이미 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에서 다음을 수행합니다.
- Azure Portal 상단의 검색 창에 "웹앱 데이터베이스"를 입력합니다.
- Marketplace 제목 아래에서 웹앱 + 데이터베이스라는 항목을 선택합니다. 만들기 마법사로 직접 이동할 수도 있습니다.
2단계:웹앱 + 데이터베이스 만들기 페이지에서 다음과 같이 양식을 작성합니다.
- 리소스 그룹 → 새로 만들기를 선택하고 msdocs-expressjs-mongodb-tutorial의 이름을 사용합니다.
- 지역 → 가까운 Azure 지역을 선택합니다.
- 이름 → msdocs-expressjs-mongodb-XYZ 여기서 XYZ는 세 개의 임의 문자입니다. 이 이름은 Azure에서 고유해야 합니다.
- 런타임 스택 → 노드 16 LTS.
- 호스팅 계획 → 기본. 준비가 되면 나중에 프로덕션 가격 책정 계층으로 스케일 업할 수 있습니다.
- Azure Cosmos DB for MongoDB는 기본적으로 데이터베이스 엔진으로 선택됩니다. Azure Cosmos DB는 100% MongoDB 호환 API를 제공하는 클라우드 네이티브 데이터베이스입니다. 생성된 데이터베이스 이름(<app-name>-database)을 기록해 둡니다. 나중에 필요합니다.
- 검토 + 만들기를 선택합니다.
- 유효성 검사가 완료되면 만들기를 선택합니다.
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 확인을 사용하도록 설정합니다.
2. 데이터베이스 연결 설정
만들기 마법사가 이미 MongoDB URI를 생성했지만 앱에는 DATABASE_URL
변수와 DATABASE_NAME
변수가 필요합니다. 이 단계에서는 앱에 필요한 형식으로 앱 설정을 만듭니다.
1단계: App Service 페이지의 왼쪽 메뉴에서 [구성]을 선택합니다.
2단계:구성 페이지의 애플리케이션 설정 탭에서 DATABASE_NAME
설정을 만듭니다.
- 새 애플리케이션 설정을 선택합니다.
- 이름 필드에 DATABASE_NAME를 입력합니다.
- 값 필드에 만들기 마법사에서 자동으로 만들어진 데이터베이스 이름을 입력합니다(예: msdocs-expressjs-mongodb-XYZ-database).
- 확인을 선택합니다.
3단계:
- 페이지 아래쪽으로 스크롤하여 MONGODB_URI 연결 문자열을 선택합니다. 만들기 마법사에 의해 생성되었습니다.
- 값 필드에서 복사 단추를 선택하고 다음 단계를 위해 텍스트 파일에 값을 붙여넣습니다. MongoDB 연결 문자열 URI 형식입니다.
- 취소를 선택합니다.
4단계:
- 2단계와 동일한 단계를 사용하여 DATABASE_URL이라는 앱 설정을 만들고
MONGODB_URI
연결 문자열에서 복사한 값(예:mongodb://...
)으로 값을 설정합니다. - 상단에 있는 메뉴 모음에서 저장을 선택합니다.
- 메시지가 표시되면 계속을 선택합니다.
3. 샘플 코드 배포
이 단계에서는 GitHub Actions을 사용하여 GitHub 배포를 구성합니다. 이는 App Service에 배포하는 여러 방법 중 하나일 뿐 아니라 배포 프로세스에서 연속적으로 통합할 수 있는 좋은 방법이기도 합니다. 기본적으로 GitHub 리포지토리에 대한 모든 git push
는 빌드 및 배포 작업을 시작합니다.
1단계: 새 브라우저 창에서 다음을 수행합니다.
- GitHub 계정으로 로그인합니다.
- https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app으로 이동합니다.
- 포크를 선택합니다.
- 포크 만들기를 선택합니다.
2단계: GitHub 페이지에서 .
키를 눌러 브라우저에서 Visual Studio Code를 엽니다.
3단계: 브라우저의 Visual Studio Code 코드에서 탐색기에 있는 config/connection.js를 엽니다.
getConnectionInfo
함수에서 이전에 MongoDB 연결에 대해 만든 앱 설정이 사용되는지 확인합니다(DATABASE_URL
및 DATABASE_NAME
).
4단계: App Service 페이지로 돌아가 왼쪽 메뉴에서 배포 센터를 선택합니다.
5단계: 배포 센터 페이지에서 다음을 수행합니다.
- 원본에서 GitHub를 선택합니다. 기본적으로 GitHub Actions이 빌드 공급자로 선택됩니다.
- GitHub 계정에 로그인하고 프롬프트에 따라 Azure를 인증합니다.
- 조직에서 계정을 선택합니다.
- 리포지토리에서 msdocs-nodejs-mongodb-azure-sample-app을 선택합니다.
- 분기에서 기본을 선택합니다.
- 상단 메뉴에서 저장을 선택합니다. App Service는
.github/workflows
디렉터리의 선택한 GitHub 리포지토리에 워크플로 파일을 커밋합니다.
6단계: 배포 센터 페이지에서 다음을 수행합니다.
- 로그를 선택합니다. 배포 실행이 이미 시작되었습니다.
- 배포 실행에 대한 로그 항목에서 로그 빌드/배포를 선택합니다.
7단계: GitHub 리포지토리로 이동하여 GitHub 작업이 실행 중인지 확인합니다. 워크플로 파일은 빌드 및 배포라는 두 가지 개별 단계를 정의합니다. GitHub 실행이 완료 상태를 표시할 때까지 기다립니다. 약 15분 정도 소요됩니다.
4. 앱으로 이동
1단계: App Service 페이지에서 다음을 수행합니다.
- 왼쪽 메뉴에서 개요를 선택합니다.
- 앱의 URL을 선택합니다.
https://<app-name>.azurewebsites.net
으로 직접 이동할 수도 있습니다.
2단계: 목록에 몇 가지 작업을 추가합니다. 축하합니다! Azure App Service에서 보안 데이터 기반 Node.js 앱을 실행하고 있습니다.
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 페이지에서 다음을 수행합니다.
- 왼쪽 메뉴에서 App Service 로그를 선택합니다.
- 애플리케이션 로깅에서 파일 시스템을 선택합니다.
2단계: 왼쪽 메뉴에서 로그 스트림을 선택합니다. 플랫폼 로그 및 컨테이너 내부의 로그를 포함하여 앱에 대한 로그가 표시됩니다.
6. Kudu를 사용하여 배포된 파일 검사
Azure App Service는 웹앱에 대한 서버 호스팅 환경을 검사할 수 있는 Kudu라는 웹 기반 진단 콘솔을 제공합니다. Kudu를 사용하여 Azure에 배포된 파일을 보고, 애플리케이션의 배포 기록을 검토하고, 호스팅 환경으로 SSH 세션을 열 수도 있습니다.
1단계: App Service 페이지에서 다음을 수행합니다.
- 왼쪽 메뉴에서 고급 도구를 선택합니다.
- 이동을 선택합니다.
https://<app-name>.scm.azurewebsites.net
으로 직접 이동할 수도 있습니다.
2단계: Kudu 페이지에서 배포를 선택합니다.
Git 또는 zip 배포를 사용하여 App Service에 코드를 배포한 경우 웹앱 배포 기록이 표시됩니다.
3단계: Kudu 홈페이지로 돌아가 사이트 wwwroot를 선택합니다.
배포된 폴더 구조를 확인하고 클릭하여 파일을 찾아서 볼 수 있습니다.
7. 리소스 정리
완료되면 리소스 그룹을 삭제하여 Azure 구독에서 모든 리소스를 삭제할 수 있습니다.
1단계: Azure Portal 상단의 검색 창에서 다음을 수행합니다.
- 리소스 그룹 이름을 입력합니다.
- 리소스 그룹을 선택합니다.
2단계: 리소스 그룹 페이지에서 리소스 그룹 삭제를 선택합니다.
3단계:
- 리소스 그룹 이름을 입력하여 삭제를 확인합니다.
- 삭제를 선택합니다.
자주 묻는 질문
- 이 설정 비용은 얼마인가요?
- 다른 도구를 사용하여 가상 네트워크 뒤에서 보호되는 Azure Cosmos DB 서버에 연결하려면 어떻게 해야 하나요?
- 로컬 앱 개발은 GitHub Actions에서 어떻게 작동하나요?
- GitHub Actions 배포가 느린 이유는 무엇인가요?
이 설정 비용은 얼마인가요?
리소스 만들기 가격 책정은 다음과 같습니다.
- 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
작업의 파일에 액세스할 수 있도록 합니다.
build
작업이 끝나면 아티팩트로 파일을 업로드합니다.deploy
작업 시작 시 아티팩트를 다운로드합니다.
이중 작업 프로세스에 소요되는 대부분의 시간은 아티팩트를 업로드하고 다운로드하는 데 사용됩니다. 원하는 경우 두 작업을 하나로 결합하여 워크플로 파일을 단순화할 수 있으므로 업로드 및 다운로드 단계가 필요하지 않습니다.