Offcanvas

How To / 개발자 / 애플리케이션 / 클라우드

애저와 기트허브의 결합 ··· ‘애저 정적 웹앱’ 첫걸음  

2020.07.13 Simon Bisson  |  InfoWorld
마이크로소프트의 새 서비스가 애저(Azure)와 기트허브(GitHub)를 결합해 정적 웹 콘텐츠를 제공한다. 

최근 가장 흥미로운 웹 개발 개념을 하나 꼽으라면 바로 ‘잼스택(Javascript, API, Markup Stack; Jamstack)’이라고 할 수 있다. 이는 웹 애플리케이션 플랫폼 넷틀리파이(Netlify)에 의해 널리 알려졌다.
 
ⓒGetty Images

구체적으로 살펴보자면 잼스틱은 자바스크립트, API, 마크업 스택을 사용하는 웹 애플리케이션 모델이다. 서버에서 생성된 동적 콘텐츠로는 전달되지 않는 정적 웹사이트를 전달할 수 있다. 즉 외부에서 구축돼 애저나 클라우드플레어(Cloudflare) 등의 콘텐츠 전송 네트워크(CDN)로 제공되는 효과적인 앱 전달 방식이라고 할 수 있다. 

차세대 정적 웹 콘텐츠 
잼스택을 사용하면 앱 서버나 노드.js 등에 의존할 필요가 없다. 표준 마크업 언어로 구성됐기 때문에 콘텐츠와 코드를 업데이트할 때 어디서나 구축하고 테스트한 후 서버로 푸시할 수 있다. 또 이 모델은 데브옵스(Devops) 기반 구축 프로세스와 잘 작동하며 기트허브와 같은 CI/CD 플랫폼과도 잘 호환된다. 

잼스택은 흥미롭다. 페이지 코드는 정적이지만 콘텐츠는 그렇지 않다. 동적 콘텐츠는 다른 서비스에 느슨하게 결합된 API 연결과 함께 자바스크립트를 사용해 로컬로 렌더링된다. 예를 들어 정적 사이트가 전자상거래 매장을 호스팅한다고 가정해보자. 이때 RESTful 쿼리로 검색된 카탈로그 콘텐츠를 자바스크립트로 렌더링할 수 있다. API 호출을 제외하고 사이트와 백엔드 사이의 직접적인 연결이 없고 페이지 내의 코드가 오류를 감지해 사용자에게 알린다. 

이렇게 잘 정의된 값의 API로 웹과 애플리케이션을 분리한다면 애플리케이션 및 웹 개발이 병렬로 진행될 수 있어 개발은 간소화되고 전달 속도는 빨라진다. 즉 느슨하게 결합된 모델은 클라우드 네이티브 애플리케이션에 프론트엔드를 추가할 때 매우 합리적이다. 

프론트엔드와 백엔드는 모두 독립적으로 확장될 수 있고 저지연 광역 콘텐츠 전송을 통해 사용자 근처의 마크업을 캐시할 수 있다. 또 CDN 플랫폼의 캐시 툴을 활용해 여러 서버를 가동할 필요 없이 사용자에게 웹 애플리케이션을 전달할 수 있다. 

애저와 같은 서비스를 사용하고 있다면 이 모델은 상당한 비용 절감 효과를 제공할 뿐만 아니라 호스팅된 가상머신의 요청 및 생성과 응답 간의 지연 시간을 줄인다. 

‘애저 정적 웹앱’ 입문하기 
마이크로소프트가 빌드 2020(Build 2020)에서 잼스택 스타일의 애플리케이션을 지원하는 자체 플랫폼을 공개했다. 바로 ‘애저 정적 웹앱(Azure Static Web Apps)’이다. 

현재 프리뷰 단계인 이 플랫폼은 기트허브, 애저 앱 서비스(Azure App Service), 애저 펑션(Azure Functions)을 하나의 워크플로우로 통합하고 비주얼 스튜디오 코드(Visual Studio Code) 플러그인으로 개발 및 배포를 진행한다.

애저 정적 웹앱 워크플로우의 핵심은 ‘기트허브 액션(Github Action)’이다. 이는 애플리케이션 저장소를 애저에 연결할 때 자동으로 생성되는 배포 작업을 일컫는다. 특정 브랜치를 모니터링하고 해당 브랜치에 커밋이 배정되면 자동으로 빌드를 실행하고 앱을 애저에 배포하는 것이다. 풀 리퀘스트로 병합할 때에도 동일한 과정이 실행된다.

이를 사용하려면 기트허브와 애저 계정이 모두 필요하다. 계정을 만들었다면 사이트 저장소를 생성해야 한다. 기트허브는 일반적인 정적 웹 애플리케이션 프레임워크를 위한 유용한 템플릿들을 제공한다. 이를테면 앵귤러(Angular), 리액트(React), 뷰(Vue) 등이다. 

이들 템플릿으로 앱을 구축하는 데 사용할 스캐폴딩(scaffolding)을 설정한다. 저장소가 로컬 개발 장치에 복제될 수 있기 때문에 개발자는 평소 사용하는 툴에 액세스할 수 있다. 

첫 ‘정적 웹앱’ 구축하기 
일단 앱을 위한 저장소가 갖춰졌다면 이제 애저 포털(Azure Portal)로 가서 새로운 정적 웹앱을 생성할 차례다. 기존 구독에 추가하거나 무료 평가판을 이용해 새 리소스 그룹을 만들거나 기존 리소스 그룹과 함께 작동시킬 수 있다. 

앱에 명칭을 부여하고 리전을 선택한다. 그다음 애저에서 기트허브 계정으로 로그인해 저장소를 연결하고, 사용할 저장소와 브랜치를 선택한다. 이제 정적 웹앱을 생성하기 위한 준비가 끝난 셈이다. 애저 포털에서 구축 설정 등을 포함한 앱 설정을 구성하면 된다.  

모든 준비가 끝났다면 설정을 검토하고 앱을 생성한다. 설정은 설치 프로세스 중에 생성된 워크플로우 파일을 편집해 변경할 수 있다. 초기 설치는 매우 빠르게 이뤄질 것이고 사이트 URL의 세부 사항은 리소스 디테일에 포함된다. 

애저와 기트허브에서 앱 구성을 완료하면 애저 포털이 알림 링크를 보낼 것이다. 이 링크를 통해 기트허브 저장소와 앱 설정 시 설치한 워크플로우로 돌아간다. 코드가 완료돼 배포할 수 있는 상태라면 워크플로우를 실행해 사이트를 구축 및 배포한다.

프리뷰 버전은 정적 콘텐츠의 무료 호스팅을 지원한다. 따라서 HTML, 자바스크립트, 이미지를 저장하는 데 비용이 들지 않는다. 또한 애저 CDN에 통합돼 있기 때문에 콘텐츠가 사용자 위치에 자동으로 배포된다.

애저의 네트워킹 툴을 사용한다면 콘텐츠 전송 장소 및 액세스 방식부터 사이트의 라이브 테스트 버전 단계도 관리할 수 있다. 이때 보안 연결을 위한 SSL 지원이 제공된다. 이밖에 프리뷰 버전은 사용자 정의 도메인 이름을 지원하진 않는다. 이는 정식 출시 이후 지원될 예정이다. 

애저 펑션으로 API 지원 추가하기 
마이크로소프트는 비주얼 스튜디오 코드용 애저 정적 웹앱 익스텐션의 프리뷰를 공개했다. 단 아직은 프리뷰 인사이더 릴리즈 내에서만 작동한다. 이는 나머지 비주얼 스튜디오 코드 애저 툴과 통합돼 있기 때문에 한 번만 로그인하면 사용할 수 있다. 이 툴은 애저 펑션과 사이트를 통합하는 경우라면 더욱더 유용할 것이다. 이를 통해 애플리케이션과 서비스를 위한 API를 호스팅할 수도 있다. 

정적 웹앱 모델은 서버리스 비동기 기반 이벤트 중심 API와도 잘 맞는다. Async/await 같은 자바스크립트 기능이 API 쿼리를 지원하기 때문이다. 쿼리는 API HTTP 엔드포인트에서 수신되며 이는 펑션을 생성하고 실행하여 애플리케이션으로 반응을 전달한다. 

또한 사용자는 애저 정적 웹앱과 애저 펑션에 그치지 않고 브라우저에서 어떤 RESTful API든지 호출할 수 있을 뿐만 아니라 코드에서 생성된 JSON 데이터를 분석할 수 있다.  

이 모델은 또 다른 측면에서 마이크로소프트 개발자의 이목을 끈다. 애저 정적 웹앱이 ‘프로그레시브 웹앱(Progressive Web apps)’과 ‘웹 어셈블리 앱(WebAssembly apps)’을 배포하는 탁월한 방법이라는 것이다. 두 가지 모두 정적 콘텐츠를 전달하며 사용자 컴퓨터에서 실행된다. CDN을 사용하면 대규모 인프라에 투자할 필요 없이 앱의 사용 범위를 크게 확대할 수 있다. 

앞으로 비주얼 스튜디오의 PWA 툴링이 기트허브와 애저 정적 웹앱을 모두 사용할 수 있는 적절한 워크플로우를 자동 구성할 것으로 예상된다. 그리고 그렇게 된다면 편집부터 배포까지 전 과정이 클릭 몇 번만으로 이뤄질 것이다. ciokr@idg.co.kr
CIO Korea 뉴스레터 및 IT 트랜드 보고서 무료 구독하기
추천 테크라이브러리

회사명:한국IDG 제호: CIO Korea 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아01641 등록발행일자 : 2011년 05월 27일

발행인 : 박형미 편집인 : 천신응 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.