Azure에서 Node.js 웹앱 배포

• 활성 구독이 포함된 Azure 계정이 있어야 합니다. 체험 계정을 만듭니다.
• Node.js LTS를 설치 합니다. node --version 명령을 실행하여 Node.js가 설치되어 있는지 확인합니다.
• Visual Studio Code를 설치합니다.
• Visual Studio Code용 Azure App Service 확장을 설치합니다.

• 활성 구독이 포함된 Azure 계정이 있어야 합니다. 체험 계정을 만듭니다.
• Node.js LTS를 설치 합니다. node --version 명령을 실행하여 Node.js가 설치되어 있는지 확인합니다.
• Azure CLI를 설치합니다. 이를 통해 셸에서 명령을 실행하여 Azure 리소스를 만들고 구성할 수 있습니다.

• 활성 구독이 포함된 Azure 계정이 있어야 합니다. 체험 계정을 만듭니다.
• Node.js LTS를 설치 합니다. node --version 명령을 실행하여 Node.js가 설치되어 있는지 확인합니다.
• 앱에 연결할 FTP 클라이언트(예: FileZilla)가 있어야 합니다.

Azure에 로그인

1. 터미널에서 현재 myExpressApp 디렉터리에 있는지 확인하고, 다음 명령을 사용하여 Visual Studio Code를 시작합니다.

   code .
   

2. Visual Studio Code의 작업 표시줄에서 Azure 로고를 선택합니다.

3. App Service 탐색기에서 Azure에 로그인을 선택하고 지침을 따릅니다.

   Visual Studio Code의 상태 표시줄에 Azure 이메일 주소가 표시되고, App Service 탐색기에는 구독이 표시됩니다.

   

App Service 앱 구성 및 코드 배포

1. myExpressApp 폴더를 선택합니다.

터미널에서 현재 myExpressApp 디렉터리에 있는지 확인하고, az webapp up 명령을 사용하여 로컬 폴더(myExpressApp)에 코드를 배포합니다.

az webapp up --sku F1 --name <app-name>

az webapp up --sku F1 --name <app-name> --os-type Windows

• az 명령이 인식되지 않는 경우 초기 환경 설정에서 설명한 대로 Azure CLI가 설치되어 있는지 확인합니다.
• <app_name>을 모든 Azure에서 고유한 이름으로 바꿉니다. (유효한 문자는 a-z, 0-9 및 -입니다.) 이 문서 시작 부분의 참고 사항을 참조하세요. 회사 이름과 앱 식별자를 조합하여 사용하는 것이 좋습니다.
• --sku F1 인수는 체험 가격 책정 계층에 웹앱을 만들므로 비용이 발생하지 않습니다.
• 선택적으로 인수 --location <location-name>을 포함할 수 있습니다. 여기서 <location_name>은 사용 가능한 Azure 지역입니다. Azure 계정에 허용되는 지역 목록은 az account list-locations 명령을 실행하여 검색할 수 있습니다.
• 이 명령은 기본적으로 Node.js용 Linux 앱을 만듭니다. Windows 앱을 만들려면 --os-type 인수를 사용합니다.
• "앱의 런타임 스택을 자동으로 검색할 수 없습니다" 오류가 표시되면 myExpressApp 디렉터리에서 명령을 실행하고 있는지 확인합니다(az webapp up으로 자동 검색 문제 해결 참조).

명령을 완료하는 데 몇 분 정도 걸릴 수 있습니다. 이 명령이 실행되는 동안 리소스 그룹, App Service 요금제 및 앱 리소스 만들기, 로깅 구성, Zip 배포 수행에 대한 메시지가 제공됩니다. 그런 다음, "http://<app-name>.azurewebsites.net에서 앱을 시작할 수 있습니다."라는 메시지를 제공합니다. 이 메시지는 Azure에서 앱의 URL입니다. (이 문서 시작 부분의 참고 사항을 참조하세요.)

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Azure Portal에 로그인

Azure Portal에 로그인합니다.

Azure 리소스 만들기

1. Node.js 앱 만들기를 시작하려면 https://portal.azure.com/#create/Microsoft.WebSite로 이동합니다.

2. 기본 탭의 프로젝트 세부 정보에서 올바른 구독이 선택되었는지 확인한 다음 새로 만들기를 선택하여 리소스 그룹을 만듭니다. 이름으로 myResourceGroup을 입력합니다.

   

3. 인스턴스 세부 정보에서 웹앱의 전역적으로 고유한 이름을 입력하고 코드를 선택합니다. (이 문서 시작 부분의 참고 사항을 참조하세요.) 런타임 스택에서 노드 18 LTS를 선택하고, 운영 체제와 앱을 제공할 지역을 선택합니다.

   

4. App Service 요금제에서 새로 만들기를 선택하여 App 서비스 계획을 만듭니다. 이름으로 myAppServicePlan을 입력합니다. 무료 계층으로 변경하려면 크기 변경을 선택하고, 개발/테스트 탭을 선택하고, F1을 선택하고, 페이지 아래쪽에서 적용 단추를 선택합니다.

   

5. 페이지 아래쪽에서 검토 + 만들기 단추를 선택합니다.

   

6. 유효성 검사를 실행한 후 페이지 아래쪽에서 생성하기 단추를 선택합니다.

7. 배포가 완료되면 리소스로 이동을 선택합니다.

   

FTPS 자격 증명 가져오기

Azure App Service는 FTP/S 배포를 위해 두 가지 유형의 자격 증명을 지원합니다. 이러한 자격 증명은 Azure 구독 자격 증명과 동일하지 않습니다. 이 섹션에서는 FileZilla와 함께 사용할 애플리케이션 범위 자격 증명을 가져옵니다.

1. App Service 앱 페이지의 왼쪽 메뉴에서 배포 센터를 선택한 다음 FTPS 자격 증명 탭을 선택합니다.

   

2. FileZilla를 열고 새 사이트를 만듭니다.

3. FTPS 자격 증명 탭에서 FTPS 엔드포인트, 사용자 이름 및 암호를 FileZilla에 복사합니다.

   

4. FileZilla에서 연결을 선택합니다.

FTPS를 통해 파일 배포

1. 모든 파일 및 디렉터리 파일을 Azure의 /site/wwwroot 디렉터리에 복사합니다.

   

2. 앱의 URL을 찾아 앱이 제대로 실행하는지 확인합니다.

2. App Service 탐색기에서 웹앱에 배포 아이콘을 다시 선택하고 배포를 다시 선택하여 확인합니다.

3. 배포가 완료될 때까지 기다렸다가 알림 팝업에서 웹 사이트 찾아보기를 선택합니다. Welcome to Express 메시지가 Welcome to Azure로 변경된 것을 볼 수 있습니다.

2. 변경 내용을 저장한 다음, Linux용 인수 없이 az webapp up 명령을 사용하여 앱을 다시 배포합니다. Windows용 --os-type Windows 추가:

   az webapp up
   

   이 명령은 앱 이름, 리소스 그룹 및 App Service 플랜과 같이 .azure/config 파일에 로컬로 캐시된 값을 사용합니다.

3. 배포가 완료되면 http://<app-name>.azurewebsites.net 웹 페이지를 새로 고칩니다. (이 문서 시작 부분의 참고 사항을 참조하세요.) Welcome to Express 메시지가 Welcome to Azure로 변경된 것을 볼 수 있습니다.

2. 변경 내용을 저장한 다음, FTP 클라이언트를 사용하여 앱을 다시 배포합니다.

3. 배포가 완료되면 http://<app-name>.azurewebsites.net 웹 페이지를 새로 고칩니다. (이 문서의 시작 부분에 있는 참고를 참조하세요.) Welcome to Express 메시지가 Welcome to Azure로 변경된 것을 볼 수 있습니다.

Visual Studio Code 출력 창에서 직접 Azure 앱의 로그 출력(console.log()에 대한 호출)을 스트리밍할 수 있습니다.

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

   

2. 앱을 다시 시작하라는 메시지가 표시되면 예를 선택합니다. 앱이 다시 시작되면 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).
    

앱 내부에서 생성되는 콘솔 로그와 앱이 실행되는 컨테이너에 액세스할 수 있습니다. 로그에는 console.log() 호출에서 생성된 모든 출력이 포함됩니다.

로그를 스트리밍하려면 az webapp log tail 명령을 실행합니다.

az webapp log tail

이 명령은 .azure/config 파일에 캐시된 리소스 그룹 이름을 사용합니다.

또한 az webapp up 명령에 --logs 매개 변수를 포함하여 배포 시 자동으로 로그 스트림을 열 수 있습니다.

브라우저에서 앱을 새로 고쳐서 콘솔 로그를 생성합니다. 여기에는 앱에 대한 HTTP 요청을 설명하는 메시지를 포함합니다. 출력이 즉시 표시되지 않으면 30초 후에 다시 시도합니다.

언제든지 로그 스트리밍을 중지하려면 터미널에서 Ctrl+C를 선택합니다.

앱 내부에서 생성되는 콘솔 로그와 앱이 실행되는 컨테이너에 액세스할 수 있습니다. Azure Portal에서 직접 Node.js 앱의 로그 출력(console.log()에 대한 호출)을 스트리밍할 수 있습니다.

1. 앱에 대한 동일한 App Service 페이지에서 왼쪽 메뉴를 사용하여 모니터링 섹션으로 스크롤하고 로그 스트림을 선택합니다.

   

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

    Connecting...
    2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
    Starting Log Tail -n 10 of existing logs ----
    /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
    2021-10-26T21:04:08.614384810Z: [INFO]
    2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
    2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
    2021-10-26T21:04:08.614403210Z: [INFO]
    2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
    2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
    2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
    2021-10-26T21:04:08.614419610Z: [INFO]  fi
    2021-10-26T21:04:08.614423411Z: [INFO]
    2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
    Ending Log Tail of existing logs ---
    

이전 단계에서는 리소스 그룹에서 Azure 리소스를 만들었습니다. 이 빠른 시작의 단계에서는 모든 리소스를 이 리소스 그룹에 넣습니다. 리소스를 정리하려면 리소스 그룹만 제거하면 됩니다.

1. Visual Studio의 Azure 확장에서 리소스 그룹 탐색기를 확장합니다.

2. 구독을 확장하고, 앞에서 만든 리소스 그룹을 마우스 오른쪽 단추로 클릭하고, 삭제를 선택합니다.

   

3. 메시지가 표시되면 삭제하려는 리소스 그룹의 이름을 입력하여 삭제를 확인합니다. 삭제를 확인하면 리소스 그룹이 삭제되고, 삭제가 완료되면 알림이 표시됩니다.

이전 단계에서는 리소스 그룹에서 Azure 리소스를 만들었습니다. 리소스 그룹의 이름은 사용자의 위치에 따라 "appsvc_rg_Linux_CentralUS" 등입니다.

나중에 이러한 리소스가 필요하지 않으면 다음 명령을 실행하여 리소스 그룹을 삭제합니다.

az group delete --no-wait

이 명령은 .azure/config 파일에 캐시된 리소스 그룹 이름을 사용합니다.

--no-wait 인수를 사용하면 작업이 완료되기 전에 명령을 반환할 수 있습니다.

더 이상 필요하지 않으면 리소스 그룹, 앱 서비스 및 모든 관련 리소스를 삭제할 수 있습니다.

1. App Service 개요 페이지에서 Azure 리소스 만들기 단계에서 만든 리소스 그룹을 선택합니다.

   

2. 리소스 그룹 페이지에서 리소스 그룹 삭제를 선택합니다. 리소스 그룹의 이름을 확인하고 리소스 삭제를 마칩니다.