Azure로 만드는 간단한 Blog Site - ( 2편 )

- Prologue

안녕하세요. IntelliJ + Spring MVC 글을 썼었던 김대희입니다.

이번에는 Cloud Service , Web Hosting을 이용해 본 저의 경험 및 공부했던 이론에 대해 설명드리고, 그 이후  Azure를 이용한 저의 Portfoilo Site 구축 과정 및 소스에 대해 설명을 드리는 글입니다. 설명할 블로그는 친구와 함께 대학교 4학년때 만들었던 것인데, 현재는 저 혼자 이 사이트를 관리하고 있습니다. 해당 사이트의 구조는 Azure + .Net + XML을 바탕으로 만들어진 블로그이며, 현재도 계속 관리하고 있습니다. Azure를 쓰지 않았던 분들도 한번 이런식으로 나만의 포트폴리오 사이트를 만들어 보시는 것도 좋을 것 같아 적는 연재글입니다.

- 목차

- 2편에 들어가기 전

이번에는 Azure 무료 구독 및 종량제 구독 부분 만드는 법에 대해 설명 드리며, 저희는 종량제 구독 및 무료 요금제를 사용할 것이며, Web Service Plan까지 만드는 과정을 이번에 적어보려고 합니다.

- 2편을 위해 필요한 것

  • Visual Studio ( ASP.NET  & Azure 서비스에 연관된 파일 설치 필요 )

- 참고자료에 대한 사전 설명

2편이 끝나시고 MVC 부분에 대해 3편이 올라오기 전 여러분들이 참고하셔서 수정하시면 좋을 사이트 입니다.

2-1단계 : Microsoft 가입

Azure Blog 1편

Azure는 Microsoft 사의 Cloud Service입니다. 해당 Service를 이용하기 위해서는 MS사의 아이디가 꼭 필요하기 때문에 가입해 주어야 합니다.

( 가입 부분은 생략하겠습니다.. )

2-2단계 : Microsoft Azure Portal 접속

Azure Blog 1편 - 2

MS 사의 아이디를 만들게 되면 Azure Portal에 접속을 해주시면 됩니다.  Azure Portal에 접속을 하게 되면 로그인을 해주시고, 로그인 이후에는 내 계정을 클릭해 주시면 됩니다.

Azure Blog 1편 - 3

Go to the Portal을 통해 Portal을 확인 할 수 있긴 하지만, 우리는 이러한 Portal을 둘러보기 전에 우선 구독을 만들어 두어야 해당 서비스를 이용할 수 있습니다.

( 바로 무료 종량제를 이용하실 분은 3단계 -> 2-4단계의 정보를 요구하므로 그걸 보시고 넘어가시면 됩니다. )

2-3단계 : 무료구독 만들기

-> 여기서부터 무료 구독을 이용하실 분만 만드시면 됩니다.

Azure Blog 1편 - 5

해당 무료체험 시작하기를 하면 12개월동안 23만원을 주는 무료 구독을 만들 수 있습니다. 이를 이용하실 분은 무료체험 시작하기 버튼을 눌러주시면 됩니다.

2-4 단계 : 무료 구독 / 종량제 정보 입력 ( 청구, 개인정보 등 )

Azure Blog 1편 - 5

Azure 구독을 처음 만드시게 되면, 자신의 개인정보 및 요금 청구 정보를 입력해야 합니다. 처음 구독을 만들때에 반드시 입력을 해야 하므로 정확하게 입력해 주심이 좋습니다.

그렇게 입력을 하시게 되면 ,

3단계 : 종량제 구독 만들기

-> 저의 경우에는 무료 구독 만든 후 종량제를 추가하였기 때문에,

종량제를 만드시는 분들은 2-3단계 생략하셔도 좋습니다.

Azure Blog 1편 - 8

3-1단계 : Azure 계정 센터에서 구독 추가하기

Azure 계정 센터에서 구독을 추가하여야 하기 때문에, 여러분들은 Azure 계정 센터로 이동을 해주셔야 합니다.

Azure Blog 1편 - 9

Azure 계정 센터에서 구독을 클릭해주시면 본인의 구독이 나와있습니다. ( 저같은 경우 종량제와 무료 평가판을 모두 추가한 상태입니다. )  우리는 종량제를 추가시켜 주어야 되기때문에 구독 -> 구독 추가를 클릭해 주어야 합니다.

Azure Blog 1편 -11

구독 추가를 하게 되시면 종량제, 개발자 지원 등이 있는데 우리는 종량제를 이용할 예정이기 때문에, 종량제를 클릭하고 다음 단계로 넘어가 주시면 됩니다.

Azure Blog 1편 - 12

Azure 종량제 다음 버튼으로 넘어갈시, 개인정보 및 요금 정보를 입력하라는 정보가 나오며 기술지원 추가까지 추가될 것입니다. ( 저의 창은 무료 구독을 등록한 상태에서 종량제를 추가한 것이기 떄문에 결제 정보 및 기존의 정보를 묻지 않는 것입니다. ) / 여기서 기술 지원 추가를 받으실 분들은 여러 옵션을 보고 선택하시고, 우리는 기술 지원이 없거나 이미 지원을 받고 있다를 클릭하시고 다음 / 계약 완료를 클릭해 줍니다. 이를 완료하게 되면 구독이 생성 됩니다.

번외 ) 원치 않는 구독을 등록했을 경우

Azure Blog 1편 - 9

원치 않는 구독이 추가가 되는 경우에는 해당 구독을 클릭하게 되면 결제 방법, 결제 취소등을 정할 수 있는 화면이 나오게 됩니다.

Azure Blog 1편 -13

해당 창에는 결제 방법 관리, 사용량 세부 정보 다운로드, 가입 취소 등이 있는데 가입 취소를 클릭하시면 해당 구독은 취소가 되게 됩니다.

( 1단계 부터 무료 구독 및 종량제를 다 만드신 경우, 종량제만 남길 경우 이 단계를 통해 무료 구독을 취소하셔도 됩니다. )

이러한 과정을 모두 마무리 짓게 되면, 여러분은 서비스를 만들 준비가 끝난 것입니다.

4단계 : Web Service Plan 생성

Azure Blog 1편 -14

구독을 만드시면 다시 Azure Portal로 이동해 주시고, 포털을 클릭해 주시면 해당 포털로 이동하게 됩니다.

( 포털로 바로 이동이 안되시면 내 계정 -> Go To Portal로 이동해 주시면 됩니다. )

Azure Blog 1편 - 15

Portal로 이동하게 되면 이처럼 아무것도 없는 것을 확인 할 수 있습니다. 우리는 Web Service Plan을 만들기 위해

  • 리소스 만들기 -> Web Service 검색
  • 모든 서비스를 눌러 이동

두가지 방법으로 이동할 수 있는데, 리소스 검색이 느릴 경우 우리는 모든 서비스를 눌러 이동해 주시면 됩니다.

Azure Blog 1편 -13

구독을 만들게 되면, 다시  Azure Portal로 이동하여 App Service 계획을 클릭해줍니다.

4-1 단계 : Web Service Plan 계획 및 요금제 설정

Azure Blog 1편 - 16

해당 App Service 계획에서 저희는 App Service 계획의 이름과, 구독은 종량제, 위치는 South Korea 및 리소스 그룹 새로 만들기를 해줍니다. 우리는 무료 종량제를 사용할 것이기 때문에 가격 책정 계층으로 이동해 주어야 합니다.

Azure Blog 1편 - 17

우리는 무료 종량제를 사용할 예정이기 때문에, 개발 / 테스트에 F1 요금제를 클릭하여 줍니다.

Azure Blog 1편 - 18

해당 작업이 마무리 되면 우리는 App Service 계획이 생성이 완료됩니다. 이제 우리는 App Service를 만들고 예시 페이지를 만들 예정입니다.

4-2 단계 : Web Service 생성

이제 우리는 Web Service를 만들어야 하기 때문에 App Service로 이동을 해줍니다.

Azure Blog 1편 - 20

Web Service로 이동을 하게 되면 App Service 만들기라는 버튼이 있는데 우리는 이를 클릭해서 새로운 웹앱을 만들어 줄 것입니다.

Azure Blog 1편 - 21

Web Service 새로 만들기 클릭 시에 우리는 웹앱을 누르고 만들기 버튼을 클릭하면 새로운 웹앱을 만들 수 있습니다.

Azure Blog 1편 - 19

우리가 만들 사이트 주소 ( ex) popit.azurewebsites.net ) 가 앱이름 + azurewebsites.net이기 때문에 앱 이름을 지정해주고, 기존 구독은 종량제, 리소스 그룹은 Web Service Plan에서 만들어준 기존 리소스 그룹을 사용해 주시면 되고 만들기를 누르시면, 해당 Web App 까지도 만드는 것이 완료가 됩니다.

Azure Blog 1편 - 22

이와 같은 과정이 모두 끝나면 Web App / Web Service Plan 까지 새로운 사이트를 배포할 준비가 끝이 납니다.

5 단계 : Visual Studio를 이용한 ASP.NET MVC 프로젝트 생성

Azure Blog 1편 - 23

이제 그 App Service에 올려놓을 프로젝트를 만들어야 합니다. 우리는 Visual Studio를 켜주고 파일 -> 새로 만들기 -> 프로젝트로 이동해 줍니다.

Azure Blog 1편 - 24

프로젝트를 클릭하게 되면 Visual C# -> ASP.NET 웹 응용 프로그램으로 이동을 해주면 됩니다.

( 만약에 이게 안뜰 경우, VS installer로 이동하셔서 C#, Azure쪽 관계된 플러그인들을 설치해 주시면 됩니다. )

Azure Blog 1편 - 25

Web 응용 프로그램 이동 후 ASP.NET 템플릿 중 우리는 MVC를 사용할 예정이므로 MVC 클릭 후 확인을 눌러 주시면 됩니다.

Azure Blog 1편 - 26

해당 MVC Project가 제대로 보인다면, 여러분들은 배포를 제외한 모든 부분을 완료한 셈입니다.

6단계 : 기본 MVC Project를 Azure에 배포 , 게시하기

Azure Blog 1편 - 27

프로젝트 생성이 완료가 되면, 여러분들은 빌드 -> 게시 버튼을 눌러서 이동해주시게 되면, 게시할 수 있는 화면으로 넘어가게 됩니다.

Azure Blog 1편 - 28

게시 -> 시작 버튼을 누른 후 우리는 기존 항목 선택 ( 왜냐면 Web Service나 Web Service Plan 모두 만들어 두었기 때문입니다. ) 클릭 후 게시로 이동을 해줍니다.

Azure Blog 1편 - 29

게시 버튼을 누르게 되면 우리는 미리 만들어준 Web APP을 클릭해 주고 ( 구독은 종량제를 눌러주어야 해당 리소스들이 보입니다.) 확인을 누르게 되면, 처음에는 자동으로 게시가 됩니다.

( 이후 업로드 할때에는 게시 버튼만 누르게 되면 업로드가 됩니다. )

7단계 : 완료 화면 확인

Azure Blog 1편 - 30

게시를 하게 되면 , 본인이 업로드한 MVC 예시 프로젝트가 앱이름 + azurewebsites.net으로 업로드가 된다면 성공하신 것입니다.

2편을 마치고서의  환경

  • Azure 종량제 구독 완료
  • Azure Web Service Plan 생성
  • Azure Web Service ( App Service ) 생성 완료
  • ASP.NET MVC 프로젝트 배포 완료
  • ASP.NET MVC - Azure 연동 완료 및 게시 완료

3편에서 다룰 것

  • 블로그를 만들때 사용했던 소스들에 대한 설명 및 심화 부분

2편을 마무리하며

이번 편은 구독 및 서비스 게시까지 다루는 편이라 천천히 보시고, 이해하기 어렵다면 질문 꼭 부탁드립니다. 우선 2편을 마무리 하셨다면, 소스 및 HTML 리소스만 바꿀 수 있어도 여러분들이 원하시는 대로 변경 또한 가능합니다. 이 편을 통해 그 단계까지 할 수 있는 부분이라 내용을 일부러 길게 하였습니다. 감사합니다.

-  참고 소스 및 완료 사이트 참고

-   Popit Azure 예시 완성 사이트 ( 2편까지 완료한 경우 입니다. )

-   저의 포트폴리오 사이트 ( 최종 편까지 완료한 경우, 여러분들이 다룰 수 있는 사이트 입니다. )

-   개인적인 질문은 anyozcall@gmail.com 로 Email 또는 페이스북으로 연락 부탁드립니다.


Popit은 페이스북 댓글만 사용하고 있습니다. 페이스북 로그인 후 글을 보시면 댓글이 나타납니다.