티스토리 뷰
|
2020.06.05 업데이트
* 동영상 : 발표 동영상 보러가기 * 발표자료 : 발표 자료 다운로드 |
들어가기에 앞서
이 실습의 목적은 Azure DevOps를 이용하여 간단하고 손쉽게 CI/CD 체계를 구축해서 Azure 상에 Web App으로 배포하는 과정을 보여주기 위함이다.
또한, 세부적인 내용을 다루기 보다는 최대한 간결하고 쉽게 따라해 볼 수 있도록 하는데 초점을 맞추었으며,
DevOps에 관심을 가지고 있는 모든 사람들에게 Azure DevOps에 대한 매력과 효용성을 알리고 싶은 마음에 이 글을 작성하게 되었다.
준비사항
- Azure 구독 : 준비가 안되었다면 Azure 체험 계정 만들기를 참조한다.
- Azure DevOps 계정 : 아직 계정이 없다면 Azure DevOps 계정 만들기를 참조한다.
- git bash : git for windows 최신 버전을 다운로드 받아 기본값으로 설치를 진행한다.
|
참고 Azure 실습을 위한 Visual Studio Code 환경 구성을 참조하면 보다 Nice한 작업환경을 구성할 수 있다. |
Azure DevOps 프로젝트 생성
우측 상단의 + New project를 선택하여 새로운 프로젝트를 생성한다.
좌측에 Repos를 선택한다. 리포지토리가 비워 있으니 코드를 추가해 보자!
.NET 프로젝트 생성
git bash 터미널을 열고 다음 명령을 수행하여 dotnet 프로젝트를 생성한다.
| dotnet new mvc -n azuredevops-demo.web |
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson
$ dotnet new mvc -n azuredevops-demo.web
The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/3.1-third-party-notices for details.
Processing post-creation actions...
Running 'dotnet restore' on azuredevops-demo.web\azuredevops-demo.web.csproj...
171.84 ms에서 D:\Azure_DevOps_Study\20200216 - azuredevops-handson\azuredevops-demo.web\azuredevops-demo.web.csproj에 대한 복원을 완료했습니다.
Restore succeeded.
생성된 프로젝트 디렉토리 이동 후 git init을 수행한다.
|
cd azuredevops-demo.web/ git init
|
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson
$ cd azuredevops-demo.web/
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web
$ git init
Initialized empty Git repository in D:/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web/.git/
git add, commit을 수행한다.
|
git add . git commit -m "Initial Commit"
|
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web (master)
$ git add .
warning: LF will be replaced by CRLF in appsettings.Development.json.
The file will have its original line endings in your working directory
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web (master)
$ git commit -m "Initial Commit"
[master (root-commit) 5232d52] Initial Commit
55 files changed, 39761 insertions(+)
create mode 100644 Controllers/HomeController.cs
create mode 100644 Models/ErrorViewModel.cs
create mode 100644 Program.cs
create mode 100644 Properties/launchSettings.json
create mode 100644 Startup.cs
create mode 100644 Views/Home/Index.cshtml
create mode 100644 Views/Home/Privacy.cshtml
create mode 100644 Views/Shared/Error.cshtml
create mode 100644 Views/Shared/_Layout.cshtml
create mode 100644 Views/Shared/_ValidationScriptsPartial.cshtml
create mode 100644 Views/_ViewImports.cshtml
create mode 100644 Views/_ViewStart.cshtml
create mode 100644 appsettings.Development.json
create mode 100644 appsettings.json
create mode 100644 azuredevops-demo.web.csproj
create mode 100644 obj/azuredevops-demo.web.csproj.nuget.dgspec.json
create mode 100644 obj/azuredevops-demo.web.csproj.nuget.g.props
create mode 100644 obj/azuredevops-demo.web.csproj.nuget.g.targets
create mode 100644 obj/project.assets.json
create mode 100644 wwwroot/css/site.css
create mode 100644 wwwroot/favicon.ico
create mode 100644 wwwroot/js/site.js
create mode 100644 wwwroot/lib/bootstrap/LICENSE
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-grid.css
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-grid.css.map
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-grid.min.css
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-grid.min.css.map
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-reboot.css
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-reboot.css.map
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-reboot.min.css
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap-reboot.min.css.map
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap.css
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap.css.map
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap.min.css
create mode 100644 wwwroot/lib/bootstrap/dist/css/bootstrap.min.css.map
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js.map
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.min.js
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.min.js.map
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.js
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.js.map
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.min.js
create mode 100644 wwwroot/lib/bootstrap/dist/js/bootstrap.min.js.map
create mode 100644 wwwroot/lib/jquery-validation-unobtrusive/LICENSE.txt
create mode 100644 wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js
create mode 100644 wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js
create mode 100644 wwwroot/lib/jquery-validation/LICENSE.md
create mode 100644 wwwroot/lib/jquery-validation/dist/additional-methods.js
create mode 100644 wwwroot/lib/jquery-validation/dist/additional-methods.min.js
create mode 100644 wwwroot/lib/jquery-validation/dist/jquery.validate.js
create mode 100644 wwwroot/lib/jquery-validation/dist/jquery.validate.min.js
create mode 100644 wwwroot/lib/jquery/LICENSE.txt
create mode 100644 wwwroot/lib/jquery/dist/jquery.js
create mode 100644 wwwroot/lib/jquery/dist/jquery.min.js
create mode 100644 wwwroot/lib/jquery/dist/jquery.min.map
Azure DevOps - Repos 화면에서 Push an existing repository from command line의 내용을 복사한다.
git bash 터미널 창에 붙여 넣어 원격 리포지토리를 추가하고 코드를 Push 한다.
|
git remote add origin https://zerobigDevOps@dev.azure.com/zerobigDevOps/azuredevops-cicd-demo/_git/azuredevops-cicd-demo git push -u origin --all
|
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web (master)
$ git remote add origin https://zerobigDevOps@dev.azure.com/zerobigDevOps/azuredevops-cicd-demo/_git/azuredevops-c
icd-demo
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web (master)
$ git push -u origin --all
Enumerating objects: 77, done.
Counting objects: 100% (77/77), done.
Delta compression using up to 8 threads
Compressing objects: 100% (71/71), done.
Writing objects: 100% (77/77), 731.86 KiB | 3.45 MiB/s, done.
Total 77 (delta 11), reused 0 (delta 0)
remote: Analyzing objects... (77/77) (145 ms)
remote: Storing packfile... done (72 ms)
remote: Storing index... done (41 ms)
remote: We noticed you're using an older version of Git. For the best experience, upgrade to a newer version.
To https://dev.azure.com/zerobigDevOps/azuredevops-cicd-demo/_git/azuredevops-cicd-demo
* [new branch] master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
Azure DevOps - Repo 화면을 새로고침하면 다음과 같이 코드가 정상적으로 Push되어 있음을 확인할 수 있다.
Azure DevOps Build Pipeline 생성 및 구성
좌측 메뉴 중 로켓 모양의 아이콘을 누르면 다음과 같은 화면이 나타나는데 Create Pipeline를 선택한다.
코드의 위치를 묻는 화면이 나타난다. 하단의 Use the classic editor를 선택한다.
소스위치를 선택하는 화면이 나타난다. 이미 기본값으로 Azure Repos Git이 선택되어 있으니 Continue를 선택하여 진행한다.
우측 상단 검색창에 ASP.NET을 입력 후 결과 중 ASP.NET Core를 선택하고 Apply 한다.
다음과 같은 화면은 화면이 나타난다.
Agent job 1 우측에 + 버튼을 눌러 Task 하나를 추가하겠다.
검색창에 use라고 입력하고 결과 중 Use .NET Core를 선택하여 Add 한다.
추가된 Task를 선택 후 드래그 하여 최상단에 배치시킨다.
SDK 버전에 대한 Version 필드에 3.1.x 라는 값을 입력하고 Include Preview Versions을 선택해준다.
상단 중앙에 Save & queue를 선택하고 Save & queue를 눌러 빌드를 누른다.
Comment를 입력(선택)하고 Save and run을 눌러 빌드를 진행한다.
잠시 후 빌드가 진행된다.
별 문제가 없다면 다음과 같이 성공화면이 나타난다.
Azure Portal - Web App 생성
이제 Release 파이프라인을 생성하기에 앞서 배포 대상이 될 Azure Web App을 하나 생성하도록 하겠다.
Azure 포털 상단의 검색창에 web app이라고 입력하고 결과 중 Web App을 선택한다.
다음과 같이 선택/입력하고 Review + create를 선택하여 Web App을 생성한다.
- Resource Group : Create new를 눌러 임의의 이름 입력
- Name : Unique한 값으로 임의의 이름 입력
- Runtime stack : .NET Core 3.1 (LTS)
- Region : Korea Central로 선택
요약화면에서 다시 Create를 선택한다.
약 1분 전후로 생성이 완료되며 Go to resource를 선택하여 생성된 리소스로 이동한다.
Overview 화면에서 우측의 URL을 선택한다.
기본 .NET 페이지가 나나탄다. 이제 이 페이지의 내용을 우리가 원하는 내용으로 변경하도록 하겠다.
진행하기애 앞서 해당 URL 정보를 기록해 둔다.
https://azuredevops-cicd-demo.azurewebsites.net/
Azure DevOps Release Pipeline 생성 및 구성
좌측 메뉴 Pipelines - Releases를 선택하여 새로운 Release 파이프라인을 생성한다.
템플릿 선택 화면이 나타난다. Azure App Service deployment를 선택하고 Apply를 누른다.
Stage Name에 임의의 이름을 입력하고 X 버튼을 눌러 창을 닫는다.
+ Add an artifact을 선택한다.
Source (build pipeline) 샐랙트 박스를 선택하고 CI 빌드 결과의 산출물을 선택 후 Add를 누른다.
Dev 스테이지의 1 job, 1 task를 선택한다.
Azure subscription 필드에서 자신의 구독을 선택하고 Authorize를 눌러 Azure의 ID/Password를 입력하여 인증을 진행한다.
인증이 이루어지면 다음과 같이 입력/선택 한다.
- App type : Web App on Linux
- App service name : 생성했던 Web App의 이름
이제 우측 상단의 Save - OK를 누르고 create release를 선택한다.
Create a new release 창이 뜨면 Create를 눌러 배포를 진행한다.
Release-1을 선택하면 릴리스 진행상황을 확인할 수 있다.
성공적으로 배포가 이루어 졌다면 다음과 같이 확인된다.
위에서 기록해 두었던 URL로 다시 접속하거나 페이지를 새로 고침하면 다음과 같이 우리가 생성한 프로젝트의 코드 내용으로 업데이트 되는 것을 확인할 수 있다.
https://azuredevops-cicd-demo.azurewebsites.net/
소스 수정 및 CI/CD 검증
이제 소스를 수정하여 우리가 구성한 CI/CD가 정상적으로 동작하는지 검증해보도록 하겠다
먼저, Pipelines - Builds를 선택하고 우측 상단의 Edit를 누른다.
Triggers 화면에서 Enable continuous integration을 선택하고 Save & queue를 눌러 Save를 선택한다.
이 설정으로 지속적인 통합 즉, 소스에 변경이 유발되면 자동으로 CI가 유발될 것이다.
이제 Pipelines - Releases를 선택하고 우측 상단에 Edit을 선택한다.
Continuous deployment trigger 화면에서 Continuous deployment trigger를 활성화 하고 우측 상단의 Save를 선택한다.
git bash 터미널에서 다음 명령을 이용하여 Views/Home/Index.cshtml 파일을 연다.
| $ vi Views/Home/Index.cshtml |
git commit, push를 수행한다.
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web (master)
$ git commit -am "Updated Index.cshtml"
[master 56a8c62] Updated Index.cshtml
1 file changed, 1 insertion(+), 1 deletion(-)
zerobig@ZEROBIG-NT800 MINGW64 /d/Azure_DevOps_Study/20200216 - azuredevops-handson/azuredevops-demo.web (master)
$ git push
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 483 bytes | 483.00 KiB/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Analyzing objects... (5/5) (9 ms)
remote: Storing packfile... done (39 ms)
remote: Storing index... done (81 ms)
remote: We noticed you're using an older version of Git. For the best experience, upgrade to a newer version.
To https://dev.azure.com/zerobigDevOps/azuredevops-cicd-demo/_git/azuredevops-cicd-demo
5232d52..56a8c62 master -> master
잠시 후 Build가 유발된 것을 확인할 수 있다.
Build가 성공적으로 이루어 졌다.
곧, Releases 가 유발됨을 확인할 수 있다.
Release도 성공적으로 이루어짐이 확인된다.
이제 마지막으로 웹 페이지를 화인해 본다.
https://azuredevops-cicd-demo.azurewebsites.net/
우리가 의도한 바와 같이 성공적으로 메시지가 업데이트 되었다.
테스트를 모두 마쳤으므로 불필요한 비용 발생을 방지하기 위해 필히 Azure 포털에 생성했던 리소스를 삭제하도록 한다.
Azure 포털의 Resource Group에서 생성한 리소스 그룹으로 이동하여 Delete resource group을 선택하고 최종확인을 위해 리소스 그룹 명을 입력하고 Delete를 선택한다.
