Node.js 앱 빌드 및 배포

이 문서에서는 Azure Pipelines를 사용하여 CI(연속 통합) 및 CD(지속적인 배포)를 사용하여 Node.js 애플리케이션을 빌드하고 Azure App Service에 배포하는 파이프라인을 만드는 방법을 보여 줍니다. CI/CD는 앱 코드 리포지토리에 커밋이 있을 때마다 자동으로 앱을 빌드하고 배포하여 가동 중지 시간 및 오류 위험을 줄입니다.

필수 구성 요소

샘플 애플리케이션을 포크하세요

1. GitHub에서 Node.js Hello World 리포지토리로 이동하고 상단 메뉴에서 포크 를 선택합니다.

   

2. 아직 선택하지 않은 경우 GitHub 조직을 포크 소유자 로 선택한 다음 포크 만들기를 선택합니다.

   

브라우저는 URL https://github.com/<owner>/nodejs-docs-hello-world에서 새 포크로 이동합니다.

App Service 웹앱 만들기 및 배포

Azure Portal에서 Cloud Shell 을 사용하여 Azure App Service 웹앱을 만듭니다. Cloud Shell을 사용하려면 Azure Portal 에 로그인하고 위쪽 도구 모음에서 Cloud Shell 단추를 선택합니다.

Cloud Shell이 브라우저 아래쪽에 나타납니다. 드롭다운 메뉴에서 Bash 가 환경으로 선택되어 있는지 확인합니다.

웹앱 만들기 및 배포

1. Cloud Shell에서 다음 명령을 사용하여 포크된 리포지토리를 Azure에 복제하고 포크된 리포지토리의 URL로 대체 <your-forked-repository-url> 합니다.

   git clone <your-forked-repository-url>
   

2. 디렉터리를 복제된 리포지토리 폴더로 변경합니다.

   cd nodejs-docs-hello-world
   

3. az webapp up 명령을 실행하여 App Service 웹앱을 프로비전하고 첫 번째 배포를 수행합니다. 인수는 --sku F1 무료 가격 책정 계층에 웹앱을 만듭니다. 이 경우 비용이 발생하지 않습니다.

   매개 변수 없이 az webapp up 실행 name 은 Azure에서 고유한 임의로 생성된 웹앱 이름을 자동으로 할당합니다. 매개 변수를 --name <web-app-name> 사용하여 앱 식별자가 있는 개인 또는 회사 이름과 같이 Azure에서 고유한 이름을 할당할 수도 있습니다 --name <your-name>-nodeapp.

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

이 az webapp up 명령은 앱을 Node.js 앱으로 인식하고 다음 작업을 수행합니다.

1. 기본 리소스 그룹을 만듭니다.
2. 기본 App Service 계획을 만듭니다.
3. 할당된 이름과 URL을 사용하여 <your-web-app-name>.azurewebsites.net.
4. ZIP은 빌드 자동화를 사용하도록 설정하여 현재 작업 디렉터리의 모든 파일을 배포합니다.
5. . azure/config 파일에 로컬로 매개 변수를 캐시하므로 프로젝트 폴더 az webapp up 또는 다른 az webapp 명령을 사용하여 배포할 때 매개 변수를 다시 지정할 필요가 없습니다.

명령 매개 변수를 사용하여 기본 작업을 사용자 고유의 값으로 재정의할 수 있습니다. 자세한 내용은 az webapp up을 참조하세요.

이 명령은 실행하면서 상태 메시지를 생성합니다. 웹 사이트가 성공적으로 시작되면 링크를 You can launch the app at https://<your-web-app-name>.azurewebsites.net 선택하여 Hello World 웹앱으로 이동합니다.

이 az webapp up 명령은 샘플 웹앱에 대해 다음 JSON 출력을 생성합니다.

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

템플릿에서 파이프라인 만들기

1. Azure DevOps 프로젝트의 왼쪽 탐색 메뉴에서 파이프라인 을 선택한 다음, 프로젝트의 첫 번째 파이프라인인 경우 새 파이프라인 또는 만들기 파이프라인 을 선택합니다.

2. 코드의 위치 화면에서 GitHub를 선택합니다.

3. 리포지토리 선택 화면에서 포크된 nodejs-docs-hello-world 리포지토리를 선택합니다.

4. Azure Pipelines는 코드를 Node.js 앱으로 인식하고 파이프라인 구성 페이지에서 여러 파이프라인 템플릿을 제안합니다. Azure에서 Linux에Node.js Express Web App을 선택합니다.

5. 다음 화면에서 Azure 구독을 선택하고 계속을 선택합니다. 이 작업은 Azure 리소스에 대한 서비스 연결을 만듭니다.

6. 다음 화면에서 Azure 웹앱을 선택하고 유효성 검사 및 구성을 선택합니다. Azure Pipelines는 azure-pipelines.yml 파일을 만들고 YAML 파이프라인 편집기에서 표시합니다.

7. 파이프라인 YAML 검토 화면에서 파이프라인에 대한 코드를 검토합니다.

   파이프라인은 다음 작업을 수행합니다.

   • 기본 코드 분기에 대한 모든 커밋에서 실행되도록 트리거를 설정합니다.
   • 서비스 연결, 웹앱, 컴퓨터 이미지 및 환경에 대한 변수를 설정하고 사용합니다.
   • 빌드 에이전트에 Node.js 설치하고 npm을 사용하여 앱 빌드를 실행하고 테스트합니다.
   • 빌드된 앱을 ZIP 압축 파일에 패키지하고 ZIP을 드롭 위치에 업로드합니다.
   • APP Service 앱에 ZIP 패키지를 배포하고 앱을 시작합니다.

파이프라인 저장 및 실행

1. 코드를 검토한 후 저장 및 실행 및 저장을 선택하고 다시 실행 하여 파이프라인을 저장하고 실행합니다. azure-pipelines.yml 파일은 포크된 리포지토리에 저장되고 코드는 Azure App Service에 배포됩니다.

   참고

   파이프라인이 처음 실행되면 파이프라인이 만드는 환경에 액세스할 수 있는 권한을 요청합니다. 파이프라인이 환경에 액세스할 수 있는 권한을 부여하려면 [허용 ]을 선택합니다.

2. 실행 요약 페이지에서 파이프라인 실행을 감시하고 해당 빌드를 추적할 작업을 선택합니다.

3. 실행이 성공하면 Azure Web App 배포 작업을 선택하고 App Service 애플리케이션 URL 을 선택하여 배포된 웹 사이트를 봅니다.

   

4. 배포된 웹 사이트 URL에서 App Service에서 실행 중인 사이트가 표시되는지 확인합니다.

   

CI 빌드 및 배포 실행

trigger: main 키워드는 변경 내용이 포크된 코드 리포지토리의 main 분기에 커밋될 때마다 파이프라인을 실행하도록 구성합니다. CI 빌드를 실행하려면 다음을 수행합니다.

1. 포크된 GitHub 리포지토리로 이동하여 README.md 파일을 약간 변경합니다.
2. 변경 내용 커밋을 선택하고 변경 내용을 다시 커밋합니다.
3. Azure Pipelines에서 nodejs-docs-hello-world 파이프라인이 개별 CI에 대한 설명과 함께 다시 실행되는지 확인합니다.

리소스 정리

더 이상 필요하지 않은 경우 이 문서에 대해 만든 리소스를 삭제할 수 있습니다.

• Azure App Service 리소스를 제거하려면 Cloud Shell에서 다음 명령을 순서대로 실행합니다. 앱 서비스 계획을 삭제하려면 먼저 웹앱을 삭제해야 하며, 해당 리소스 그룹을 삭제하려면 먼저 App Service 계획을 삭제해야 합니다.

  az webapp delete --name <web-app-name> --resource-group <resource-group-name>
  az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
  az group delete --name <resource-group-name>
  

• Azure Pipelines에서 파이프라인을 제거하려면 파이프라인을 선택하고 파이프라인 페이지의 오른쪽 위에 있는 기타 작업 아이콘을 선택한 다음 삭제를 선택합니다. Azure DevOps 프로젝트를 제거하려면 프로젝트 삭제를 참조하세요.

• 포크된 nodejs-docs-hello-world GitHub 리포지토리를 삭제하려면 리포지토리로 이동하여 위쪽 메뉴 모음에서 설정을 선택합니다. 페이지 아래쪽으로 스크롤하고 이 리포지토리 삭제를 선택합니다.

관련 콘텐츠

• JavaScript 사용자 지정
• Azure Pipelines를 사용하여 App Service에 배포