연습 - 파이프라인을 통해 변경 내용 푸시

  • 14분

이 부분에서는 작동 중인 배포 슬롯을 확인합니다. 웹 사이트의 홈페이지에서 주인공 배너의 배경색 및 텍스트를 변경합니다. 그런 다음 변경 내용을 GitHub로 푸시하고, 파이프라인 실행을 관찰하고, 변경 내용을 확인합니다.

프로세스를 추가로 연습하려면 변경 내용을 되돌리고 파이프라인이 ‘롤포워드’ 방식으로 실행되는지 관찰합니다.

주인공 배너 텍스트 변경하기

여기서는 주인공 배너의 텍스트를 변경합니다. 나중에 App Service에 배포하면 변경 내용을 확인할 수 있습니다.

  1. Visual Studio Code의 Tailspin.SpaceGame.Web/Views/Home 디렉터리에서 Index.cshtml을 엽니다.

  2. 페이지 맨 위에 있는 다음 텍스트를 찾습니다.

    <p>An example site for learning</p>

    팁

    Visual Studio Code는 파일에서 텍스트를 검색하는 방법을 제공합니다. 검색 창에 액세스하려면 왼쪽 창에서 돋보기 아이콘을 선택합니다.

  3. 예시 텍스트를 다음 텍스트로 바꾼 다음 파일을 저장합니다.

    <p>Welcome to the official Space Game site!</p>

배경색 변경하기

여기서는 주인공 배너의 배경색을 회색에서 녹색으로 변경합니다.

  1. Visual Studio Code의 Tailspin.SpaceGame.Web/wwwroot/css 디렉터리에서 site.scss를 엽니다.

    중요

    site.css가 아닌 site.scss를 엽니다. ‘빌드’ 단계는 node-sass를 실행하여 site.scss(Sass 파일)를 site.css(표준 CSS 파일)로 변환합니다.

  2. 파일 상단에서 다음 코드를 찾습니다.

    .intro {
  height: 350px;
  background-color: #666;
  background-image: url('/images/space-background.svg');
  background-size: 1440px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

  3. 코드에서 다음 예제와 같이 강조 표시된 텍스트를 바꿉니다. 그런 다음 파일을 저장합니다.

    .intro {
  height: 350px;
  background-color: green;
  background-image: url('/images/space-background.svg');
  background-size: 1440px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

파이프라인을 통해 변경 내용 푸시하기

일반적으로 사이트를 로컬로 빌드하고 실행하여 변경 내용을 확인합니다. 관련 단위 테스트를 실행하여 변경 내용으로 인해 기존 기능이 중단되지 않는지 확인할 수도 있습니다.

간결한 설명을 위해 여기서는 분기에 대한 변경 내용을 커밋하고, GitHub에 분기를 푸시하고, 파이프라인 실행을 확인합니다.

  1. Index.cshtml과 site.scss를 인덱스에 추가하고 변경 내용을 커밋한 다음 변경 내용을 GitHub로 푸시합니다.

    git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml Tailspin.SpaceGame.Web/wwwroot/css/site.scss
git commit -m "Change text and colors on the home page"
git push origin blue-green

  2. Azure Pipelines에서 각 단계를 통해 빌드를 추적합니다.

  3. ‘스테이징’ 환경에 대한 production 슬롯에 해당하는 URL로 이동합니다. 해당 슬롯은 이전에 파이프라인을 설정할 때 구성한 기본 슬롯입니다.

    배포된 웹 사이트에 색상 및 텍스트 변경 내용이 표시됩니다.

    Screenshot of a browser that shows the Space Game website with color and text changes.

  4. ‘스테이징’ 환경에 대한 swap 슬롯에 해당하는 URL로 이동합니다. URL 이름에 “-swap.azurewebsites.net”이 포함되어 있습니다.

    색상과 텍스트가 변경되지 않은 이전 버전의 웹 사이트가 표시됩니다.

    Screenshot of a browser that shows the normal Space Game website.

    production 슬롯과 swap 슬롯을 교환했기 때문에 변경 내용이 표시되지 않습니다. 즉, 여기서는 항상 swap 슬롯에 배포한 다음 production 슬롯과 swap 슬롯을 교환합니다. 교환 프로세스는 production 슬롯이 최신 배포를 가리키도록 해야 합니다.

변경 사항을 되돌립니다.

되돌리고자 하는 변경 내용을 배포했다고 가정해 보겠습니다. 이 시점에서 production 슬롯과 swap 슬롯을 다시 교환하여 변경 내용을 롤백할 수 있습니다. 예를 들어 Azure Portal을 통해 슬롯을 수동으로 교환할 수 있습니다. 또는 변경 내용을 롤백하는 대신 파이프라인을 통해 다른 변경 내용을 푸시하여 롤포워드할 수 있습니다.

여기서는 롤포워드를 해보겠습니다. 최신 코드 변경 내용을 되돌리고 파이프라인을 통해 다른 변경 내용을 푸시하겠습니다. 그러기 위해서는 git revert 명령을 사용하세요.

Git에서는 파일 기록에서 커밋을 거의 제거하지 않습니다. 텍스트 편집기의 “실행 취소” 작업과 달리 git revert 명령은 기본적으로 지정된 커밋 집합과 반대되는 새 커밋을 만듭니다. 커밋을 확인하려면 먼저 git log 명령을 실행하여 되돌리기 프로세스 중에 커밋 기록을 추적합니다.

  1. 터미널에서 다음 git log 명령을 실행하여 커밋 기록을 확인합니다.

    git --no-pager log --oneline

    출력은 다음 코드 예제와 유사합니다. 출력에 추가 커밋과 다른 커밋 ID가 표시됩니다.

    d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline

    출력에서 커밋 기록을 추적합니다. 최신 커밋은 맨 위에 있습니다.

  2. 다음 git revert 명령을 실행하여 하나의 커밋을 되돌립니다.

    git revert --no-edit HEAD

    HEAD를 분기의 현재 상태로 생각합니다. HEAD는 최신 커밋을 나타냅니다. 해당 명령은 HEAD(또는 최신) 커밋만 되돌리도록 지정합니다.

  3. git log를 다시 실행하여 업데이트된 커밋 기록을 확인합니다.

    git --no-pager log --oneline

    출력 맨 위에 이전 커밋을 되돌리는 추가 커밋이 표시됩니다. 예를 들면 다음과 같습니다.

    e58896a (HEAD -> blue-green) Revert "Change text and colors on the home page"
d6130b0 (origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline

파이프라인을 통해 되돌린 변경 내용 푸시하기

여기서는 파이프라인을 통해 되돌린 변경 내용을 푸시하고 결과를 확인합니다.

  1. 다음 git push 명령을 실행하여 blue-green 분기를 GitHub 리포지토리에 업로드합니다.

    git push origin blue-green

  2. Azure Pipelines에서 빌드로 이동합니다. 실행되는 빌드를 추적합니다.

  3. ‘스테이징’ 환경에 대한 swap 슬롯 및 production 슬롯에 해당하는 URL로 이동합니다.

    이제 production 슬롯은 원래 웹 사이트인 되돌린 변경 내용을 가리킵니다.

    Screenshot of a browser that shows the original Space Game website after reverting the changes. The website doesn't include the color and text changes.

    swap 슬롯은 이제 이전 변경 내용을 가리킵니다.

    Screenshot of a browser that shows the Space Game website after reverting the change. The website shows the color and text changes.

잘했습니다! 이제 팀은 릴리스를 자동화할 수 있습니다. 가동 중지 시간 없이 사용자에게 새로운 기능을 제공할 수 있습니다.

팀 회의

팀은 파이프라인을 시연하기 위해 모였습니다. 이번에는 모든 팀원이 지켜보는 가운데 Tim 님이 파이프라인을 통해 변경 내용을 푸시합니다. 하지만 모든 팀원이 파이프라인에 확신을 갖지는 못했습니다.

Andy: 배포 슬롯이 잘 작동하는 것을 볼 수 있어서 정말 좋습니다. 그런데 이해가 되지 않습니다. 가동 중지 시간이 없는 배포가 여기서 어떤 도움이 되나요? ‘스테이징’은 저희 팀과 경영진에게만 해당합니다.

Tim: 확실히 지금 당장은 많은 도움이 되지 않습니다. 그러나 ‘프로덕션’ 단계에 파란색-녹색 배포를 적용한다고 가정해보겠습니다. ‘프로덕션’으로 승격하기 전에는 계속 경영진의 수동 승인을 받아야 하지만, 새로운 기능을 릴리스하면 교환 프로세스를 통해 거의 즉시 출시할 수 있습니다. 사용자에게는 원활하게 제공할 수 있게 됩니다.

Andy: 이제 좀 이해가 되는 것 같습니다. 이런 개선은 좋습니다. 배포 슬롯 시스템은 설정하기 쉽고 사용자에게 도움이 됩니다. 모두에게 좋다고 할 수 있습니다.

Amita: 개선이라고 해서 하는 말인데 몇 주 전에 가치 흐름도 작성 연습을 다시 살펴보면 어떨까요? 새 기능을 릴리스하는 속도를 높일 수 있을 것 같습니다.

Mara: 좋습니다. 해당 내용을 다음 팀 회의 안건으로 올려 두겠습니다.