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

19분

이 단원에서는 Space Game 웹 사이트의 사소한 변경 내용을 GitHub에 푸시하여 전체 코드 워크플로를 연습합니다.

Mara는 웹 사이트의 홈페이지(예: Index.cshtml)에 있는 일부 텍스트를 변경하는 작업을 맡았습니다. 이 단원에서는 Mara의 작업을 따라가 보겠습니다.

작업을 완료하기 위해 수행해야 하는 단계를 간략하게 살펴보겠습니다.

로컬 리포지토리를 GitHub의 최신 main 분기와 동기화
변경 내용을 저장할 분기 만들기
필요한 코드를 변경하고 로컬에서 확인
GitHub에 분기 푸시
GitHub에서 main 분기의 최근 변경 내용을 로컬 작업 분기에 병합하고 변경 내용이 여전히 작동하는지 확인
남아 있는 모든 변경 내용을 푸시하고, Azure Pipelines가 애플리케이션을 빌드하는 것을 보고, 끌어오기 요청을 제출

웹 애플리케이션 빌드 및 실행

변경을 시작하는 작업 복사본이 있는지 확인하려면 웹 애플리케이션을 로컬에서 빌드하고 실행합니다.

Visual Studio Code에서 터미널 창으로 이동하고 다음 dotnet build 명령을 실행하여 애플리케이션을 빌드합니다.
```
dotnet build --configuration Release
```
다음 dotnet run 명령을 실행하여 애플리케이션을 실행합니다.
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
팁

브라우저에 개인 정보 또는 인증서 오류와 관련된 오류가 표시되는 경우 터미널에서 Ctrl + C를 선택하여 실행 중인 애플리케이션을 중지합니다.

그런 다음 dotnet dev-certs https --trust을(를) 실행하고 메시지가 표시되면 예를 선택하거나, 이 블로그 게시물을 참조하여 자세한 내용을 확인합니다.

컴퓨터에서 로컬 SSL 인증서를 신뢰하면 dotnet run 명령을 두 번 실행하고 새 브라우저 탭에서 http://localhost:5000으로 이동하여 실행 중인 애플리케이션을 확인합니다.

실행 중인 애플리케이션 확인

개발 모드에서 Space Game 웹 사이트는 포트 5000에서 실행되도록 구성됩니다.

새 브라우저 탭에서 http://localhost:5000으로 이동하여 실행 중인 애플리케이션을 확인합니다.

다음이 표시됩니다.

Screenshot of the Space Game website running in a web browser.

순위표를 포함해 페이지와 상호 작용할 수 있습니다. 플레이어의 이름을 선택하면 해당 플레이어에 대한 세부 정보가 표시됩니다.

완료되면 터미널 창으로 돌아가서 Ctrl+C를 선택하여 실행 중인 애플리케이션을 중지합니다.

기능 분기 만들기

이 섹션에서는 다른 사람에게 영향을 주지 않고 파일에 대해 작업할 수 있도록 Git 분기를 만듭니다. 원격 리포지토리로 해당 파일을 푸시할 때까지 아무도 해당 파일에 대해 작업 중인지 알 수 없습니다.

분기를 만들려면 앞서 했던 것처럼 git checkout 명령을 사용하고 분기 이름을 지정합니다.

분기를 만들기 전에 명명 규칙을 따르는 것이 좋습니다. 예를 들어 새 기능에 대한 작업 수행을 위한 분기라면 feature/<branch-name>으로, 버그 수정을 위한 분기라면 bugfix/<bug-number>로 이름을 지정할 수 있습니다. 이 예제에서 분기 이름은 feature/home-page-text입니다.

터미널에서 다음 git checkout 명령을 실행합니다.

git checkout -B feature/home-page-text

이전과 마찬가지로 feature/home-page-text는 main 분기를 기반으로 합니다.

변경하고 로컬에서 테스트

Visual Studio Code의 Tailspin.SpaceGame.Web/Views/Home 디렉터리에서 Index.cshtml을 엽니다.
페이지 맨 위에 있는 다음 텍스트를 찾습니다.
```
<p>An example site for learning</p>
```
팁

또한 Visual Studio Code는 파일에서 텍스트를 검색할 수 있는 쉬운 방법을 제공합니다. 검색 창에 액세스하려면 왼쪽 창에서 돋보기 아이콘을 선택합니다.
이전 단계의 텍스트를 다음 “잘못 입력”된 텍스트로 바꾼 다음 파일을 저장합니다.
```
<p>Welcome to the oficial Space Game site!</p>
```
여기서는 “Oficial”이라고 단어를 의도적으로 잘못 입력했습니다. 해당 오류는 이 모듈의 뒷부분에서 해결할 예정입니다.
터미널에서 다음 dotnet build 명령을 실행하여 애플리케이션을 빌드합니다.
```
dotnet build --configuration Release
```

다음 dotnet run 명령을 실행하여 애플리케이션을 실행합니다.

dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

새 브라우저 탭에서 http://localhost:5000으로 이동하여 실행 중인 애플리케이션을 확인합니다.

홈페이지에 업데이트된 텍스트가 포함된 것을 확인할 수 있습니다.

완료되면 터미널 창으로 돌아가서 Ctrl+C를 눌러 실행 중인 애플리케이션을 중지합니다.

분기 커밋 및 푸시

여기서는 Index.cshtml에 대한 변경 내용을 준비하고 분기에 변경 내용을 커밋하고, 분기를 GitHub로 푸시합니다.

git status를 실행하여 분기에 커밋되지 않은 변경 내용이 있는지 확인합니다.
```
git status
```
Index.cshtml이 수정된 것을 확인할 수 있습니다. 이전과 마찬가지로 다음 단계는 Git에서 이 파일을 추적하고 있는지 확인하는 것이며, 이를 파일을 스테이징한다고 합니다.
다음 git add 명령을 실행하여 Index.cshtml을 준비합니다.
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
다음 git commit 명령을 실행하여 스테이징된 파일을 feature/home-page-text 분기로 커밋합니다.
```
git commit -m "Improve the text at the top of the home page"
```
git push 명령을 실행하여 feature/home-page-text 분기를 GitHub의 리포지토리로 푸시하거나 업로드합니다.
```
git push origin feature/home-page-text
```
앞에서와 마찬가지로 분기 드롭다운 상자에서 GitHub의 분기를 찾을 수 있습니다.

애플리케이션을 빌드하는 Azure Pipelines 관찰

이전에 수행한 것처럼 GitHub에 변경 내용을 푸시할 때 Azure Pipelines에서 빌드를 자동으로 큐에 넣습니다.

필요한 경우 파이프라인에서 이동하는 빌드를 추적하고 제대로 빌드되는지 확인합니다.

기본 분기에 모든 변경 내용 동기화

기능에 대한 작업을 수행하는 동안 원격 main 분기가 변경되었을 수 있습니다. 따라서 끌어오기 요청을 만들기 전에 원격 main 분기에서 최신 버전을 가져오는 것이 일반적입니다.

이를 위해서는 먼저 main 분기를 체크 아웃 또는 이 분기로 전환한 다음, 원격 main 분기를 로컬 main 분기와 병합합니다.

다음으로 기능 분기를 체크 아웃한 다음, 기능 분기를 main 분기와 병합합니다.

지금 해당 프로세스를 수행해 보겠습니다.

터미널에서 다음 git checkout 명령을 실행하여 main 분기를 체크 아웃합니다.
```
git checkout main
```
원격 main 분기의 최신 변경 내용을 다운로드하고 해당 변경 내용을 로컬 main 분기에 병합하려면 다음 git pull 명령을 실행합니다.
```
git pull origin main
```
실제로 main 분기를 변경한 사람이 없기 때문에 다음 명령은 모든 항목이 이미 최신 상태임을 알려 줍니다.
```
From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.
```
기능 분기를 체크 아웃하려면 git checkout을(를) 실행합니다.
```
git checkout feature/home-page-text
```
기능 분기를 main과(와) 병합합니다.
```
git merge main
```
다시 말하지만, 실제로 main 분기를 변경한 사람이 없기 때문에 모든 항목이 여전히 최신 상태임을 알 수 있습니다.
```
Already up to date.
```
모든 변경 내용을 통합한 경우 애플리케이션을 다시 테스트하여 모든 항목이 여전히 잘 작동하는지 확인합니다.

로컬 분기를 다시 푸시합니다.

원격 리포지토리의 변경 내용을 로컬 기능 분기로 통합하는 경우 로컬 분기를 다시 원격 리포지토리로 두 번째 푸시해야 합니다.

원격 리포지토리의 변경 내용을 통합하지 않았지만 해당 프로세스를 사용하여 결과를 확인하는 것이 좋습니다.

다음 git push 명령을 실행하여 GitHub에 변경 내용을 푸시합니다.
```
git push origin feature/home-page-text
```
다시 한번, 변경 내용이 없어 이미 최신 상태라는 응답이 표시됩니다.
```
Everything up-to-date
```

끌어오기 요청 제출

이 섹션에서는 이전에 했던 것처럼 끌어오기 요청을 제출합니다.

브라우저에서 GitHub에 로그인합니다.
mslearn-tailspin-spacegame-web 리포지토리로 이동합니다.
드롭다운 목록에서 feature/home-page-text 분기를 선택합니다.
끌어오기 요청을 시작하려면 참가를 선택하고 끌어오기 요청 열기를 선택합니다.
베이스 드롭다운 목록에 Microsoft 리포지토리가 아닌 리포지토리가 지정되어 있는지 확인합니다.

Important

다시 설명하지만, Microsoft 리포지토리에 변경 내용을 병합할 수 없기 때문에 이 단계가 중요합니다.

포크가 아니라 사용자 고유의 리포지토리를 사용하여 직접 작업하는 경우 main 분기가 기본적으로 선택됩니다.
끌어오기 요청의 제목 및 설명을 입력합니다.
- 제목: 홈페이지 상단에서 텍스트 개선
- 설명: 생산 팀에서 최신 홈페이지 텍스트를 받았습니다.
끌어오기 요청을 완료하려면 끌어오기 요청 만들기를 선택합니다.

이 단계에서는 코드를 병합하지 않고, 다른 사용자에게 병합하도록 제안하는 변경 내용이 있음을 알려줍니다.

끌어오기 요청 창이 표시됩니다. 이전처럼 끌어오기 요청은 Azure Pipelines를 트리거하여 기본적으로 애플리케이션을 빌드합니다.
필요에 따라 세부 정보 링크를 선택하거나 Azure DevOps에서 프로젝트로 이동하여 파이프라인 실행을 봅니다.
빌드가 완료되면 GitHub에서 끌어오기 요청으로 돌아갑니다.
Merge pull request(끌어오기 요청 병합)를 선택하고 Confirm merge(병합 확인)를 선택합니다.
분기 삭제를 선택하여 GitHub에서 feature/home-page-text 분기를 삭제합니다.