성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Visual Studio Online "Monaco" 서비스와 github 연동</h1> <p> 모나코라는 재미있는 서비스가 이번 Visual Studio 2013 런칭 쇼에서 새롭게 소개가 되었는데요. 실제로 지금 Preview 서비스 상태에 있기 때문에 테스트가 가능합니다.<br /> <br /> 우선 개념부터 말씀드리면, Windows Azure에서 제공되는 서비스 중에서 "Web Sites" 유형의 서비스를 개발할 때 Visual Studio Online 서비스와 자연스럽게 연동할 수 있는 것이 모나코입니다. 사실 이거 설명하려고 ^^ 지난 2개의 글이 쓰여진 것입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Azure - WEB SITES 서비스 소개 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1540'>http://www.sysnet.pe.kr/2/0/1540</a> 형상 관리 서버 운영을 대신해 주는 Visual Studio 온라인 서비스 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1539'>http://www.sysnet.pe.kr/2/0/1539</a> </pre> <br /> 나중에 어떤 식으로 확장할지는 알 수 없으나, 어쨌든 지금은 "WEB SITES" 유형에 대해서만 가능합니다. (기왕이면 클라우드 서비스에도 적용되었으면 좋겠습니다. ^^)<br /> <br /> Azure 웹 사이트 유형과 Visual Studio Online 서비스가 .NET Framework에만 국한된 것은 아니기 때문에 이외의 다양한 플랫폼에서 모나코의 편리함을 누릴 수 있는데요. 다음의 channel9 비디오에 각각의 플랫폼에서 활용되는 사례가 소개되고 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Visual Studio Online "Monaco" ; <a target='tab' href='http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco'>http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco</a> </pre> <br /> 위의 목록에서 "First Steps"라는 제목이 붙은 동영상에서는 Node.js로 서비스를 개발하는 상황에서 어떻게 Visual Studio Online과 Azure Web Site가 통합되는지를 보여주고 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Visual Studio Online "Monaco" - First Steps ; <a target='tab' href='http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco/First-Steps'>http://channel9.msdn.com/Series/Visual-Studio-Online-Monaco/First-Steps</a> </pre> <br /> 어디... 그럼 .NET 프로젝트로도 한번 실습해 볼까요? ^^<br /> <br /> <hr style='width: 50%' /><br /> <br /> <a target='tab' href='http://www.sysnet.pe.kr/2/0/1540'>지난번에 만들어 둔 웹 사이트인 anyconnect.azurewebsites.net</a>으로 이야기를 이어서 진행해 보겠습니다.<br /> <br /> 우선 Azure 웹 사이트와 Visual Studio Online을 연동해야 하는데요. 이를 위해 "구성" 탭의 "EDIT IN VISUAL STUDIO ONLINE" 설정으로 가서 "Setup deployment credentials now.." 링크를 눌러,<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='monaco_integration_1.png' src='/SysWebRes/bbs/monaco_integration_1.png' /><br /> <br /> Azure의 웹 사이트 서비스 배포에 공통으로 사용될 계정을 설정해 주어야 합니다.<br /> <br /> <img alt='monaco_integration_2.png' src='/SysWebRes/bbs/monaco_integration_2.png' /> <br /><br /> 정상적으로 계정 정보를 입력한 경우 "EDIT IN VISUAL STUDIO ONLINE" 항목이 선택가능하게 바뀌고, "설정"으로 바꿔준 후 저장 버튼을 눌러줍니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='monaco_integration_3.png' src='/SysWebRes/bbs/monaco_integration_3.png' /><br /> <br /> 이어서 웹 사이트의 "대시보드" 탭을 누르고 우측 하단에 "Visual Studio 온라인에서 편집" 링크를 누릅니다. (이 링크가 간혹 느리게 보여지는 경우가 있으므로 잠시 기다려야 할 수도 있습니다.)<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='monaco_integration_4.png' src='/SysWebRes/bbs/monaco_integration_4.png' /><br /> <br /> 링크를 누르면 계정 확인창이 뜨고 방금 전 설정에서 입력한 계정 정보를 입력하면 다음과 같이 "Visual Studio Online" 서비스로 연결됩니다. (엄밀히 따지면, 여기서의 "Visual Studio Online" 서비스는 <a target='tab' href='http://www.sysnet.pe.kr/2/0/1539'>지난번 글에 설명한 서비스</a>와는 이름만 같을 뿐 운영이 다릅니다. 그래서 이름이 다소 혼란스러운데요. 여기서의 "Visual Studio Online" 서비스를 특징지어 Monaco라고 보시면 그나마 자연스러울 것 같습니다.)<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='monaco_integration_5.png' src='/SysWebRes/bbs/monaco_integration_5.png' /><br /> <br /> 화면 좌측의 목록을 보면 웹 사이트 운영을 위한 파일이 나오는데요. 여기서 파일을 편집하게 되면 웹 사이트에 바로 반영이 됩니다. 아래에서는 기본 생성된 anyconnect 사이트의 Default.cshtml 파일의 <body />에 "Hello My World"를 편집해서 넣었고 이 상태에서 좌측의 세로 바에서 "Run" 아이콘을 누르거나 단축키로 Ctrl+F5 키를 누르면 사이트에 반영됩니다. <br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='monaco_integration_6.png' src='/SysWebRes/bbs/monaco_integration_6.png' /><br /> <br /> FTP 접속도 필요 없고, 곧바로 웹에서 사이트를 수정하고 반영할 수 있기 때문에 Monaco의 도움으로 인해 확실히 개발/배포가 편리해졌다는 것을 알 수 있습니다.<br /> <br /> <hr style='width: 50%' /><br /> <br /> 모나코의 기능은 파일 편집만 가능한 것은 아닙니다. 자체적인 GIT 저장소를 제공해 주는데, 혹시나 git에 대해 낯선 분들은 우선 다음의 글을 먼저 읽어보시는 것을 권장합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Visual Studio를 위한 Git 환경 설정 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1501'>http://www.sysnet.pe.kr/2/0/1501</a> Visual Studio - git을 이용한 로컬 소스 컨트롤 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1502'>http://www.sysnet.pe.kr/2/0/1502</a> Visual Studio - github 연동 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1503'>http://www.sysnet.pe.kr/2/0/1503</a> </pre> <br /> 지금부터는 git에 대해 알고 있다는 가정하에 진행합니다. <br /> <br /> 모나코에 git을 설정하기 위해 다음과 같이 좌측 세로바의 "GIT" 아이콘을 선택하고 "Initialize git repository" 버튼을 누르면,<br /> <br /> <img alt='monaco_integration_7.png' src='/SysWebRes/bbs/monaco_integration_7.png' /> <br /><br /> 그 즉시 .git 저장소가 생성되고 다음과 같이 commit과 push/pull을 할 수 있습니다. 이 중에서 우선 "Commit all"을 선택해서 로컬 GIT 저장소에 파일을 커밋해 둡니다.<br /> <br /> <img alt='monaco_integration_8.png' src='/SysWebRes/bbs/monaco_integration_8.png' /> <br /><br /> 이 상태에서 push/pull 메뉴를 선택하면 어떻게 될까요? 당연히 원격 GIT 저장소가 지정돼 있지 않으므로 오류가 발생합니다. 게다가 모든 GIT 명령어를 웹 페이지에서 지원하는 것은 아니기 때문에 다음과 같이 콘솔 창을 띄워 명령행으로 제어를 해야 합니다.<br /> <br /> <img alt='monaco_integration_9.png' src='/SysWebRes/bbs/monaco_integration_9.png' /> <br /><br /> 실제로 여기서는 외부 git 저장소로 github를 선택해 볼 텐데요. 이를 위해 미리 github에는 제 계정으로 git 저장소를 만들어 두었습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > stjeong / anyconnect ; <a target='tab' href='https://github.com/stjeong/anyconnect'>https://github.com/stjeong/anyconnect</a> </pre> <br /> 그런데, (<a target='tab' href='http://social.msdn.microsoft.com/Forums/windowsazure/en-US/686cc23c-3df2-42ea-ac14-8090d8b922bd/can-monaco-console-run-sshkeygen-for-creating-ssh-key?forum=azuremon'>아직 Preview버전이기 때문에</a>) 원격 git 저장소를 인증하는 방법이 다양하지 않습니다. 현재 기본인증만 제공하기 때문에 원격 git 저장소가 반드시 그 인증을 지원해야만 합니다. 가령 github의 경우 다음과 같이 Monaco 콘솔에서 실행해 보면 실패하게 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > / (master) $ <span style='color: blue; font-weight: bold'>git remote add origin git@github.com:stjeong/anyconnect.git</span> / (master) $ <span style='color: blue; font-weight: bold'>git push -u origin master</span> Host key verification failed. fatal: The remote end hung up unexpectedly / (master) $ <span style='color: blue; font-weight: bold'>ssh-keygen</span> Command not found. Type help for a list of available commands. / (master) $ <span style='color: blue; font-weight: bold'>help</span> 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 </pre> <br /> 실패 이유는 공개키 인증 방법이 지원되지 않기 때문입니다. 즉, 원격 저장소를 위한 사용자 인증 키 파일을 생성 및 지정할 수 없으므로 아래와 같이 기본 인증을 지원하는 https로 접근을 대신 해야 합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > / (master) $ <span style='color: blue; font-weight: bold'>git remote add github_git https://github.com/stjeong/anyconnect.git</span> / (master) $ <span style='color: blue; font-weight: bold'>git push -u github_git master</span> </pre> <br /> 그럼 다음과 같이 github 계정 정보를 물어보고, 여기에 github 사이트의 로그인 정보를 입력하면 됩니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='monaco_integration_10.png' src='/SysWebRes/bbs/monaco_integration_10.png' /><br /> <br /> 정상적으로 계정 정보를 입력했으면 github 측과 파일 동기화가 진행됩니다. 이런 식으로 외부 GIT 저장소와 연동할 수 있기 때문에 팀 내의 다른 개발자는 그러한 저장소를 경유해서 Azure 웹 사이트 개발을 협업하는 것이 가능합니다. <br /> <br /> 참고로, 원격 저장소 설정은 다음의 명령어로 지울 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > / (master) $ <span style='color: blue; font-weight: bold'>git remote -v</span> origin git@github.com:stjeong/anyconnect.git (fetch) origin git@github.com:stjeong/anyconnect.git (push) / (master) $ <span style='color: blue; font-weight: bold'>git remote rm origin</span> </pre> <br /> <hr style='width: 50%' /><br /> <br /> 정리해 보면, Monaco는 기존 Azure Web Sites 서비스의 파일을 웹 상에서 직접 변경하고 실행할 수 있게 해줍니다. 또한 기본적으로 소스 컨트롤 시스템으로 GIT을 제공해 준다는 특징이 있습니다.<br /> <br /> 사실, 제 개인적인 생각으로는 Monaco는 .NET 개발자를 겨냥한 지원은 아닌 것 같습니다. 위의 과정대로라면 닷넷 프로젝트를 통째로 웹 사이트와 연동시켜서 서비스한다는 것인데 사실 지금까지의 닷넷 개발은 이런 식이 아니기 때문입니다. 일례로 소스코드를 웹 서버에 올려놓는 것은 익숙하지 않지요. 물론, 이것은 어쩌면 생각의 차이에 있습니다. 모나코 식의 개발이 익숙해지면 서버에 소스코드를 올려놓은 것이 당연할지도 모릅니다. (모나코 콘솔은 msbuild도 지원하기 때문에 소스코드를 그 순간에 빌드해서 적용할 수 있고, 소스코드 파일은 보안상 클라이언트 측으로 다운로드되는 것이 막혀 있다는 점 등을 상기해 볼 필요가 있습니다.)<br /> <br /> 하지만, 닷넷이 아닌 PHP나 node.js는 어떨까요? 인터프리터 식의 개발이라면 모나코는 적절한 선택일 수 있습니다. 서버에서 직접 개발하면서 소스제어까지 되니 금상첨화입니다. 그런 면에서 봤을 때 모나코는 닷넷 개발자에 대한 손짓이라기보다는, PHP나 Python, node.js 개발자들에 대한 구애라고 봐야할 것 같습니다. ^^<br /> <br /> 마지막으로, 모나코에 대한 포럼을 소개합니다. 마이크로소프트 직원들과 직접 대화가 이뤄지고 있기 때문에 좀 더 확실한 답변을 받을 수 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Windows Azure - CTPs, Betas & Labs forums > Visual Studio Online "Monaco" ; <a target='tab' href='http://social.msdn.microsoft.com/Forums/windowsazure/en-US/home?forum=azuremon'>http://social.msdn.microsoft.com/Forums/windowsazure/en-US/home?forum=azuremon</a> </pre> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
9295
(왼쪽의 숫자를 입력해야 합니다.)