[Azure] 정적 웹 호스팅 비용 절감을 위한 전략 및 자동 배포 과정 오류 처리

 

 

 

문제상황

 

웹호스팅 연장 관련 연락이와 현재 호스팅 상황을 확인하였다.

웹 페이지를 호스팅 사이트를 이용해 호스팅 중이었는데,

이 비용이 연 20만원 상당이 지불되고 있었다

연장 시 나왔던 최종 결제 금액

 

 

 

의문 제기

 

 

아무리 생각해도 그저 정보 웹페이지 띄우는데 비용이 너무 들어

Azure Blob Container에 띄우는게 더 싸지 않을까? 라는 생각을 먼저했다.

Blob Container 에서도 정적웹 기능을 제공하기에 적합할 것이라는 생각을 했기 때문이다.

 

 

 

자료 조사

 

그런데 Azure에서는 Azure Blob에서 Static Web Application 기능을 제공하고 있었고,

현재의 정보 페이지 정도의 사양에서는 무료로 이용이 가능함을 확인했다.

https://azure.microsoft.com/ko-kr/pricing/details/app-service/static/

 

 

 

 

또한 무료 플랜을 상업적 이용이 가능한지도 추가 확인하였다.

아래 링크로도 확인 가능하지만 정확한 답변을 위해

Azure 상담챗을 활용하니 정확하게 상업적 이용이 가능하다는 답신을 받았다.

https://learn.microsoft.com/en-us/answers/questions/801293/can-azure-services-in-the-free-tier-be-used-for-pr

 

 

 

---

 

 

최종 결정

1) 왜 Azure 인가?

넉넉한 Azure Credit 지원이 있다.

 

2) Azure Blob Storage를 선택하지 않은 이유?

커스텀 도메인을 사용하기에 복잡성이 존재

또한 Blob Storage는 비용이 발생하지만, Static Web Apps 기능은 무료 이용 가능

Blob Storage) 적용하는데 정말 짧고 쉽게 할 수 있긴하다.

 

 

3) Azure Static Web Apps만의 편의성?

일정 사양까지 무료 이용 가능 참조

커스텀 도메인 기능 직관적으로 제공

보안 인증기능 지원

자동 배포 과정 지원

 

 

 

---

 

 

생성과정

 

 

1. Static Web Apps 검색

콘솔에서 Static Web Apps를 검색해 서비스에 접속한다.

 

 

 

 

 

2. 기본 프로젝트 세부 정보 입력

구독 정보와 리소스 이름들을 지정해주었다.

이 때, 호스팅 계획 유형을 무료로 지정하는 것을 잊지말자

 

 

3. 배포 방안 선택

나는 GitHub 레포를 배포할 예정이다.

계정 연결을 통해 내 계정에 연결하였다.

 

 

 

 

 

---

 

(Optional)

 조직에서 개인 레포만 보이는데, 저는 특정 Oganization 레포를 쓸겁니다.

=> Azure가 GitHub 계정의 Organization 접근 권한을 못 받고 있다는 의미입니다.

 

 

 

3.1) GitHub - Settings-Applications 접근

GitHub -> Settings	Settings -> Applications

 

 

 

3.2) 접근 허가하고자 하는 조직 추가

 

 

3.3) Static Web Apps 페이지 새로고침 후 만들기 진행

=> 새로고침 하지 않으면 추가된 조직이 뜨지 않습니다... 다시 작성하시면 됩니다.

 

 

 

---

 

 

4. 배포 방안 선택

나는 React를 사용하고 homepage라는 폴더에 들어가야 실제 페이지 코드가 나온다.

그렇기에 앱 위치는 ./homepage로 설정되었다.

 

 

 

 

이제 다음 배포 구성으로 넘어가자

 

 

 

5. 배포 구성

GitHub 옵션	배포 토큰 옵션
- GitHub Actions 자동 배포 파이프라인을 Azure가 자동 생성  - PR 열리면 Preview 배포도 가능  - Azure가 직접 GitHub 저장소 접근해서 배포함	- GitHub Action을 사용하지 않고 다른 CI 이용 시 이용됨 - Azure에서 토큰 하나를 발급받아서, 사용자가 직접 배포 요청을 CLI나 외부 CI에서 수동으로 함

 

 

 

 

 

6. 스테이징 영역 지정

 

 

 

7. 태그 지정

예제로 몇 개 적어보았다.

 

 

 

 

 

 

이제 실제로 배포가 되게 된다.

 

 

 

---

 

 

아래 처럼 배포 결과도 확인이 가능하다.

나는 Build 시 Oryx 사용으로 인해 에러가 나, 수동 빌드 방식으로 전환하였다.

 

Azure에서는 기본적으로 빌드 시 Oryx를 이용한다.

이 때 Lint에서 Warnning만 있어도 에러가 발생하기에 매우 예민하다.

본래라면 코드를 수정해서 Lint를 맞춰주면 좋지만...

전임자 코드의 막대한 문제로 그러지는 못하였다.

커밋 메시지 오타난거 속상해다... 이후 amend 했다.

 

 

 

 

---

 

 

정리

생각보다 글이 길어졌다.

그래도 비용 절감 시키겠다고 전달 드리면서 조금 뿌듯했다.

다음 글에서는 커스텀 도메인 적용을 진행해볼 예정이다.