GCP 저장소에 Angular 프런트엔드 업로드

 

Angular 애플리케이션을 배포하기 위해 GCP 저장소 버킷을 빠르게 만드는 방법을 보여 드리겠습니다.

내 Angular 프로젝트를 저장하기 위해 스토리지 버킷을 생성해야 합니다.

그런 다음 Application Load Balancer는 트래픽을 URL 또는 IP에서 스토리지 버킷의 콘텐츠로 리디렉션합니다.

세부 사항을 살펴 보겠습니다.

프런트엔드 준비

우선 Storage Bucket에 업로드할 파일을 준비해야 합니다.

해당 파일은 프로젝트 파일이 아니지만 프로젝트의 컴파일된 버전을 얻으려면 Angular 프로젝트를 빌드해야 합니다.

컴파일을 통해 전체 프로젝트가 포함된 5~7개의 파일 세트가 생성됩니다.

이는 프로젝트의 모든 JavaScript, HTML 및 CSS 콘텐츠를 단일 파일로 압축한 것입니다.

해당 파일을 얻으려면 package.json 파일을 살펴보거나 다음 명령을 실행하면 됩니다.

1

ng build

결과 파일은 dist 폴더 에 있습니다 . 그 안에는 프로젝트 이름이 적힌 또 다른 폴더가 표시됩니다. 그리고 이 폴더 안에는 생성된 모든 파일이 있습니다.

GCP 저장소 버킷 구성

이제 컴파일된 파일을 업로드하기 위해 스토리지 버킷을 생성하고 구성해야 합니다. 로드 밸런서를 통해 URL을 통해 액세스할 수 있도록 이 버킷을 구성해야 합니다.

모든 정보는 이 링크 에서 찾을 수 있습니다 .

먼저 모든 콘텐츠를 저장할 버킷을 만들어 보겠습니다. 기본 옵션과 프라이빗 버킷을 선택합니다.

 

GCP 저장소 버킷 만들기

Angular 프로젝트의 파일을 저장할 버킷이 있으면 이제 URL 요청을 index.html 파일로 리디렉션하는 로드 밸런서를 생성할 차례입니다.

네트워크 설정으로 이동하여 Application Load Balancer인 Load Balancer를 생성합니다.

 

Application Load Balancer 생성

Application Load Balancer를 구성할 때 프런트엔드와 백엔드를 설정해야 합니다.

프런트엔드의 경우 기본값을 그대로 둡니다. 프런트엔드 구성은 Load Balancer, 포트, 프로토콜 등에 액세스하는 방법을 정의합니다.

그리고 백엔드의 경우 Load Balancer 뒤에 무엇이 있는지 정의합니다. 로드 밸런서 뒤에 스토리지 버킷을 두고 싶습니다. 이제 백엔드 로드 밸런서를 버킷으로 구성해 보겠습니다.

 

Application Load Balancer 백엔드 버킷 구성

마지막으로 프런트엔드 및 백엔드 구성을 표시하는 요약 창이 있습니다. 생성 버튼을 클릭하면 로드 밸런서가 생성됩니다.

 

로드 밸런서 요약

Load Balancer가 생성되면 요청할 IP를 얻기 위한 세부 정보를 확인할 수 있습니다.

 

로드 밸런서 세부정보 보기

나중에 IP를 복사합니다.

콘텐츠 업로드

GCP의 모든 아키텍처가 생성되었습니다. 이제 Angular 프로젝트를 내 스토리지 버킷에 업로드할 차례입니다.

내 프로젝트를 업로드하려면 터미널에서 다음 GCP 명령을 실행해야 합니다.

1	gcloud storage cp -r dist/frontend gs://my-bucket

이렇게 하면 dist/frontend 폴더 의 콘텐츠 (내 프로젝트 이름이 frontend 인 경우)가 my-bucket 이라는 스토리지 버킷에 업로드됩니다 .

귀하의 콘텐츠에 접근하세요

이제 브라우저에서 로드 밸런서의 IP 주소에 액세스할 수 있습니다. 그러면 브라우저에 내 스토리지 버킷의 콘텐츠가 표시됩니다.

더 나아가서 HTTPS 프로토콜을 사용하여 Angular 프로젝트로 이동하도록 로드 밸런서에서 SSL 인증서를 구성할 수 있습니다.

또한 접근성이 높고 빠른 액세스가 가능하도록 CDN(Content Delivery Network)을 구성하여 전 세계 여러 지역에 프런트엔드 파일을 분산시킬 수 있습니다.

마지막으로 IP 주소 대신 DNS 레코드를 생성하여 로드 밸런서에 도메인 이름을 연결할 수 있습니다. 이렇게 하면 IP 주소 대신 맞춤 URL을 갖게 됩니다.