CI/CD 를 구축하다보면 클라이언트 언어로만 구축된 사이트를 젠킨스를 통하여 azure에 올리고싶을때 할 수 있는 방법에 대해서 기록하고자 한다.! 현재 우리 회사의 관리자는 클라이언트언어로만 구성되어 최종 파일은 dist 파일로 정적으로 생성된다. 이파일을 vm 에서 돌리게 되면 비용또한 많이 나오게 때문에.. 애저에 스토리지 어카운트를 생성하여 올려보겠다!.
애저에 접속하여 스토리지 어카운트 저장소 계정만들기
1. 스토리지 어카운트 생성
- 스토리지 계정 이름: 서브도메인명으로 사용되므로 간단히 작성 (예, hitablewww, hitablemobile 등)
- 지역 : 한국 중부 선택
- 중복: LRS 선택
2. Storage account 에 정적 웹 사이트 사용 설정
1) 방금 생성한 Store account 로 이동
2) 좌측 메뉴에서 ‘정적 웹 사이트’ 클릭
- 정적 웹 사이트 ‘사용’으로 변경
- 인덱스 문서 이름: index.html
- 오류 문서 경로: index.html
3. 프론트 엔드 빌드 파일 업로드
1) Azure Portal 이용
- 좌측 메뉴에서 ‘컨테이너’ 클릭
- 컨테이너 리스트 중에서 ‘$web’ 선택
- 업로드’ 버튼을 클릭하여 파일 업로드
2) Azure 커맨드 이용
$ az storage blob upload-batch -s [업로드할 폴더] -d \$web --account-name [스토리지 계정명]
예) az storage blob upload-batch -s ./dist/ -d \$web --account-name storemanweb
4. 동작 확인
- Storage account 의 좌측 메뉴에서 ‘정적 웹 사이트’ 클릭
- 기본 엔드포인트 url 복사
- 브라우저에 url 입력하여 동작 확인
정적 웹사이트 CDN 연결
1. CDN 생성
- Storage account 좌측 메뉴에서 ‘Azure CDN’ 클릭
- CDN 프로필에서 ‘새로 만들기’ 선택
- 가격 책정 계층: 표준 Microsoft
- CDN 엔드포인트: 서브도메인명 입력 (관리 편의성을 위해 storage account 명과 동일하게 입력)
- 원본 호스트 이름: (정적 웹 사이트 선택) – 중요!!
2. 사용자 지정 도메인 연결
1) DNS 관리 웹사이트에서 사용할 도메인을 CDN 주소로 매핑 (CNAME 이용)
주의) 사용할 서브 도메일과 검증용 서브 도메인 등록 필요
- 예) 서브도메인을 mobile 로 등록할 경우
cdnverify.mobile.hi-table.com => cdnverify.hitablemobile.azureedge.net
mobile.hi-table.com => hitablemobile.azureedge.net
3. SSL 인증서 등록
1) 생성된 CDN 엔드포인트 선택
- 호스트 이름 아래에 있는 CDN url 클릭
2) 사용자 지정 도메인 선택
- 호스트 이름 아래에 있는 사용자 지정 url 클릭
3) HTTPS 사용 설정
- 사용자 지정 도메인 HTTPS: 설정
- 인증서 관리 유형: CDN 관리됨
- 최소 TLS 버전: TLS 1.2
※ 약 1시간 정도 소요됨.
4. HTTP to HTTPS redirect
- 좌측 메뉴에서 ‘규칙 엔진’ 클릭
- 조건 추가
- 프로토콜 요청
- 연산자: 같음
- 값: HTTP
- 오른쪽 … 버튼을 클릭하여 작업 추가 > URL 리디렉션 선택
- 형식: 찾음(302)
- 프로토콜: HTTPS
젠킨스 배포 방법이랑 셋팅 하고 싶은경우 아래링크 클릭