Visual Studio Code와 Azure를 사용한 Node.js 개발

Name: Visual Studio Code
Author: Microsoft

2017년 1월 4일 - Jonathan Carter, @lostintangent

Visual Studio Code와 Azure를 통해 Node.js 애플리케이션을 구축, 디버깅 및 배포하는 전반적인 개발자 경험을 단순화하고 개선하는 데 기여하고자 합니다. Node Interactive North America 2016에서 저는 커뮤니티 피드백을 바탕으로 최근 진행해 온 작업 일부를 시연할 수 있어서 기뻤고, 이 글은 제가 발표에서 다룰 수 있었던 것보다 더 자세한 내용을 원하는 분들을 위해 해당 워크플로우를 담고자 합니다.

데모는 Scotch.io에서 생성 및 게시한 간단한 할 일 목록 앱을 사용합니다. 이 앱은 단일 페이지 MEAN 애플리케이션이며, 따라서 데이터베이스로 MongoDB, REST API/웹 서버로 Node/Express, 프론트엔드 UI로 Angular.js 1.x를 사용합니다. 관심 있는 특정 섹션으로 건너뛰려면 아래 목차를 사용하거나 계속 읽으십시오.

전제 조건
프로젝트 설정
통합 터미널
통합 Git 버전 관리
프로젝트/코드 탐색
자동 완성
앱 실행
통합 디버깅
전체 스택 디버깅
앱 Docker화
앱 배포
DocumentDB 사용
정리
결론

전제 조건

이 데모를 효과적으로 진행하려면 다음 소프트웨어가 설치되어 있어야 합니다.

여기에서 다운로드할 수 있는 Visual Studio Code Insiders 빌드. 기술적으로 Insiders 빌드가 필수는 아니지만, 최신 버그 수정/기능 향상(Chrome Canary 빌드와 유사)에 액세스할 수 있고 VS Code 팀에서 사용하는 빌드이므로 모두 사용하도록 권장합니다.
여기에서 다운로드할 수 있는 Docker. 또한, 워크플로우에서 생성될 Docker 이미지를 게시하려면 DockerHub 계정이 필요합니다.
여기에서 설치 지침을 제공하는 Azure CLI (>=v0.1.0b11). 또한 Azure 계정이 있어야 하며 az login을 실행하고 대화형 로그인을 따라 Azure CLI로 로그인해야 합니다.
여기에서 설치 지침을 제공하는 Yarn. 기술적으로 필수는 아니지만, 아래 NPM 클라이언트를 대신하여 사용됩니다. 권장합니다!

추가로, 데모 앱은 MongoDB를 사용하므로 표준 27017 포트에서 수신 대기하는 로컬에서 실행되는 MongoDB 인스턴스가 필요합니다. 이를 달성하는 가장 간단한 방법은 Docker가 설치된 후 다음 명령을 실행하는 것입니다: docker run -it -p 27017:27017 mongo.

프로젝트 설정

시작하려면 할 일 목록 샘플 프로젝트를 가져와서 사용해 보겠습니다. 이를 위해 다음 단계를 수행하십시오.

Visual Studio Code를 열고 F1을 눌러 명령 팔레트를 불러옵니다 (또는 보기 메뉴에서 명령 팔레트...를 선택합니다).
gitcl을 입력하여 Git: Clone 명령을 찾고 ENTER를 누릅니다.

참고: VS Code 명령 팔레트는 "퍼지 검색"을 지원하므로, 일반적으로 사용되는 명령을 찾기 위해 적은 키 입력을 사용할 수 있습니다.

프롬프트에 https://github.com/scotch-io/node-todo를 입력하고 ENTER를 누릅니다.
프로젝트를 복제할 폴더를 선택하거나 새 폴더(예: Todos)를 만듭니다. 이 시점에서 VS Code는 리포지토리를 복제하고 새로 복제된 프로젝트를 루트로 하는 새 작업 영역을 시작합니다.

대안으로 Git CLI를 사용하여 샘플 리포지토리를 복제할 수도 있습니다. 하지만 이 연습은 명령 팔레트를 통해 VS Code가 제공하는 생산성 향상 기능 중 일부를 설명하는 데 도움이 됩니다. F1을 누르고 제공되는 다양한 명령(및 설치된 확장 프로그램)을 탐색하여 더 많은 작업을 수행할 수 있는지 확인하는 것이 좋습니다.

통합 터미널

이것은 Node.js 프로젝트이므로 가장 먼저 해야 할 일은 Git 리포지토리에 커밋되지 않았으므로 모든 종속성이 NPM에서 설치되었는지 확인하는 것입니다. 표준 터미널에서 이 단계를 수행할 수 있습니다(저는 Hyper를 권장합니다!). 또는 선호하는 경우 CTRL+`를 눌러 VS Code 통합 터미널을 열고 선호하는 NPM 클라이언트에 따라 npm install 또는 yarn을 실행할 수도 있습니다. 저는 Yarn이 매우 빠르고 훌륭한 워크플로우 개선 사항을 제공하므로 아직 사용해 보지 않았다면 확인해 보기를 권장합니다.

VS Code는 기존 워크플로우에 자연스럽게 통합되므로 통합 터미널이 유용한지 여부와 시기는 사용자가 결정합니다. VS Code를 전체 화면으로 실행하는 경우(특히 새 젠 모드!) 간단한/일회성 명령에 통합 터미널을 사용하는 것이 좋다고 생각합니다. 반면에 더 "정교한" 작업을 하는 경우 Hyper의 전체 화면 버전으로 전환할 것입니다. 선택과 유연성이 여기서 핵심입니다.

통합 Git 버전 관리

Yarn을 통해 앱의 종속성을 설치한 결과 yarn.lock 파일이 생성되었으며, 이는 CI 빌드, 프로덕션 배포 또는 다른 개발자의 머신에서 예상치 못한 일이 발생하지 않고 미래에 정확히 동일한 종속성을 예측 가능한 방식으로 다시 획득할 수 있도록 합니다.

이 파일을 소스 제어에 커밋하는 것이 좋습니다. 이를 위해 VS Code의 통합 Git 탭(Git 로고가 있는 탭)으로 쉽게 전환하고 새로 추가된 파일을 확인합니다. 커밋 메시지를 입력하고 CMD+Enter를 누르거나 (체크 표시 아이콘을 클릭) 로컬에서 변경 사항을 스테이징/커밋할 수 있습니다.

이것은 단순히 수동으로 실행했을 Git CLI 명령을 백그라운드에서 자동화하는 것이므로, VS Code의 통합이 사용자에게 작동하는지 여부를 결정하는 것은 다시 한 번 사용자의 몫입니다. 궁금하다면 ... 메뉴 항목을 클릭하고 Git 출력 보기를 선택하여 Git 출력 창을 열 수 있습니다. 그러면 VS Code가 사용자를 대신하여 수행하는 모든 기본 Git 활동이 표시됩니다.

코드베이스에 익숙해지기 위해 VS Code가 제공하는 탐색 기능의 몇 가지 예제를 살펴보겠습니다.

CMD+P를 누르고 .js를 입력하면 프로젝트의 모든 JavaScript/JSON 파일과 해당 파일이 포함된 디렉토리를 볼 수 있습니다. 이 대화 상자도 명령 팔레트와 동일한 "퍼지 검색"을 지원하므로 매우 유연합니다.
앱의 시작 스크립트인 server.js를 선택합니다.
6행에서 가져온 database 변수에 마우스를 가져가면 해당 "타입"을 볼 수 있습니다. 파일을 읽고 이해하는 데 더 많은 시간을 소비하므로, 변수/모듈/타입을 빠르게 검사하는 이 기능은 매우 유용할 수 있습니다!
단순히 커서를 database 이름 범위 안에 두면 동일한 파일 내에서 해당 이름에 대한 다른 모든 참조를 빠르게 볼 수 있으며, 마우스 오른쪽 버튼을 클릭하고 참조 보기를 선택하면 프로젝트 전체에서 사용 사례를 볼 수 있습니다.
마우스를 가져가 변수 타입을 빠르게 검사하는 것 외에도, 다른 파일에 있는 변수의 정의도 검사할 수 있습니다! 예를 들어, 12행의 database.localUrl에서 마우스 오른쪽 버튼을 클릭하고 정의 보기를 선택하면 앱이 기본적으로 MongoDB에 연결하도록 구성된 방법을 빠르게 볼 수 있습니다.

클라우드 네이티브인 Twelve-Factor 앱은 이와 같이 구성을 하드코딩하지 않으므로, MongoDB 연결 문자열을 환경 변수를 통해 설정하는 것이 더 좋습니다. 환경 변수는 배포/환경마다 쉽게 변경할 수 있습니다. 변경해 봅시다!

자동 완성

자동 완성은 문서 참조 또는 API 오타에 대한 걱정 없이 코드를 작성/탐색할 때 생산성을 크게 향상시킬 수 있습니다. 예를 들어, 하드코딩된 MongoDB 연결 문자열을 환경 변수로 보강하기 위해 12행을 다음과 같이 변경해 봅시다.

mongoose.connect(database.localUrl);

이것으로

mongoose.connect(process.env.MONGO_URL || database.localUrl);

process.를 입력할 때 VS Code는 아무것도 구성할 필요 없이 Node.js process 전역 API의 사용 가능한 멤버를 표시하는 것을 알 수 있습니다.

이것은 VS Code가 백그라운드에서 TypeScript를 사용하기 때문에(JavaScript의 경우에도!) 타입 정보를 제공하여 입력 시 자동 완성 목록에 정보를 제공할 수 있습니다. VS Code는 이것이 Node.js 프로젝트임을 감지하고 결과적으로 NPM에서 Node.js의 TypeScript 타이핑 파일에 대한 자동 다운로드를 수행합니다. 이를 통해 Buffer 또는 setTimeout과 같은 다른 Node.js 전역 변수뿐만 아니라 fs 및 http와 같은 모든 내장 모듈에 대한 자동 완성을 얻을 수 있습니다.

내장 Node.js API 외에도, 이 타이핑 자동 획득은 React, Underscore, Express와 같은 2,000개 이상의 타사 라이브러리에 대해서도 작동합니다. 예를 들어, 구성된 MongoDB 데이터베이스 인스턴스에 연결할 수 없을 때 샘플 앱이 충돌하는 것을 Mongoose에서 방지하려면 13행에 다음 코드 줄을 추가합니다.

mongoose.connection.on('error', () => {
  console.log('DB connection error');
});

이를 입력할 때 아무것도 할 필요 없이 다시 자동 완성을 볼 수 있다는 것을 알 수 있습니다.

이러한 자동 완성 기능을 지원하는 라이브러리가 어떤 것인지 알아보려면 모든 TypeScript 타입 정의의 커뮤니티 기반 소스인 훌륭한 DefinitelyTyped 프로젝트를 찾아볼 수 있습니다.

앱 실행

이제 이 앱을 탐색하고 약간 수정했으므로 실행할 차례입니다. 이렇게 하려면 F5를 눌러 앱을 실행합니다. 앱을 실행하려고 시도한 것이 처음이므로, 사용할 "실행 구성" 유형을 지정하라는 메시지가 표시됩니다.

Node.js v6.3+ (Experimental)을 선택하면 최근 Node.js에 추가된 새로운 Chrome 디버깅 프로토콜 지원을 사용합니다. 이렇게 하면 프로젝트에 launch.json이라는 새 파일이 생성됩니다. 이 파일은 VS Code가 앱을 디버그하기 위해 앱을 실행하거나 연결하는 방법을 알려줍니다.

앱의 시작 스크립트가 server.js임을 감지했음을 알 수 있으며, 디버깅이 제대로 작동하도록 아무것도 변경할 필요가 없습니다.

이 시점에서 F5를 다시 눌러 앱을 실행합니다. 그러면 앱이 실행되고 VS Code의 디버그 콘솔 창이 열리며, 새로 실행 중인 앱의 stdout이 표시됩니다.

또한, 이 콘솔은 새로 실행 중인 앱에 연결되어 있으므로 JavaScript 표현식을 입력할 수 있습니다. 이 표현식은 앱에서 평가되며 자동 완성 기능도 포함됩니다! 예를 들어, 콘솔에 process.env를 입력하여 무슨 의미인지 확인해 보세요.

브라우저를 열고 https://:8080으로 이동하여 실행 중인 앱을 볼 수 있습니다. 텍스트 상자에 메시지를 입력하고 몇 개의 할 일을 추가/제거하여 앱이 어떻게 작동하는지 느껴보세요.

디버깅

앱을 실행하고 통합 콘솔을 통해 상호 작용하는 것 외에도 VS Code는 코드 내에서 직접 중단점을 설정하는 기능을 제공합니다. 예를 들어, CTRL+P를 눌러 파일 선택기를 열고 route를 입력한 다음 route.js 파일을 선택합니다.

줄 번호 왼쪽 여백을 편집기 내에서 클릭하면 줄 28에 중단점을 설정합니다. 이 줄은 앱이 할 일을 추가하려고 할 때 호출되는 Express 라우트를 나타냅니다.

참고: 표준 중단점 외에도 VS Code는 조건부 중단점을 지원합니다. 이를 통해 앱이 실행을 일시 중지해야 하는 시점을 사용자 지정할 수 있습니다. 사용하려면 여백을 마우스 오른쪽 버튼으로 클릭하고 조건부 중단점 추가...를 선택한 다음 JavaScript 표현식(예: foo = "bar") 또는 중단점을 조건으로 할 히트 수를 지정합니다.

설정이 완료되면 실행 중인 앱으로 돌아가서 할 일을 추가합니다. 이렇게 하면 앱 실행이 즉시 일시 중지되고 VS Code는 중단점을 설정한 28행에서 일시 중지됩니다.

일시 중지된 파일 내에서 표현식에 마우스를 가져가 현재 값을 보거나, 지역 변수/감시 변수 및 호출 스택을 검사하고, 상단의 디버그 도구 모음을 사용하여 실행을 단계별로 진행할 수 있습니다. IDE에서 기대하는 모든 기능을 가벼운 텍스트 편집기에서 사용할 수 있습니다. F5를 다시 눌러 앱 실행을 계속합니다.

전체 스택 디버깅

언급했듯이 이것은 MEAN 앱이므로 프론트엔드와 백엔드 모두 JavaScript로 작성되었습니다. 따라서 현재 백엔드 Node/Express 코드를 디버깅하고 있지만, 언젠가는 프론트엔드/Angular 코드를 디버깅해야 할 수도 있습니다. 다행히 VS Code는 설치하기 쉬운 방대한 확장 프로그램 생태계를 보유하고 있으며, Chrome 디버깅 통합 기능도 포함됩니다.

이를 시연하기 위해 확장 프로그램 탭으로 전환하고 검색 상자에 chrome을 입력합니다.

Debugger for Chrome이라는 확장 프로그램을 선택하고 설치 버튼을 클릭합니다. 완료 후 확장 프로그램을 활성화하려면 VS Code를 다시 로드해야 합니다. 다시 시작해도 작업 영역이 유지되므로 상태를 잃어버릴 염려가 없습니다.

CTRL+P를 누르고 launch.json을 입력/선택한 다음 해당 파일의 내용을 다음으로 바꿉니다.

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Full-Stack",
      "configurations": ["Node", "Chrome"]
    }
  ],
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "https://:8080",
      "port": 9222,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "webRoot": "${workspaceFolder}/public"
    },
    {
      "name": "Node",
      "type": "node2",
      "request": "launch",
      "program": "${workspaceFolder}/server.js",
      "cwd": "${workspaceFolder}"
    }
  ]
}

이 변경은 두 가지 역할을 합니다.

프론트엔드 JavaScript 코드를 디버깅할 수 있도록 Chrome에 대한 새로운 실행 구성을 추가합니다. 지정된 설정 위로 마우스를 가져가면 해당 설정이 수행하는 작업에 대한 문서를 볼 수 있습니다. 좋습니다!
프론트엔드 및 백엔드 코드를 동시에 디버깅할 수 있도록 하는 "복합" 실행 구성을 추가합니다! 복합 구성 개념은 나중에 논의할 때 매우 강력합니다!

이를 실제 적용하려면 VS Code의 디버그 탭으로 전환하고 선택된 구성을 "Full-Stack"(복합 구성의 이름이며 원하는 대로 이름을 지정할 수 있습니다)으로 변경한 다음 F5를 눌러 실행합니다.

그러면 Node.js 앱(디버그 콘솔 출력에서 볼 수 있듯이)과 Chrome이 실행되며, Chrome은 Node.js 앱인 https://:8080으로 이동하도록 구성됩니다.

CTRL+P를 누르고 앱의 프론트엔드에 대한 주요 Angular 컨트롤러인 todos.js를 입력/선택합니다. 새 할 일이 생성되는 진입점인 11행에 중단점을 설정합니다.

실행 중인 앱으로 돌아가서 새 할 일을 추가하면 VS Code가 Angular 코드에서 실행을 일시 중지한 것을 볼 수 있습니다.

Node.js 디버깅과 마찬가지로 표현식 위로 마우스를 가져가거나, 지역 변수/감시 변수를 보거나, 콘솔에서 표현식을 평가하는 등의 작업을 할 수 있습니다. 하지만 이제 고려할 만한 두 가지 멋진 점이 있습니다.

호출 스택 창에는 Node와 Chrome이라는 두 개의 다른 스택이 표시되며 현재 일시 중지된 스택을 나타냅니다.
프론트엔드와 백엔드 코드 간에 단계별로 이동할 수 있습니다! 이를 테스트하려면 F5를 누르면 실행되어 이전에 Express 라우터에 설정한 중단점에 도달합니다.

이 설정을 사용하면 이제 VS Code 내에서 직접 프론트엔드, 백엔드 또는 전체 스택 JavaScript 코드를 효율적으로 디버깅할 수 있습니다. 더 나아가, 복합 디버거 개념은 두 개의 대상 프로세스로만 제한되지 않으며, JavaScript로만 제한되지도 않습니다. 따라서 마이크로서비스 앱을 작업하는 경우, 잠재적으로 다국어 지원이 가능하다면, 필요한 확장 프로그램(예: Go, Ruby, PHP)을 설치한 후 위와 동일한 워크플로우를 사용할 수 있습니다.

앱 Docker화

마이크로서비스 이야기가 나와서, Docker를 사용한 개발 경험을 살펴보겠습니다. 많은 Node.js 개발자들이 개발, CI 및 프로덕션 환경 모두에 대한 이식 가능한 앱 배포를 위해 Docker를 사용하고 있습니다. 그렇다면 Docker의 이점은 매우 높지만, 학습 곡선과 시작 비용도 상당히 높을 수 있다는 피드백을 많이 받았습니다. VS Code는 이러한 온보딩을 단순화하는 데 도움이 되는 확장 프로그램을 제공합니다!

확장 프로그램 탭으로 다시 전환하여 docker를 검색하고 Microsoft Docker 확장 프로그램을 선택합니다. 설치한 후 위에서 Chrome 확장 프로그램의 경우와 같이 VS Code를 다시 로드합니다.

이 확장 프로그램은 여러 기능을 포함하고 있으며, 그중 하나는 기존 프로젝트에 대한 Dockerfile 및 docker-compose.yml 파일을 생성하는 간단한 명령입니다. 이를 적용하려면 F1(명령 팔레트 열기)을 누르고 docker를 입력하여 Docker 확장 프로그램이 제공하는 모든 명령을 표시합니다.

Docker: Add docker files to workspace 명령을 선택하고 앱 플랫폼으로 Node.js를 선택하고 앱이 8080 포트를 노출한다고 지정합니다. 이렇게 하면 즉시 사용할 수 있는 완전한 Dockerfile 및 Docker compose 파일이 생성됩니다.

Docker 확장 프로그램은 Dockerfiles 및 docker-compose.yml 파일에 대한 자동 완성 기능도 제공하여 Docker 에셋 작성을 훨씬 쉽게 만듭니다. 예를 들어, Dockerfile을 열고 2행을 다음으로 변경합니다.

FROM node:latest

이것으로

FROM mhart

mhart의 t 뒤에 커서를 놓고 CTRL+Space를 누르면 mhart가 DockerHub에 게시한 모든 이미지 리포지토리를 볼 수 있습니다.

mhart/alpine-node를 선택합니다. 이 이미지는 매우 효율적이고 작은 Linux 배포판이며, 이 앱에 필요한 모든 것을 추가적인 bloat 없이 제공합니다(Alpine Linux는 Docker에 좋습니다!). 앱 빌드 및 배포를 가능한 한 빠르게 만들 수 있으므로 일반적으로 작은 이미지가 더 좋습니다. 그러면 배포/확장 등이 빠르게 이루어집니다.

이제 Dockerfile을 만들었으므로 실제 Docker 이미지를 빌드해야 합니다. 다시 한번, Docker 확장 프로그램이 설치한 명령을 사용하여 F1을 누르고 dockerb(퍼지 검색 사용)를 입력합니다. Docker: Build Image 명령을 선택하고 방금 생성/편집한 /Dockerfile을 선택한 다음 DockerHub 사용자 이름을 포함하는 이미지 태그(예: lostintangent/node)를 지정합니다. <ENTER>를 누르면 통합 터미널 창이 열리고 Docker 이미지 빌드 출력이 표시됩니다.

이 명령은 단순히 docker build 실행을 자동화한 것임을 알 수 있습니다. 이는 사용자가 선택하여 사용할 수 있는 또 다른 생산성 향상 기능의 예입니다. 또는 Docker CLI를 직접 사용할 수도 있습니다. 어떤 것이 가장 잘 작동하든 말입니다!

이 시점에서 이 이미지를 배포에 쉽게 사용할 수 있도록 하려면 DockerHub에 푸시하기만 하면 됩니다. 이렇게 하려면 명령 팔레트를 열고 dockerpush를 입력한 다음 Docker: Push 명령을 선택합니다. 방금 빌드한 이미지 태그(예: lostintangent/node)를 선택하고 <ENTER>를 누릅니다. 그러면 docker push 호출이 자동화되고 통합 터미널에 출력이 표시됩니다.

앱 배포

이제 앱이 Docker화되고 DockerHub에 푸시되었으므로, 클라우드에 실제로 배포하여 세계에 자랑해야 합니다. 이를 위해 Azure의 PaaS 제품인 Azure App Service를 사용할 것이며, 최근 Node.js 개발자와 관련된 두 가지 새로운 기능을 추가했습니다.

Linux 기반 VM 지원. 네이티브 Node 모듈 또는 Windows를 지원하지 않거나 다르게 작동할 수 있는 다른 도구를 사용하여 빌드된 앱에 대한 비호환성을 줄입니다.
Docker 기반 배포 지원. Docker 이미지를 지정하기만 하면 App Service가 이미지를 자동으로 가져오고 배포하며 확장할 수 있습니다.

시작하려면 터미널을 열고 새 Azure CLI 2.0을 사용하여 Azure 계정을 관리하고 할 일 목록 앱을 실행하는 데 필요한 인프라를 프로비저닝합니다. CLI를 사용하여 CLI의 az login 명령으로 계정에 로그인한 후(사전 요구 사항에 언급됨), App Service 인스턴스를 프로비저닝하고 할 일 목록 앱 컨테이너를 배포하기 위해 다음 단계를 수행합니다.

리소스 그룹을 생성합니다. 리소스 그룹은 Azure 리소스를 구성하는 데 도움이 되는 "네임스페이스" 또는 "디렉터리"로 생각할 수 있습니다. -n 플래그는 그룹의 이름이며 원하는 대로 지정할 수 있습니다.
```
az group create -n nina-demo -l westus
```
참고: -l 플래그는 리소스 그룹의 위치를 나타냅니다. 미리 보기 동안 Linux의 App Service 지원은 특정 지역에서만 사용할 수 있습니다. 따라서 서부 미국에 있지 않고 다른 지역을 확인하고 싶다면 CLI에서 az appservice list-locations --linux-workers-enabled를 실행하여 데이터 센터 옵션을 확인하십시오.
앱이 배포되는 기본 VM을 생성하고 확장하는 App Service 플랜을 생성합니다. 다시 말하지만, 이름 플래그에 원하는 값을 지정하지만, -g 플래그가 위에서 지정한 리소스 그룹의 이름을 참조하는지 확인하십시오.
```
az appservice plan create -n nina-demo-plan -g nina-demo --is-linux
```
참고: --is-linux 플래그가 중요합니다. Linux 기반 VM을 원한다고 나타내기 때문입니다. 이 플래그가 없으면 CLI는 Windows 기반 VM을 프로비저닝합니다.
방금 생성한 플랜 및 리소스 그룹 내에서 실행될 할 일 목록 앱을 나타내는 App Service 웹 앱을 생성합니다. 웹 앱을 프로세스 또는 컨테이너와 동의어로, 플랜을 실행 중인 VM/컨테이너 호스트로 대략적으로 생각할 수 있습니다.
```
az appservice web create -n nina-demo-app -p nina-demo-plan -g nina-demo
```
웹 앱을 Docker 이미지와 함께 사용하도록 구성합니다. -c 플래그를 DockerHub 계정/이미지 이름으로 설정했는지 확인하십시오.
```
az appservice web config container update -n nina-demo-app -g nina-demo -c lostintangent/node
```
앱을 실행하여 방금 배포된 컨테이너를 확인합니다. 이 컨테이너는 *.azurewebsites.net URL에서 사용할 수 있습니다.
```
az appservice web browse -n nina-demo-app -g nina-demo
```
참고: App Service가 DockerHub에서 Docker 이미지를 가져와 시작해야 하므로 앱이 처음 로드되는 데 1분 정도 걸릴 수 있습니다.

좋습니다! 앱을 성공적으로 배포했습니다. 그러나 회전 아이콘은 앱이 데이터베이스에 연결할 수 없음을 나타냅니다. 이는 개발 중에 로컬 MongoDB 인스턴스를 사용했기 때문에 당연한 결과이며, Azure 데이터 센터에서 접근할 수 없습니다. 다행히 앱을 환경 변수를 통해 연결 문자열을 수락하도록 업데이트했으므로 MongoDB 서버를 시작하고 App Service 인스턴스를 다시 구성하여 참조하기만 하면 됩니다.

DocumentDB 사용

MongoDB 서버 또는 복제본 세트를 설정하고 해당 인프라를 직접 관리할 수도 있지만, Azure는 DocumentDB라는 다른 솔루션을 제공합니다. DocumentDB는 MongoDB 호환성 계층을 제공하는 완전 관리형, 지리적으로 복제 가능한 고성능 NoSQL 데이터베이스입니다. 이는 기존 MEAN 앱을 연결 문자열만 변경하여 가리킬 수 있다는 것을 의미합니다! 이번에는 CLI 대신 Azure 포털을 사용하여 이를 사용하는 것이 어떻게 보이는지 살펴보겠습니다.

portal.azure.com으로 이동하여 CLI에서 사용했던 계정으로 로그인합니다.

N 키를 눌러 새 Azure 리소스를 만들고 데이터베이스, 그런 다음 NoSQL (DocumentDB)을 선택합니다.

인스턴스에 원하는 이름을 부여하지만, NoSQL API를 MongoDB로, 리소스 그룹을 기존 사용으로 구성하고 App Service 인스턴스에 대해 생성했던 것과 동일한 리소스 그룹을 선택합니다.

만들기 버튼을 클릭하고 DB가 프로비저닝될 때까지 기다립니다.

DocumentDB 인스턴스가 완전히 생성되는 데 몇 분이 걸립니다. 포털 오른쪽 상단에서 배포 성공 알림이 표시될 때까지 기다립니다. 완료되면 왼쪽 탐색 창(녹색 그리드 아이콘이 있는 메뉴 항목)의 모든 리소스 탭으로 이동한 다음 생성한 DocumentDB 리소스를 선택합니다.

설정 섹션 아래의 연결 문자열 메뉴 항목을 클릭한 다음 연결 문자열 필드 옆의 복사 버튼을 클릭하여 MongoDB 연결 문자열을 클립보드에 복사합니다.

포털의 모든 리소스 페이지로 돌아가서 이전에 생성한 App Service 인스턴스로 이동합니다. 설정 섹션 아래의 애플리케이션 설정 메뉴 항목을 클릭하고 앱 설정 섹션 아래에 새 항목을 추가합니다. 키는 MONGO_URL이고 값은 이전에 복사한 DocumentDB 연결 문자열입니다.

저장 버튼을 누른 다음 브라우저로 돌아가 새로고침합니다. 할 일 항목을 추가하고 제거하여 아무것도 변경하지 않고도 앱이 작동함을 증명합니다. DocumentDB 인스턴스를 가리키도록 환경 변수를 설정했으며, 이 인스턴스는 MongoDB 데이터베이스를 완벽하게 에뮬레이션합니다.

필요한 경우 DocumentDB 인스턴스로 다시 전환하여 MongoDB 인스턴스에 필요한 예약된 처리량을 확장(또는 축소)하고 추가 인프라를 수동으로 관리할 필요 없이 추가 트래픽의 이점을 누릴 수 있습니다.

또한 DocumentDB는 모든 문서와 속성을 자동으로 인덱싱하므로 느린 쿼리를 프로파일링하거나 인덱스를 수동으로 미세 조정할 필요가 없습니다. 필요한 대로 프로비저닝하고 확장하기만 하면 DocumentDB가 나머지 작업을 처리합니다!

정리

사용하지 않는 Azure 리소스에 대한 요금이 청구되지 않도록 터미널에서 다음 명령을 실행하여 방금 프로비저닝한 모든 리소스를 삭제하십시오.

az group delete -n nina-demo

완료하는 데 몇 분이 걸리지만, 완료되면 Azure 계정이 시작하기 전과 동일한 상태로 돌아갑니다. Azure 리소스를 단일 단위로 구성, 배포 및 삭제하는 이 기능은 처음부터 리소스 그룹의 주요 이점 중 하나입니다. 따라서 향후 Azure를 사용하는 경우 수명이 같을 것으로 예상되는 리소스를 함께 그룹화하는 것이 좋습니다.

결론

이 데모를 통해 Visual Studio Code가 전반적인 Node.js 개발 경험을 개선하기 위해 노력하는 몇 가지 방법을 보여드렸기를 바랍니다. 전체 스택 및 마이크로서비스를 지원하는 디버깅, 추가 구성 없이 탐색 및 자동 완성을 제공하는 풍부한 작성 환경, 그리고 Docker와 같은 확장 프로그램의 대규모 생태계가 다른 앱 유형 및 관행에 대한 피드백 루프를 향상시키는 데 도움이 되므로, 가벼운 편집기 내에서 생산성이 무엇을 의미하는지 계속 발전시키는 데 기대가 큽니다.

또한, Azure CLI, App Service 및 DocumentDB를 통해 Node.js/MEAN 앱을 위한 생산적이고 낮은 관리 비용의 클라우드 스택을 제공하여 추가적인 인프라 복잡성을 도입하지 않고 필요에 따라 확장할 수 있도록 노력하고 있습니다.

NINA 2016 데모의 워크스루를 제공하는 것 외에도, 이 데모를 사용하여 VS Code와 Azure 모두에서 전반적인 Node.js 경험을 계속 반복하여 더 간단하고 유연하게 만들고자 합니다. 개선할 사항에 대한 질문이나 피드백이 있다면 언제든지 이 리포에 이슈를 제출하거나 이메일을 보내주십시오. 감사합니다!