Azure 웹앱 시작하기

들어가는 말

이상한모임에서 얘기를 하던 중 Azure 앱 서비스 중 하나인 웹앱이 사용하기 편한데 기본 내용이 부족하단 말을 들었다.

치요아버님say

동감한다. 웹앱을 사용하기까지 기본 튜토리얼을 얼마나 많이 봤는지 모르겠다.

어색한 단어 선정으로 이해를 어려운데 개선할 수 도 없다.

영문 튜토리얼처럼 github로 고칠 수 있게 해달라!!

이런 상황에 누군가 웹앱의 문턱에서 엄한 삽질을 피하길 기대하며 시작해보겠다!

웹앱을 시작할 때 크게 2가지만 알면 된다. 첫째는 웹앱을 생성하는 것이고 둘째는 자신의 코드를 배포하는 하는 것이다.

이번에는 이 두가지를 집중하여 익혀보자.

웹앱을 생성하는 것은 Azure 포털을 통한 방법과 Azure CLI를 통한 방법이 있으나 여기서는 쉽게 이해할 수 있는 Azure 포털을 이용하겠다.

이미지를 보고 따라하기 힘들다면 아래 비디오를 참고하면 된다.

위 과정이 끝나면 웹앱을 확인할 수 있다.

웹앱확인

웹앱이 편리한 것은 생성만으로 접근가능한 URL이 생성되고 ftp를 통해 소스코드를 배포하고 로그를 확인할 수 있도록 설정된다는 점이다.

웹앱이 생성되었으면 이제 소스코드를 배포하여 자신이 원하는 형태로 가공해야한다.

웹앱에 소스코드를 배포하는 것은 ftp를 이용하거나 github의 특정 브랜치와 연결하여 연속 배포가 가능하게도 할 수 있다.

또한 각 웹앱마다 로컬 Git 레포지토리를 생성하고 git을 통해 commit하고 push하여 배포할 수 있다.

이번에는 git을 활용할 수 있는 로컬 Git 레포지토리를 설정하여 배포하는 방법을 설명할 것이다.

말이 조금 이상하게 들리지만 배포 원본은 영문 사이트에서 Deploment Source라는 메뉴이다.

배포 시 소스를 어떤 방식으로 관리할지 결정한다고 보면 된다.

설정이 끝나면 아래처럼 웹앱 메인 화면에서 Git 복제 URL을 확인할 수 있다.

Git복제URL확인

Azure 웹앱을 생성했고 배포하는 방식도 결정했다. 이제 Git을 통한 배포를 확인해보자.

먼저 커맨드 라인 인터페이스(Command Line Interface)로 하는 방법이다.

CLI가 익숙치않다면 다음 단계로 건너뛴다. 테스트 어플리케이션 배포하기(feat. SourceTree))

CLI 창(OSX의 터미널이나 Windows 10의 bash)을 켜고 아래 명령을 순서대로 입력한다.
Azure 포털에서 웹앱을 선택하고 Git 복제 URL를 클릭하여 복사한다.
아래 명령을 CLI에 입력한다. 단, [웹앱 git 주소]라고 써진 부분은 반드시 자신의 주소로 치환해야한다.

AzureWebAppsTutorial-0.0.1 폴더 안에서 입력해야한다.

위 코드는 git 으로 AzureWebAppsTutorial-0.0.1폴더를 관리할 수 있도록 한 뒤 azure란 이름으로 remote를 등록한 것이다.

그리고 commit을 한 뒤 azure 리모트로 push하여 코드를 반영 시킨 것이다.

실제로 push하면 아래와 같은 로그가 출력된다.

CLI로 위 과정을 마쳤다면 다음 단계는 건너뛴다.

CLI가 익숙치않다면 웹 브라우저와 SourceTree나 Tower등의 프로그램을 활용해서 처리하는 방법도 있다.

여기서는 OSX에서 구동되는 SourceTree로 설명한다(Windows에서는 메뉴 위치등이 다를 수 있다).

SourceTree를 설치한다.
아래 링크를 클릭하여 소스코드를 다운받는다.

AzureWebAppsTutorial-0.0.1 링크
압축을 해제한다.
SourceTree를 실행하여 New Repository클릭한 뒤 Add exist local repository 메뉴를 선택하낟.

Windows에서는 File - Clone / New 선택 후 나오는 창에서 Add Working Copy탭으로 이동한다.
Destination Path에 압축해제한 어플리케이션 폴더를 선택한 후 Create를 클릭한다.

Windows에서는 Working Copy Path가 같은 역할을 한다.
추가된 레포지토리를 선택한다.
Settings를 클릭한다.
Azure 포털에서 웹앱을 선택하고 Git 복제 URL를 클릭하여 복사한다.
SourceTree로 돌아와 Remote Name을 azure로 입력하고 URL에 복사한 주소를 붙여넣고 OK를 클릭한다.
File Status탭에서 Staged files를 클릭한 뒤 commit 메시지를 init으로 입력하고 Push changes immdiatly to azure/master옵션을 켜고 Commit한다.
Push 메시지에 아래와 같은 로그가 출력되는 것을 확인할 수 있다.