체크포인트
Create a Cloud Source Repository
/ 30
Launch the site at TCP port 8080
/ 30
Configure the cloud build and initiate it
/ 40
Cloud Build 및 Firebase 파이프라인을 사용하여 Hugo 웹사이트 배포
GSP747
개요
이 실습에서는 정적 웹사이트 빌더인 Hugo를 기반으로 웹사이트를 배포하기 위한 파이프라인을 생성합니다. Cloud Source Repositories에 웹사이트 콘텐츠를 보관하고 Firebase로 웹사이트를 배포한 다음 Cloud Build를 사용하여 저장소에 커밋된 새 콘텐츠를 자동으로 배포하는 파이프라인을 생성할 수 있습니다.
목표
이 실습에서 학습할 내용은 다음과 같습니다.
- 정적 웹사이트에 대한 개요
- Hugo를 사용한 웹사이트 설정
- Cloud Source Repositories에 웹사이트 콘텐츠 보관
- Firebase를 사용한 웹사이트 배포
- Cloud Build로 배포 자동화를 위한 빌드 파이프라인 생성
기본 요건
여기 제공되는 안내에 따라 이 실습을 진행하면 됩니다. 사용할 서비스를 직접 경험해 보는 것도 도움이 될 수 있습니다. 도움이 될 만한 다른 실습은 다음과 같습니다.
정적 웹사이트의 이점
Hugo와 같은 정적 사이트 빌더는 웹 서버가 필요 없는 웹사이트를 제작할 수 있다는 점 때문에 인기를 얻고 있습니다. 정적 웹 플랫폼의 경우 유지가 필요한 서버 운영체제나 소프트웨어가 없습니다. 하지만 운영에 있어 다양한 고려사항이 존재합니다. 예를 들어 게시물의 버전을 제어하고 콘텐츠 전송 네트워크('CDN')에서 웹사이트를 호스팅하고 SSL 인증서를 프로비저닝해야 할 수 있습니다.
Google Cloud에서 지속적 통합/지속적 배포 파이프라인을 사용하여 이러한 요구사항을 충족할 수 있습니다. 배포 파이프라인은 개발자가 전체 배포 프로세스를 자동화하여 신속한 혁신을 달성할 수 있게 합니다. 이 실습에서는 이러한 자동화를 보여주는 파이프라인 빌드 방법을 배웁니다.
설정 및 요건
실습 시작 버튼을 클릭하기 전에
다음 안내를 확인하세요. 실습에는 시간 제한이 있으며 일시중지할 수 없습니다. 실습 시작을 클릭하면 타이머가 시작됩니다. 이 타이머에는 Google Cloud 리소스를 사용할 수 있는 시간이 얼마나 남았는지 표시됩니다.
실무형 실습을 통해 시뮬레이션이나 데모 환경이 아닌 실제 클라우드 환경에서 직접 실습 활동을 진행할 수 있습니다. 실습 시간 동안 Google Cloud에 로그인하고 액세스하는 데 사용할 수 있는 새로운 임시 사용자 인증 정보가 제공됩니다.
이 실습을 완료하려면 다음을 준비해야 합니다.
- 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)
- 실습을 완료하기에 충분한 시간---실습을 시작하고 나면 일시중지할 수 없습니다.
실습을 시작하고 Google Cloud 콘솔에 로그인하는 방법
-
실습 시작 버튼을 클릭합니다. 실습 비용을 결제해야 하는 경우 결제 수단을 선택할 수 있는 팝업이 열립니다. 왼쪽에는 다음과 같은 항목이 포함된 실습 세부정보 패널이 있습니다.
- Google Cloud 콘솔 열기 버튼
- 남은 시간
- 이 실습에 사용해야 하는 임시 사용자 인증 정보
- 필요한 경우 실습 진행을 위한 기타 정보
-
Google Cloud 콘솔 열기를 클릭합니다(Chrome 브라우저를 실행 중인 경우 마우스 오른쪽 버튼으로 클릭하고 시크릿 창에서 링크 열기를 선택합니다).
실습에서 리소스가 가동되면 다른 탭이 열리고 로그인 페이지가 표시됩니다.
팁: 두 개의 탭을 각각 별도의 창으로 나란히 정렬하세요.
참고: 계정 선택 대화상자가 표시되면 다른 계정 사용을 클릭합니다. -
필요한 경우 아래의 사용자 이름을 복사하여 로그인 대화상자에 붙여넣습니다.
{{{user_0.username | "Username"}}} 실습 세부정보 패널에서도 사용자 이름을 확인할 수 있습니다.
-
다음을 클릭합니다.
-
아래의 비밀번호를 복사하여 시작하기 대화상자에 붙여넣습니다.
{{{user_0.password | "Password"}}} 실습 세부정보 패널에서도 비밀번호를 확인할 수 있습니다.
-
다음을 클릭합니다.
중요: 실습에서 제공하는 사용자 인증 정보를 사용해야 합니다. Google Cloud 계정 사용자 인증 정보를 사용하지 마세요. 참고: 이 실습에 자신의 Google Cloud 계정을 사용하면 추가 요금이 발생할 수 있습니다. -
이후에 표시되는 페이지를 클릭하여 넘깁니다.
- 이용약관에 동의합니다.
- 임시 계정이므로 복구 옵션이나 2단계 인증을 추가하지 않습니다.
- 무료 체험판을 신청하지 않습니다.
잠시 후 Google Cloud 콘솔이 이 탭에서 열립니다.
프로세스 개요
빌드할 대상을 보여 주는 다이어그램입니다.
코드를 커밋하고 코드로 파이프라인을 트리거하여 결과적으로는 웹사이트를 배포하는 것이 목표입니다. 이 과정은 두 부분으로 나뉩니다. 첫 번째 부분에서는 전체 프로세스를 이해할 수 있도록 로컬에서 웹사이트를 빌드하고 수동으로 Firebase에 배포합니다. 두 번째 부분에서는 Cloud Build로 파이프라인을 빌드하여 프로세스를 자동화합니다.
작업 1. 수동 배포
먼저 Linux 인스턴스에서 수동으로 웹사이트를 빌드하여 엔드 투 엔드 프로세스를 알아봅니다. 또한 Linux 인스턴스를 사용하여 Firebase를 가동하는 데 필요한 몇몇 일회성 작업을 진행합니다.
Linux 인스턴스에 연결
- 탐색 메뉴에서 Compute Engine > VM 인스턴스를 선택합니다. 자동으로 빌드된 인스턴스 1개가 표시됩니다.
- 아래 그림처럼 행 끝부분에 외부 IP 주소와 SSH 버튼이 표시됩니다. 정보 패널에 가려진 경우 행 전체를 볼 수 있도록 패널을 닫습니다.
- 나중에 사용할 수 있도록 외부 IP 주소를 기록해 둡니다.
- SSH를 클릭합니다. 창과 함께 셸 프롬프트가 표시됩니다.
Hugo 로컬 설치
이제 Firebase로 웹사이트를 배포하기 전에 로컬로 테스트할 수 있도록 Linux 인스턴스에 Hugo를 로컬로 설치합니다. 설치가 용이하도록 셸 스크립트가 제공됩니다.
- Linux 인스턴스 셸에서 파일 installhugo.sh를 검토합니다.
아래 내용도 확인할 수 있습니다.
출력:
-
wget
명령어를 사용하여 Hugo를 다운로드하고tar
명령어를 사용하여 Hugo 보관 파일을 압축해제합니다. 실습 후반부에서 파이프라인을 만들 때 유사한 명령어를 확인할 수 있습니다. -
아래 명령어를 입력하여 스크립트를 실행하고 Hugo를 설치합니다.
아래 보이는 것처럼 Hugo가 /tmp
디렉터리에 설치되었다는 메시지가 표시됩니다. 웹사이트 인프라를 빌드할 준비가 되었습니다.
저장소 및 초기 웹사이트 생성
이제 Cloud Source Repository를 만들어 웹사이트를 보관한 다음 저장소를 Linux 인스턴스에 클론합니다. 저장소를 클론하면 셸에 저장소의 미러가 생성됩니다. 이렇게 하면 셸에 있는 동안 웹사이트를 구현하고 나중에 변경사항을 파일 시스템에 커밋할 수 있습니다. 실습 후반부에서는 이러한 커밋에 응답하는 파이프라인을 저장소에 설정해 봅니다.
- Linux VM에 git 설치
Linux 인스턴스 셸에 다음 명령어를 입력합니다.
프롬프트가 표시되면 모든 프롬프트에 Yes
라고 답합니다.
- 코드 저장소를 생성 및 클론합니다. Linux 인스턴스 셸에 다음 명령어를 입력합니다.
아래 그림에 보이는 것처럼 저장소 생성 및 클론을 확인하는 메시지가 표시됩니다. 저장소에 대한 비용 청구 및 빈 저장소에 관한 두 가지 경고 메시지는 무시해도 됩니다.
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
- 사이트 구조를 생성할 준비가 되었습니다. 아래 명령어를 Linux 셸에 입력합니다.
보통은 hugo
명령어로 디렉터리가 생성됩니다. --force
옵션을 사용하면 이미 존재하는 저장소 디렉터리에 사이트가 생성되어 결과적으로 방금 클론한 디렉터리에 Git 관련 정보를 유지할 수 있습니다. 아래 그림처럼 사이트가 생성되었음을 나타내는 메시지가 표시됩니다.
- 이제 사이트의 레이아웃 제공을 위한 Ananke 테마를 설치합니다. Linux 인스턴스 셸에 다음 명령어를 입력합니다.
아래 보이는 것처럼 테마가 클론되었음을 나타내는 메시지가 표시됩니다.
- 테마 디렉터리에서 git 파일을 삭제합니다.
- 이제 웹사이트의 구조가 설정되었으므로 미리 볼 수 있습니다. 아래 명령어를 입력하여 TCP 포트 8080에서 사이트를 실행합니다.
아래 그림에 보이는 것처럼 Hugo는 사이트를 빌드하고 제공하여 TCP 포트 8080에서 액세스할 수 있게 합니다. 서버는 Ctrl+C 키를 눌러 중단할 때까지 실행됩니다.
- 브라우저 탭을 열고 포트 8080에서 외부 IP 주소로 이동합니다. 다음 URL을 사용하여
[EXTERNAL IP]
를 인스턴스의 외부 IP 주소로 교체합니다.
웹사이트의 모습은 다음과 같습니다.
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
- Linux 셸로 돌아가서 Ctrl+C 키를 눌러 Hugo 서버를 중단합니다.
프로젝트에 Firebase 추가
웹사이트의 모습을 확인했으니 이제 Firebase에 배포해야 합니다. 먼저 기존 프로젝트 내에 Firebase를 사용 설정합니다.
-
사용 중인 브라우저에서 새 탭을 열어 Google Cloud 콘솔에 액세스한 다음 여기서 Firebase를 열어 Firebase Console로 이동합니다.
-
이제 프로젝트 추가를 클릭합니다.
프로젝트 이름을 선택하라는 메시지가 표시됩니다.
- 아래 그림에 보이는 것처럼 이름 필드 안을 클릭하고 'qwiklabs-gcp-...'로 시작되는 기존의 Google Cloud 프로젝트를 선택합니다.
- Firebase 약관에 동의합니다 및 Firebase를 거래, 사업, 제작, 직업과 관련된 목적으로만 사용할 것을 확인합니다에 체크표시합니다. 계속을 클릭합니다.
- Firebase 요금제를 확인하라는 메시지가 표시될 수 있습니다. Firebase 비용은 실습에 포함되어 있습니다. 메시지가 표시되면 요금제 확인을 클릭합니다.
- 프로젝트에 Firebase를 추가할 때 일부 기준을 확인하라는 메시지가 표시될 수 있습니다. 계속을 클릭합니다.
- 이 Firebase 프로젝트에 대한 Google 애널리틱스 사용을 확인하라는 메시지가 표시될 수 있습니다. 실습 환경이므로 전환 버튼을 사용하여 Google 애널리틱스를 사용 중지하고 Firebase 추가를 클릭합니다. Firebase가 프로젝트에 추가되기까지 1분 정도가 소요됩니다.
- Firebase 추가 후 프롬프트가 표시되면 계속을 클릭합니다.
Firebase에 사이트 배포
- Linux 인스턴스 셸에서 Firebase CLI를 설치합니다.
- 이제 Firebase를 초기화해야 합니다. 아래 명령어를 셸에 입력합니다.
- 화살표 키와 스페이스바를 사용하여 호스팅: Firebase 호스팅용 파일 구성 및 원하는 경우 GitHub 작업 배포 설정을 선택하고 Enter 키를 누릅니다. 프로젝트 옵션에 관한 질문이 표시되면 기존 프로젝트 사용을 선택한 다음 화살표 키, 스페이스바, Enter 키를 사용하여 실습 안내 페이지에 기재된 프로젝트 ID를 선택합니다. 공개 디렉터리의 경우 기본값인 공개를 선택합니다. 단일 페이지 애플리케이션으로 구성하려면 기본값인 N을 선택합니다. GitHub를 통한 자동 빌드 및 배포를 설정하려면 N을 선택합니다.
기존 파일을 덮어쓸지 물어보면 'Y'를 선택합니다.
- 애플리케이션을 배포할 준비가 되었습니다. 아래 명령어를 Linux 인스턴스 셸에 입력하여 Hugo로 사이트를 다시 빌드하고 Firebase로 배포합니다.
- 애플리케이션이 배포되면 호스팅 URL을 받게 됩니다. 클릭하면 동일한 웹사이트가 Firebase CDN(콘텐츠 전송 네트워크)에서 제공된다는 것을 확인할 수 있습니다. 일반적인 '환영' 메시지가 표시되면 CDN이 초기화될 때까지 몇 분을 기다렸다가 브라우저 창을 새로고침합니다. 나중에 사용할 수 있도록 이 호스팅 URL을 저장합니다.
로컬에서 전체 배포를 진행했으니 다음으로는 Cloud Build를 사용하여 프로세스를 처음부터 끝까지 자동화합니다.
작업 2. 배포 자동화
초기 커밋 진행
파이프라인 빌드의 목표는 저장소가 변경될 때 빌드를 트리거할 수 있게 하는 것입니다. 먼저 향후에 변경할 수 있는지 검증하기 위해 저장소에 대한 초기 커밋을 진행해야 합니다.
- 아래 명령어를 Linux 셸에 입력하여 git 명령어 전역 파라미터를 구성합니다. 따옴표를 포함해야 합니다.
- 아래 명령어를 Linux 셸에 입력하여
.gitignore
파일을 생성하고 특정 디렉터리를 저장소에서 제외합니다.
- 아래 명령어를 입력하여 저장소에 대한 초기 커밋을 진행합니다.
웹사이트의 초기 버전을 Google Cloud에 커밋(업로드)했습니다.
빌드 구성
Cloud Build는 저장소 루트 디렉터리의 cloudbuild.yaml 파일을 사용하여 빌드를 진행합니다. 파일은 YAML 형식입니다. 띄어쓰기와 들여쓰기는 중요하므로 Linux 인스턴스에 이미 자동으로 삽입되어 있습니다.
- 아래 명령어를 Linux 셸에 입력합니다.
cp
명령어 끝부분의 마지막 마침표('.')에 유의합니다.
- 다음을 실행하여
cloudbuild.yaml
파일이 어떤 모습인지 확인합니다. 일부 행은 길이로 인해 래핑되었습니다.
출력:
-
cloudbuild.yaml
파일에 대한 몇 가지 관찰 내용은 다음과 같습니다.
- 이 파일에는 컨테이너 이미지에 의해 수행되는 세 개의 명명된 단계가 있습니다. 처음 두 단계는 Google에서 지원하는 빌더를 통해
wget
을 사용하여 Hugo 및 Firebase 도구를 다운로드합니다. 두 단계는 동시에 실행됩니다. wget 빌더를 사용하면wget
을 수동으로 설치할 때보다 훨씬 빠릅니다. - 세 번째 단계에서는 표준 Ubuntu 컨테이너를 사용하여 Hugo 및 Firebase를 설치한 후 사이트를 빌드하고 배포합니다. 배포별로 Hugo 및 Firebase를 설치하면 Firebase의 최신 버전을 사용하면서 원할 때마다 Hugo의 버전을 변경할 수 있습니다.
-
tar
및wget
명령어는 앞서installhugo.sh
스크립트에서 사용된 명령어와 거의 동일합니다. - 파일은 이 템플릿이 여러 환경에서 사용될 수 있도록 커스텀 대체 변수(_HUGO_VERSION)와 Google에서 제공하는 대체 변수(PROJECT_ID)도 사용합니다.
- Hugo 및 Firebase 바이너리는 실수로 웹사이트 자체에 배포되지 않도록 임시 디렉터리에 생성 및 설치됩니다.
Cloud Build 트리거 생성
이제 저장소의 마스터 브랜치에 대한 커밋에 응답하는 트리거를 생성합니다.
- 명령줄에서 다음 명령어를 입력합니다.
- 트리거 구성에는 다음과 같은 세부정보가 포함됩니다.
필드 | 값 |
---|---|
이름 | commit-to-master-branch |
설명 | Push to master |
이벤트 | 브랜치로 푸시 |
저장소 | my_hugo_site |
브랜치(정규식) | ^master$(정규식 반전을 선택 해제해야 함) |
빌드 구성 | Cloud Build 구성 파일(YAML 또는 JSON) |
Cloud Build 구성 파일 위치 | / cloudbuild.yaml |
Cloud Build 서비스 계정
Cloud Build 서비스 계정에는 웹사이트를 배포하기 위해 Firebase를 사용할 권한이 있어야 합니다.
Cloud Build | 역할 | 설명 |
---|---|---|
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com | roles/firebasehosting.admin | 호스팅 리소스에 대한 전체 읽기/쓰기 액세스 권한 |
파이프라인 테스트
파이프라인을 만들었으니 이제 사이트를 변경한 다음 커밋하여 변경사항이 전파되는지 확인합니다.
- Linux 셸에서 아래 명령어를 입력하여 저장소 디렉터리로 이동합니다.
- config.toml 파일을 편집하고 제목을 변경합니다.
- Linux 셸에서 아래 명령어를 입력하여 변경사항을 저장소에 커밋하고 Cloud Build 파이프라인을 트리거합니다.
- 빌드 내역을 확인하고 빌드 상태를 살펴봅니다.
- 현재 빌드의 빌드 로그를 확인합니다.
- 수행한 빌드에서 URL을 가져옵니다.
- 호스팅 URL로 이동하여 결과를 확인합니다. Firebase Console로 이동하여 프로젝트를 검토하고 도메인 이름을 찾을 수도 있습니다.
내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.
수고하셨습니다
Cloud Build가 CDN 및 SSL 인증서를 제공하는 Firebase에 Hugo 웹사이트를 빠르게 배포하기 위해 어떤 식으로 파이프라인을 조정하는지 알아봤습니다. Cloud Build를 사용하면 필요에 따라 프로세스를 맞춤설정할 수 있습니다. 짧은 배포 시간 덕분에 적은 노력으로 빠르게 혁신하고 웹사이트 버전을 테스트할 수 있습니다. 자세한 내용은 Cloud Build 및 Firebase 문서를 참조하세요.
Google Cloud 교육 및 자격증
Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.
설명서 최종 업데이트: 2024년 1월 30일
실습 최종 테스트: 2023년 12월 11일
Copyright 2024 Google LLC All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.