Visual Studio Online "Monaco" 서비스와 github 연동
모나코라는 재미있는 서비스가 이번 Visual Studio 2013 런칭 쇼에서 새롭게 소개가 되었는데요. 실제로 지금 Preview 서비스 상태에 있기 때문에 테스트가 가능합니다.
우선 개념부터 말씀드리면, Windows Azure에서 제공되는 서비스 중에서 "Web Sites" 유형의 서비스를 개발할 때 Visual Studio Online 서비스와 자연스럽게 연동할 수 있는 것이 모나코입니다. 사실 이거 설명하려고 ^^ 지난 2개의 글이 쓰여진 것입니다.
Azure - WEB SITES 서비스 소개
; https://www.sysnet.pe.kr/2/0/1540
형상 관리 서버 운영을 대신해 주는 Visual Studio 온라인 서비스
; https://www.sysnet.pe.kr/2/0/1539
나중에 어떤 식으로 확장할지는 알 수 없으나, 어쨌든 지금은 "WEB SITES" 유형에 대해서만 가능합니다. (기왕이면 클라우드 서비스에도 적용되었으면 좋겠습니다. ^^)
Azure 웹 사이트 유형과 Visual Studio Online 서비스가 .NET Framework에만 국한된 것은 아니기 때문에 이외의 다양한 플랫폼에서 모나코의 편리함을 누릴 수 있는데요. 다음의 channel9 비디오에 각각의 플랫폼에서 활용되는 사례가 소개되고 있습니다.
Visual Studio Online "Monaco"
; http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco
위의 목록에서 "First Steps"라는 제목이 붙은 동영상에서는 Node.js로 서비스를 개발하는 상황에서 어떻게 Visual Studio Online과 Azure Web Site가 통합되는지를 보여주고 있습니다.
Visual Studio Online "Monaco" - First Steps
; http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco/First-Steps
어디... 그럼 .NET 프로젝트로도 한번 실습해 볼까요? ^^
지난번에 만들어 둔 웹 사이트인 anyconnect.azurewebsites.net으로 이야기를 이어서 진행해 보겠습니다.
우선 Azure 웹 사이트와 Visual Studio Online을 연동해야 하는데요. 이를 위해 "구성" 탭의 "EDIT IN VISUAL STUDIO ONLINE" 설정으로 가서 "Setup deployment credentials now.." 링크를 눌러,
Azure의 웹 사이트 서비스 배포에 공통으로 사용될 계정을 설정해 주어야 합니다.
정상적으로 계정 정보를 입력한 경우 "EDIT IN VISUAL STUDIO ONLINE" 항목이 선택가능하게 바뀌고, "설정"으로 바꿔준 후 저장 버튼을 눌러줍니다.
이어서 웹 사이트의 "대시보드" 탭을 누르고 우측 하단에 "Visual Studio 온라인에서 편집" 링크를 누릅니다. (이 링크가 간혹 느리게 보여지는 경우가 있으므로 잠시 기다려야 할 수도 있습니다.)
링크를 누르면 계정 확인창이 뜨고 방금 전 설정에서 입력한 계정 정보를 입력하면 다음과 같이 "Visual Studio Online" 서비스로 연결됩니다. (엄밀히 따지면, 여기서의 "Visual Studio Online" 서비스는
지난번 글에 설명한 서비스와는 이름만 같을 뿐 운영이 다릅니다. 그래서 이름이 다소 혼란스러운데요. 여기서의 "Visual Studio Online" 서비스를 특징지어 Monaco라고 보시면 그나마 자연스러울 것 같습니다.)
화면 좌측의 목록을 보면 웹 사이트 운영을 위한 파일이 나오는데요. 여기서 파일을 편집하게 되면 웹 사이트에 바로 반영이 됩니다. 아래에서는 기본 생성된 anyconnect 사이트의 Default.cshtml 파일의 <body />에 "Hello My World"를 편집해서 넣었고 이 상태에서 좌측의 세로 바에서 "Run" 아이콘을 누르거나 단축키로 Ctrl+F5 키를 누르면 사이트에 반영됩니다.
FTP 접속도 필요 없고, 곧바로 웹에서 사이트를 수정하고 반영할 수 있기 때문에 Monaco의 도움으로 인해 확실히 개발/배포가 편리해졌다는 것을 알 수 있습니다.
모나코의 기능은 파일 편집만 가능한 것은 아닙니다. 자체적인 GIT 저장소를 제공해 주는데, 혹시나 git에 대해 낯선 분들은 우선 다음의 글을 먼저 읽어보시는 것을 권장합니다.
Visual Studio를 위한 Git 환경 설정
; https://www.sysnet.pe.kr/2/0/1501
Visual Studio - git을 이용한 로컬 소스 컨트롤
; https://www.sysnet.pe.kr/2/0/1502
Visual Studio - github 연동
; https://www.sysnet.pe.kr/2/0/1503
지금부터는 git에 대해 알고 있다는 가정하에 진행합니다.
모나코에 git을 설정하기 위해 다음과 같이 좌측 세로바의 "GIT" 아이콘을 선택하고 "Initialize git repository" 버튼을 누르면,
그 즉시 .git 저장소가 생성되고 다음과 같이 commit과 push/pull을 할 수 있습니다. 이 중에서 우선 "Commit all"을 선택해서 로컬 GIT 저장소에 파일을 커밋해 둡니다.
이 상태에서 push/pull 메뉴를 선택하면 어떻게 될까요? 당연히 원격 GIT 저장소가 지정돼 있지 않으므로 오류가 발생합니다. 게다가 모든 GIT 명령어를 웹 페이지에서 지원하는 것은 아니기 때문에 다음과 같이 콘솔 창을 띄워 명령행으로 제어를 해야 합니다.
실제로 여기서는 외부 git 저장소로 github를 선택해 볼 텐데요. 이를 위해 미리 github에는 제 계정으로 git 저장소를 만들어 두었습니다.
stjeong / anyconnect
; https://github.com/stjeong/anyconnect
그런데, (
아직 Preview버전이기 때문에) 원격 git 저장소를 인증하는 방법이 다양하지 않습니다. 현재 기본인증만 제공하기 때문에 원격 git 저장소가 반드시 그 인증을 지원해야만 합니다. 가령 github의 경우 다음과 같이 Monaco 콘솔에서 실행해 보면 실패하게 됩니다.
/ (master) $ git remote add origin git@github.com:stjeong/anyconnect.git
/ (master) $ git push -u origin master
Host key verification failed.
fatal: The remote end hung up unexpectedly
/ (master) $ ssh-keygen
Command not found. Type help for a list of available commands.
/ (master) $ help
Available console commands:
cd Directory navigation
del Delete file
dir Directory browsing
express Express node.js MVC framework commanding
git Git source control commanding
help List of available commands
jake Jake commanding
ls Directory browsing
mkdir Create directory
msbuild MSBuild commanding
node Node.js commanding
npm Node package manager
nuget NuGet commanding
ps PowerShell commanding
rm Delete file
unzip Unzip archives
실패 이유는 공개키 인증 방법이 지원되지 않기 때문입니다. 즉, 원격 저장소를 위한 사용자 인증 키 파일을 생성 및 지정할 수 없으므로 아래와 같이 기본 인증을 지원하는 https로 접근을 대신 해야 합니다.
/ (master) $ git remote add github_git https://github.com/stjeong/anyconnect.git
/ (master) $ git push -u github_git master
그럼 다음과 같이 github 계정 정보를 물어보고, 여기에 github 사이트의 로그인 정보를 입력하면 됩니다.
정상적으로 계정 정보를 입력했으면 github 측과 파일 동기화가 진행됩니다. 이런 식으로 외부 GIT 저장소와 연동할 수 있기 때문에 팀 내의 다른 개발자는 그러한 저장소를 경유해서 Azure 웹 사이트 개발을 협업하는 것이 가능합니다.
참고로, 원격 저장소 설정은 다음의 명령어로 지울 수 있습니다.
/ (master) $ git remote -v
origin git@github.com:stjeong/anyconnect.git (fetch)
origin git@github.com:stjeong/anyconnect.git (push)
/ (master) $ git remote rm origin
정리해 보면, Monaco는 기존 Azure Web Sites 서비스의 파일을 웹 상에서 직접 변경하고 실행할 수 있게 해줍니다. 또한 기본적으로 소스 컨트롤 시스템으로 GIT을 제공해 준다는 특징이 있습니다.
사실, 제 개인적인 생각으로는 Monaco는 .NET 개발자를 겨냥한 지원은 아닌 것 같습니다. 위의 과정대로라면 닷넷 프로젝트를 통째로 웹 사이트와 연동시켜서 서비스한다는 것인데 사실 지금까지의 닷넷 개발은 이런 식이 아니기 때문입니다. 일례로 소스코드를 웹 서버에 올려놓는 것은 익숙하지 않지요. 물론, 이것은 어쩌면 생각의 차이에 있습니다. 모나코 식의 개발이 익숙해지면 서버에 소스코드를 올려놓은 것이 당연할지도 모릅니다. (모나코 콘솔은 msbuild도 지원하기 때문에 소스코드를 그 순간에 빌드해서 적용할 수 있고, 소스코드 파일은 보안상 클라이언트 측으로 다운로드되는 것이 막혀 있다는 점 등을 상기해 볼 필요가 있습니다.)
하지만, 닷넷이 아닌 PHP나 node.js는 어떨까요? 인터프리터 식의 개발이라면 모나코는 적절한 선택일 수 있습니다. 서버에서 직접 개발하면서 소스제어까지 되니 금상첨화입니다. 그런 면에서 봤을 때 모나코는 닷넷 개발자에 대한 손짓이라기보다는, PHP나 Python, node.js 개발자들에 대한 구애라고 봐야할 것 같습니다. ^^
마지막으로, 모나코에 대한 포럼을 소개합니다. 마이크로소프트 직원들과 직접 대화가 이뤄지고 있기 때문에 좀 더 확실한 답변을 받을 수 있습니다.
Windows Azure - CTPs, Betas & Labs forums > Visual Studio Online "Monaco"
; http://social.msdn.microsoft.com/Forums/windowsazure/en-US/home?forum=azuremon
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]