Azure에서 Node.js 웹앱 만들기

Visual Studio Code를 사용하여 Node.js/Express 앱을 로컬로 만든 다음, 앱을 클라우드에 배포하여 Azure App Service를 시작합니다. 무료 App Service 계층을 사용하므로 이 빠른 시작을 완료하는 데 비용이 들지 않습니다.

필수 구성 요소

로컬 Node.js 애플리케이션 복제 및 실행

  1. 로컬 컴퓨터에서 터미널을 열고 샘플 리포지토리를 복제합니다.

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. 새 앱 폴더로 이동합니다.

    cd nodejs-docs-hello-world
    
  3. 앱을 시작하여 로컬로 테스트합니다.

    npm start
    
  4. 브라우저를 열고 http://localhost:1337로 이동합니다. 브라우저에서 "Hello World!"가 표시됩니다.

  5. 터미널에서 Ctrl+C 를 눌러 서버를 중지합니다.

Azure에 앱 배포

이 섹션에서는 VS Code와 Azure App Service 확장을 사용하여 Node.js 앱을 Azure에 배포합니다.

  1. 터미널에서 nodejs-docs-hello-world 폴더에 있는지 확인한 다음, 다음 명령을 사용하여 Visual Studio Code를 시작합니다.

    code .
    
  2. VS Code 작업 막대에서 Azure 로고를 선택하여 AZURE APP SERVICE 탐색기를 표시합니다. Azure에 로그인... 을 선택하고 지침을 따릅니다. (오류가 발생하면 아래의 Azure 로그인 문제 해결을 참조하세요.) 로그인하면 탐색기에 Azure 구독 이름이 표시됩니다.

    Azure에 로그인

  3. VS Code의 AZURE APP SERVICE 탐색기에서 파란색 위쪽 화살표 아이콘을 선택하여 앱을 Azure에 배포합니다. ('웹앱에 배포'를 입력하고 Azure App Service: 웹앱에 배포 를 선택하여 명령 팔레트(Ctrl+Shift+P)에서 동일한 명령을 호출할 수도 있습니다.)

    선택한 파란색 화살표 아이콘을 표시하는 VS Code의 Azure App 서비스 스크린샷.

  4. nodejs-docs-hello-world 폴더를 선택합니다.

  5. 배포하려는 운영 체제에 따라 만들기 옵션을 선택합니다.

    • Linux: 새 웹앱 만들기 를 선택합니다.
    • Windows: 새 웹앱 만들기... 고급 을 선택합니다.
  6. 웹앱에 대해 전역적으로 고유한 이름을 입력하고, Enter 키를 누릅니다. 이름은 모든 Azure에서 고유해야 하며, 영숫자 문자('A-Z', 'a-z' 및 '0-9')와 하이픈('-')만 사용해야 합니다.

  7. Linux를 대상으로 하는 경우 메시지가 표시되면 Node.js 버전을 선택합니다. LTS 버전을 권장합니다.

  8. Windows를 대상으로 하는 경우 추가 프롬프트를 따릅니다.

    1. 새 리소스 그룹 만들기 를 선택한 다음, 리소스 그룹 이름(예: AppServiceQS-rg)을 입력합니다.
    2. 운영 체제에 대해 Windows 를 선택합니다.
    3. 새 App Service 계획 만들기 를 선택하고, 계획 이름(예: AppServiceQS-plan)을 입력한 다음, 가격 책정 계층에 대해 F1 체험 을 선택합니다.
    4. Application Insights에 대한 메시지가 표시되면 지금 건너뛰기 를 선택합니다.
    5. 액세스하려는 사용자 근처의 지역 또는 근처의 리소스를 선택합니다.
  9. 모든 프롬프트에 응답하면 VS Code의 알림 팝업에 앱용으로 만들어지는 Azure 리소스가 표시됩니다.

    Linux에 배포하는 경우 대상 Linux 서버에서 npm install을 실행하도록 구성을 업데이트하라는 메시지가 표시되면 를 선택합니다.

    대상 Linux 서버에서 구성을 업데이트하도록 요구하는 메시지

  10. 항상 "nodejs-docs-hello-world" 작업 영역을 (앱 이름)에 배포합니다. 라는 메시지가 표시되면 를 선택합니다. 를 선택하면 VS Code에서 자동으로 후속 배포에서 동일한 App Service Web App을 대상으로 지정하도록 지시합니다.

  11. Linux에 배포하는 경우 배포가 완료되면 프롬프트에서 웹 사이트 찾아보기 를 선택하여 새로 배포된 웹앱을 확인합니다. 브라우저에서 "Hello World!"가 표시됩니다.

  12. Windows로 배포하는 경우 먼저 웹앱의 Node.js 버전 번호를 설정해야 합니다.

    1. VS Code에서 새 앱 서비스의 노드를 펼치고, 마우스 오른쪽 단추로 애플리케이션 설정 을 클릭하고, 새 설정 추가... 를 선택합니다.

      앱 설정 추가 명령

    2. 설정 키에 대해 WEBSITE_NODE_DEFAULT_VERSION을 입력합니다.

    3. 설정 값에 대해 10.15.2를 입력합니다.

    4. 마우스 오른쪽 단추로 앱 서비스의 노드를 클릭하고, 다시 시작 을 선택합니다.

      앱 서비스 다시 시작 명령

    5. 마우스 오른쪽 단추로 앱 서비스의 노드를 한 번 더 클릭하고, 웹 사이트 찾아보기 를 선택합니다.

Azure 로그인 문제 해결

Azure에 로그인할 때 "이름이 [구독 ID]인 구독을 찾을 수 없습니다" 라는 오류가 표시되는 경우 백그라운드에서 프록시를 사용하고 있고 Azure API에 연결할 수 없기 때문일 수 있습니다. export를 사용하여 터미널의 프록시 정보를 사용하여 HTTP_PROXYHTTPS_PROXY 환경 변수를 구성합니다.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

환경 변수를 설정해도 문제가 해결되지 않으면 위에 있는 문제가 발생했습니다. 단추를 선택하여 문의하세요.

앱 업데이트

VS Code에서 편집하고, 파일을 저장한 다음, 새 앱을 만드는 대신 기존 앱을 선택하기 전과 동일한 프로세스를 사용하여 이 앱에 대한 변경 내용을 배포할 수 있습니다.

로그 보기

VS Code 출력 창에서 직접 앱의 로그 출력(console.log에 대한 호출)을 볼 수 있습니다.

  1. AZURE APP SERVICE 탐색기에서 마우스 오른쪽 단추로 앱 노드를 클릭하고, 스트리밍 로그 시작 을 선택합니다.

    스트리밍 로그 시작

  2. 메시지가 표시되면 로깅을 사용하도록 설정하고 애플리케이션을 다시 시작합니다. 애플리케이션이 다시 시작되면 VS Code 출력 창이 열려 로그 스트림에 연결됩니다.

    [예] 단추를 선택한 상태에서 파일 로깅을 활성화하고 애플리케이션을 다시 시작하는 Visual Studio Code 프롬프트의 스크린샷.

  3. 몇 초 후 출력 창에 로그 스트리밍 서비스에 연결되었다는 메시지가 표시됩니다. 브라우저에서 페이지를 새로 고쳐 더 많은 출력 활동을 생성할 수 있습니다.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

다음 단계

축하합니다! 이 빠른 시작을 성공적으로 완료했습니다!

다른 Azure 확장을 확인합니다.

또는 Azure용 Node 팩 확장 팩을 설치하여 모두 가져옵니다.

사전 요구 사항

Azure 계정이 없는 경우 지금 200달러의 Azure 크레딧으로 체험 계정에 지금 가입하여 서비스 조합을 사용해 볼 수 있습니다.

Node.js 패키지 관리자인 Node.js 및 npm과 함께 Visual Studio Code를 설치해야 합니다.

또한 Azure PaaS(Platform as a Service)에서 Linux Web Apps를 만들고, 관리하고, 배포하는 데 사용할 수 있는 Azure App Service 확장도 설치해야 합니다.

로그인

확장이 설치되면 Azure 계정에 로그인합니다. 작업 표시줄에서 Azure 로고를 선택하여 AZURE APP SERVICE 탐색기를 표시합니다. Azure에 로그인... 을 선택하고 지침을 따릅니다.

Azure에 로그인

문제 해결

"이름이 [구독 ID]인 구독을 찾을 수 없습니다" 오류가 표시되면 프록시를 사용하고 Azure API에 연결할 수 없기 때문일 수 있습니다. export를 사용하여 터미널의 프록시 정보를 사용하여 HTTP_PROXYHTTPS_PROXY 환경 변수를 구성합니다.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

환경 변수를 설정해도 문제가 해결되지 않으면 아래에 있는 문제가 발생했습니다. 단추를 선택하여 문의해 주세요.

필수 구성 요소 확인

계속하기 전에 모든 필수 구성 요소를 설치하고 구성했는지 확인합니다.

VS Code에서 상태 표시줄에는 Azure 이메일 주소가 표시되고, AZURE APP SERVICE 탐색기에는 구독이 표시됩니다.

Node.js 애플리케이션 만들기

다음으로, 클라우드에 배포할 수 있는 Node.js 애플리케이션을 만듭니다. 이 빠른 시작에서는 애플리케이션 생성기를 사용하여 터미널에서 애플리케이션을 빠르게 스캐폴드합니다.

Node.js 자습서를 이미 완료한 경우 Azure에 배포로 건너뛸 수 있습니다.

Express 생성기를 사용하여 새 애플리케이션 스캐폴드

Express는 Node.js 애플리케이션을 빌드하고 실행하는 데 널리 사용되는 프레임워크입니다. Express 생성기 도구를 사용하여 새 Express 애플리케이션을 스캐폴드할(만들) 수 있습니다. Express 생성기는 npm 모듈로 제공되며, npm 명령줄 도구npx를 사용하여 직접(설치 없이) 실행할 수 있습니다.

npx express-generator myExpressApp --view pug --git

--view pug --git 매개 변수는 pug 템플릿 엔진(이전의 jade)을 사용하고 .gitignore 파일을 만들도록 생성기에 지시합니다.

애플리케이션의 모든 종속성을 설치하려면 새 폴더로 이동하여 npm install을 실행합니다.

cd myExpressApp
npm install

애플리케이션 실행

다음으로, 애플리케이션이 실행되는지 확인합니다. 터미널에서 npm start 명령을 사용하여 애플리케이션을 시작하여 서버를 시작합니다.

npm start

이제 브라우저를 열고, 다음과 같이 표시되는 http://localhost:3000으로 이동합니다.

Express 애플리케이션 실행

Deploy to Azure

이 섹션에서는 VS Code와 Azure App Service 확장을 사용하여 Node.js 앱을 배포합니다. 이 빠른 시작에서는 앱이 압축되어 Linux의 Azure 웹앱에 배포되는 가장 기본적인 배포 모델을 사용합니다.

Azure App Service를 사용하여 배포

먼저 VS Code에서 애플리케이션 폴더를 엽니다.

code .

AZURE APP SERVICE 탐색기에서 파란색 위쪽 화살표 아이콘을 선택하여 앱을 Azure에 배포합니다.

파란색 배포 화살표가 선택된 Visual Studio Code의 Azure App Service 메뉴 스크린샷.

'웹앱에 배포'를 입력하고 Azure App Service: 웹앱에 배포 명령을 실행하여 명령 팔레트(Ctrl+Shift+P)에서 배포할 수도 있습니다.

  1. 현재 열려 있는 myExpressApp 디렉터리를 선택합니다.

  2. 기본적으로 Linux의 App Service에 배포되는 새 웹앱 만들기 를 선택합니다.

  3. 웹앱에 대해 전역적으로 고유한 이름을 입력하고, Enter 키를 누릅니다. 앱 이름에 유효한 문자는 'a-z', '0-9' 및 '-'입니다.

  4. Node.js 버전 을 선택합니다. LTS가 추천됩니다.

    알림 채널에는 앱에 대해 만들어지는 Azure 리소스가 표시됩니다.

  5. 대상 서버에서 npm install을 실행하도록 구성을 업데이트하라는 메시지가 표시되면 를 선택합니다. 그러면 앱이 배포됩니다.

    [예] 단추를 선택한 상태에서 대상 서버의 구성을 업데이트하라는 프롬프트의 스크린샷.

  6. 배포가 시작되면 이후 배포에서 자동으로 동일한 App Service 웹앱을 대상으로 지정하도록 작업 영역을 업데이트하라는 메시지가 표시됩니다. 변경 내용이 올바른 앱에 배포되도록 하려면 를 선택합니다.

    [예] 단추를 선택한 상태에서 작업 영역을 업데이트하라는 프롬프트의 스크린샷.

애플리케이션이 PORT 환경 변수(process.env.PORT)에서 제공하는 포트를 수신 대기하고 있는지 확인하세요.

Azure에서 앱 찾아보기

배포가 완료되면 프롬프트에서 웹 사이트 찾아보기 를 선택하여 새로 배포된 웹앱을 확인합니다.

문제 해결

"이 디렉터리 또는 페이지를 볼 수 있는 권한을 가지고 있지 않습니다." 오류가 표시되면 애플리케이션이 제대로 시작되지 못했을 수 있습니다. 다음 섹션으로 이동하여 로그 출력을 확인하고 오류를 찾아 해결합니다. 해결할 수 없는 경우 아래에 있는 문제가 발생했습니다. 단추를 선택하여 문의해 주세요. 성심껏 도와드리겠습니다!

앱 업데이트

동일한 프로세스를 사용하여 새 앱을 만들지 않고 기존 앱을 선택하여 변경 내용을 해당 앱에 배포할 수 있습니다.

로그 보기

이 섹션에서는 실행 중인 App Service 앱에서 로그를 보거나 "추적(tail)"하는 방법에 대해 알아봅니다. 앱에서 console.log에 대한 모든 호출은 Visual Studio Code의 출력 창에 표시됩니다.

AZURE APP SERVICE 탐색기에서 앱을 찾아 마우스 오른쪽 단추로 클릭하고 스트리밍 로그 시작 을 선택합니다.

VS Code 출력 창이 열려 로그 스트림에 연결됩니다.

스트리밍 로그 시작

[예] 단추를 선택한 상태에서 파일 로깅을 활성화하고 웹앱을 다시 시작하는 VS Code 프롬프트의 스크린샷.

몇 초 후에 로그 스트리밍 서비스에 연결되었다는 메시지가 표시됩니다. 페이지를 몇 번 새로 고쳐 더 많은 작업을 볼 수 있습니다.

2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None

다음 단계

축하합니다! 이 빠른 시작을 성공적으로 완료했습니다!

다음으로, 다른 Azure 확장을 확인합니다.

또는 Azure용 Node 팩 확장 팩을 설치하여 모두 가져옵니다.