Azure DevOps Starter를 사용하여 Node.js 위해 Azure Pipelines에서 CI/CD 파이프라인 만들기

이 빠른 시작에서는 GatsbyJS 및 간소화된 Azure DevOps Starter 만들기 환경을 사용하여 NodeJS PWA(프로그레시브 웹앱)를 만듭니다. 완료되면 Azure Pipelines에서 PWA에 대한 CI(연속 통합) 및 CD(지속적인 업데이트) 파이프라인이 있습니다. Azure DevOps Starter는 개발, 배포 및 모니터링에 필요한 항목을 설정합니다.

필수 조건

활성 구독이 있는 Azure 계정. 무료로계정을 만드세요.
Azure DevOps 조직.

DevOps Starter는 Azure Pipelines에서 CI/CD 파이프라인을 만듭니다. 새 Azure DevOps 조직을 만들거나 기존 조직을 사용할 수 있습니다. 또한 DevOps Starter는 선택한 Azure 구독에서 Azure 리소스를 만듭니다.

Azure Portal에 로그인하고 왼쪽 창에서 리소스 만들기를 선택합니다.
검색 상자에 DevOps Starter입력한 다음 선택합니다. 추가을 클릭하여 새 항목을 만듭니다.

DevOps Starter 대시보드The DevOps Starter dashboard

샘플 애플리케이션 및 Azure 서비스 선택

Node.js 샘플 애플리케이션을 선택합니다.
기본 샘플 프레임워크는 Express.js. 선택 영역을 단순 Node.js 앱 으로 변경한 다음, 다음을 선택합니다.
이 단계에서 사용할 수 있는 배포 대상은 2단계에서 선택한 애플리케이션 프레임워크에 의해 결정됩니다. 이 예제에서 Windows Web App 은 기본 배포 대상입니다. Web App for Containers를 설정한 상태로 두고 다음을 선택합니다.

프로젝트 이름 및 Azure 구독 구성

DevOps Starter 만들기 워크플로의 마지막 단계에서 프로젝트 이름을 할당하고, Azure 구독을 선택하고, 완료를 선택합니다.
프로젝트가 빌드되고 애플리케이션이 Azure에 배포되는 동안 요약 페이지가 표시됩니다. 잠시 후 Git 리포지토리, Kanban 보드, 배포 파이프라인, 테스트 계획 및 앱에 필요한 아티팩트를 포함하는 프로젝트가 Azure DevOps 조직 에서 만들어집니다.

프로젝트 관리

모든 리소스로 이동하여 DevOps Starter를 찾습니다. DevOps Starter를 선택합니다.
프로젝트 홈페이지, 코드 리포지토리, CI/CD 파이프라인 및 실행 중인 앱에 대한 링크를 제공하는 대시보드로 이동합니다. 프로젝트 홈페이지를 선택하여 Azure DevOps에서 애플리케이션을 보고, 다른 브라우저 탭에서 애플리케이션 엔드포인트를 선택하여 라이브 샘플 앱을 봅니다. 나중에 GatsbyJS에서 생성된 PWA를 사용하도록 이 샘플을 변경합니다.
Azure DevOps 프로젝트에서 팀 구성원을 초대하여 공동 작업하고 Kanban 보드를 설정하여 작업 추적을 시작할 수 있습니다. 자세한 내용은 여기를 참조하세요.

Azure DevOps 개요

리포지토리 복제 및 Gatsby PWA 설치

DevOps Starter는 Azure Repos 또는 GitHub에 git 리포지토리를 만듭니다. 이 예제에서 Azure 리포지토리가 생성되었습니다. 다음 단계는 리포지토리를 복제하고 변경하는 것입니다.

DevOps 프로젝트에서리포지토리를 선택한 다음 복제를 클릭합니다. Git 리포지토리를 데스크톱에 복제하는 다양한 메커니즘이 있습니다. 개발 환경에 맞는 것을 선택합니다.
리포지토리가 데스크톱에 복제된 후 시작 템플릿을 몇 가지 변경합니다. 먼저 터미널에서 GatsbyJS CLI를 설치합니다.
```
 npm install -g gatsby
```

터미널에서 리포지토리의 루트로 이동합니다. 다음과 같은 세 개의 폴더가 포함되어야 합니다.

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2/23/2020  10:42 PM                Application
d-----        2/23/2020   3:05 PM                ArmTemplates
d-----        2/23/2020   3:05 PM                Tests

Gatsby 스타터로 대체하려고 하기 때문에 애플리케이션 폴더의 모든 파일을 원하지 않습니다. 다음 명령을 순서대로 실행하여 줄이기 위해 한다.
```
cp .\Application\Dockerfile .
rmdir Application
```

Gatsby CLI를 사용하여 샘플 PWA를 생성합니다. 터미널에서 실행 gatsby new 하여 PWA 마법사를 시작하고 시작 템플릿을 선택합니다 gatsby-starter-blog . 이 샘플은 다음과 유사합니다.

c:\myproject> gatsby new
√ What is your project called? ... my-gatsby-project
? What starter would you like to use? » - Use arrow-keys. Return to submit.
    gatsby-starter-default
    gatsby-starter-hello-world
>   gatsby-starter-blog
    (Use a different starter)

이제 라는 my-gatsby-project폴더가 있습니다. 이름을 Application로 변경하고 Dockerfile를 그 안에 복사합니다.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
즐겨 찾는 편집기에서 Dockerfile을 열고 첫 번째 줄을 FROM node:8에서 FROM node:12으로 변경합니다. 이렇게 변경하면 컨테이너가 버전 8.x 대신 Node.js 버전 12.x를 사용하고 있습니다. GatsbyJS에는 최신 버전의 Node.js필요합니다.
그런 다음 애플리케이션 폴더에서 package.json 파일을 열고 스크립트 필드를 편집하여 개발 및 프로덕션 서버가 사용 가능한 모든 네트워크 인터페이스(예: 0.0.0.0) 및 포트 80에서 수신 대기하도록 합니다. 이러한 설정이 없으면 컨테이너 앱 서비스가 컨테이너 내에서 실행되는 Node.js 앱으로 트래픽을 라우팅할 수 없습니다. scripts 필드는 아래와 유사해야 합니다. 특히 develop, serve, 및 start 대상을 기본값에서 변경하려고 합니다.
```
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop  -H 0.0.0.0 -p 80",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run serve",
    "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
```

CI/CD 파이프라인 편집

이전 섹션에서 코드를 커밋하기 전에 빌드 및 릴리스 파이프라인을 몇 가지 변경합니다. '빌드 파이프라인'을 편집하고 Node.js 버전 12.x를 사용하도록 노드 작업을 업데이트합니다. 작업 버전 필드를 1.x로 설정하고 버전 필드를 12.x로 설정합니다.
이 빠른 시작에서는 단위 테스트를 만들지 않으며 빌드 파이프라인에서 이러한 단계를 사용하지 않도록 설정했습니다. 테스트를 작성할 때 이러한 단계를 다시 사용하도록 설정할 수 있습니다. 마우스 오른쪽 단추를 클릭하여 설치 테스트 종속성 및 실행 단위 테스트 레이블이 지정된 작업을 선택하고 사용하지 않도록 설정합니다.
릴리스 파이프라인을 편집합니다.
빌드 파이프라인과 마찬가지로 12.x를 사용하도록 노드 작업을 변경하고 두 개의 테스트 작업을 사용하지 않도록 설정합니다. 당신의 릴리스는 이 스크린샷과 비슷해 보여야 합니다.
브라우저의 왼쪽에서 views/index.pug 파일로 이동합니다.
편집을 선택한 다음 h2 제목을 변경합니다. 예를 들어 Azure DevOps Starter를 사용하여 바로 시작하기를 입력하거나 다른 변경 사항을 만듭니다.
커밋을 선택한 다음 변경 내용을 저장합니다.
브라우저에서 DevOps Starter 대시보드로 이동합니다.
이제 진행 중인 빌드를 볼 수 있을 것입니다. 변경한 내용은 CI/CD 파이프라인을 통해 자동으로 빌드되고 배포됩니다.

변경 내용을 커밋하고 Azure CI/CD 파이프라인 검사

이전 두 단계에서는 Git 리포지토리에 Gatsby 생성 PWA를 추가하고 코드를 빌드하고 배포하기 위해 파이프라인을 편집했습니다. 코드를 커밋하고 빌드 및 릴리스 파이프라인을 통해 진행 상황을 확인할 수 있습니다.

터미널에서 프로젝트의 git 리포지토리 루트에서 다음 명령을 실행하여 코드를 Azure DevOps 프로젝트에 푸시합니다.
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
git push가 완료되면 빌드가 시작됩니다. Azure DevOps 대시보드에서 진행률을 따를 수 있습니다.
몇 분 후에 빌드 및 릴리스 파이프라인이 완료되고 PWA가 컨테이너에 배포되어야 합니다. 위의 대시보드에서 애플리케이션 엔드포인트 링크를 클릭하면 블로그에 대한 Gatsby 시작 프로젝트가 표시됩니다.

리소스 정리

더 이상 리소스가 필요하지 않을 때 만든 Azure App Service 및 기타 관련 리소스를 삭제할 수 있습니다. DevOps Starter 대시보드에서 삭제 기능을 사용합니다.

다음 단계

CI/CD 프로세스를 구성하면 빌드 및 릴리스 파이프라인이 자동으로 만들어집니다. 팀의 요구 사항에 맞게 이러한 빌드 및 릴리스 파이프라인을 변경할 수 있습니다. CI/CD 파이프라인에 대한 자세한 내용은 다음을 참조하세요.

CD 프로세스 사용자 지정

Last updated on 2020-03-24