GSP1051

개요

Cloud Spanner는 Google의 완전 관리되고 수평 확장 가능한 관계형 데이터베이스 서비스입니다. 금융 서비스, 게임, 소매, 기타 여러 업종의 고객은 일관성과 대규모 가용성이 중요한 까다로운 워크로드를 실행하는 데 Cloud Spanner를 사용합니다.

이 실습에서는 Cloud Spanner 인스턴스에 연결된 Node.js 애플리케이션을 빌드하고 배포합니다. Node.js 애플리케이션은 OmegaTrade라는 주가 시각화 도구입니다. OmegaTrade 애플리케이션은 Cloud Spanner에 주가를 저장하고 Google 차트를 사용하여 시각화를 렌더링합니다.

백엔드 서비스는 Node.js Express 프레임워크를 사용하며 기본 연결 풀링, 세션, 제한 시간 기능을 통해 Cloud Spanner에 연결됩니다.

실습할 내용

• 프로젝트 환경 구성하기
• 애플리케이션 코드 다운로드 및 검사하기
• 백엔드 애플리케이션 구성요소 배포하기
• 샘플 주식 거래 데이터를 데이터베이스로 가져오기
• 프런트엔드 애플리케이션 구성요소 배포하기
• OmegaTrade 애플리케이션에서 작업 수행하기

설정 및 요건

실습 시작 버튼을 클릭하기 전에

다음 안내를 확인하세요. 실습에는 시간 제한이 있으며 일시중지할 수 없습니다. 실습 시작을 클릭하면 타이머가 시작됩니다. 이 타이머는 Google Cloud 리소스를 사용할 수 있는 시간이 얼마나 남았는지를 표시합니다.

실무형 실습을 통해 시뮬레이션이나 데모 환경이 아닌 실제 클라우드 환경에서 실습 활동을 진행할 수 있습니다. 실습 시간 동안 Google Cloud에 로그인하고 액세스하는 데 사용할 수 있는 새로운 임시 사용자 인증 정보가 제공됩니다.

이 실습을 완료하려면 다음을 준비해야 합니다.

• 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)

참고: 이 실습을 실행하려면 시크릿 모드(권장) 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학습자 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.

• 실습을 완료하기에 충분한 시간(실습을 시작하고 나면 일시중지할 수 없음)

참고: 이 실습에는 학습자 계정만 사용하세요. 다른 Google Cloud 계정을 사용하는 경우 해당 계정에 비용이 청구될 수 있습니다.

실습을 시작하고 Google Cloud 콘솔에 로그인하는 방법

1. 실습 시작 버튼을 클릭합니다. 실습 비용을 결제해야 하는 경우 결제 수단을 선택할 수 있는 대화상자가 열립니다. 오른쪽에는 다음과 같은 항목이 포함된 실습 설정 및 액세스 패널이 있습니다.

   • Google Cloud 콘솔 열기 버튼
   • 이 실습에 사용해야 하는 임시 사용자 인증 정보(사용자 이름 및 비밀번호)
   • 필요한 경우 실습 진행을 위한 기타 정보

   실습 타이머는 페이지 상단에 있으며 남은 시간을 표시합니다.

2. Google Cloud 콘솔 열기를 클릭합니다(Chrome 브라우저를 실행 중인 경우 마우스 오른쪽 버튼으로 클릭하고 시크릿 창에서 링크 열기를 선택합니다).

   실습에서 리소스가 가동되면 다른 탭이 열리고 로그인 페이지가 표시됩니다.

   팁: 두 개의 탭을 각각 별도의 창으로 나란히 정렬하세요.

   참고: 계정 선택 대화상자가 표시되면 다른 계정 사용을 클릭합니다.

3. 필요한 경우 아래의 사용자 이름을 복사하여 로그인 대화상자에 붙여넣습니다.

   {{{user_0.username | "Username"}}}

   실습 설정 및 액세스 패널에서도 사용자 이름을 확인할 수 있습니다.

4. 다음을 클릭합니다.

5. 아래의 비밀번호를 복사하여 시작하기 대화상자에 붙여넣습니다.

   {{{user_0.password | "Password"}}}

   실습 설정 및 액세스 패널에서도 비밀번호를 확인할 수 있습니다.

6. 다음을 클릭합니다.

   중요: 실습에서 제공하는 사용자 인증 정보를 사용해야 합니다. Google Cloud 계정 사용자 인증 정보를 사용하지 마세요. 참고: 이 실습에 자신의 Google Cloud 계정을 사용하면 추가 요금이 발생할 수 있습니다.

7. 이후에 표시되는 페이지를 클릭하여 넘깁니다.

   • 이용약관에 동의하세요.
   • 임시 계정이므로 복구 옵션이나 2단계 인증을 추가하지 마세요.
   • 무료 체험판을 신청하지 마세요.

잠시 후 Google Cloud 콘솔이 이 탭에서 열립니다.

참고: Google Cloud 제품 및 서비스에 액세스하려면 탐색 메뉴를 클릭하거나 검색창에 제품 또는 서비스 이름을 입력합니다.

Cloud Shell 활성화

Cloud Shell은 다양한 개발 도구가 탑재된 가상 머신으로, 5GB의 영구 홈 디렉터리를 제공하며 Google Cloud에서 실행됩니다. Cloud Shell을 사용하면 명령줄을 통해 Google Cloud 리소스에 액세스할 수 있습니다.

1. Google Cloud 콘솔 상단에서 Cloud Shell 활성화 를 클릭합니다.

2. 다음 창을 클릭합니다.

   • Cloud Shell 정보 창을 통해 계속 진행합니다.
   • 사용자 인증 정보를 사용하여 Google Cloud API를 호출할 수 있도록 Cloud Shell을 승인합니다.

연결되면 사용자 인증이 이미 처리된 것이며 프로젝트가 학습자의 PROJECT_ID, (으)로 설정됩니다. 출력에 이 세션의 PROJECT_ID를 선언하는 줄이 포함됩니다.

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud는 Google Cloud의 명령줄 도구입니다. Cloud Shell에 사전 설치되어 있으며 명령줄 자동 완성을 지원합니다.

3. (선택사항) 다음 명령어를 사용하여 활성 계정 이름 목록을 표시할 수 있습니다.

gcloud auth list

4. 승인을 클릭합니다.

출력:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (선택사항) 다음 명령어를 사용하여 프로젝트 ID 목록을 표시할 수 있습니다.

gcloud config list project

출력:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 참고: gcloud 전체 문서는 Google Cloud에서 gcloud CLI 개요 가이드를 참고하세요.

Cloud Spanner 인스턴스

이 실습을 더 빠르게 진행할 수 있도록 OmegaTrade 애플리케이션에 필요한 Cloud Spanner 인스턴스, 데이터베이스, 테이블이 자동으로 생성되었습니다.

다음은 참고할 수 있는 몇 가지 세부정보입니다.

항목	이름	세부정보
Cloud Spanner 인스턴스	omegatrade-instance	프로젝트 수준 인스턴스입니다.
Cloud Spanner 데이터베이스	omegatrade-db	인스턴스별 데이터베이스입니다.
테이블	Users	사용자 계정을 포함합니다.
테이블	Companies	회사 이름 및 주식 종목명을 포함합니다.
테이블	CompanyStocks	주식 가치를 포함합니다.
테이블	Simulations	각 시뮬레이션의 상태를 추적합니다.

작업 1. 필수 Google Cloud API 사용 설정

먼저 Cloud Spanner, Artifact Registry, Cloud Run에 대한 Google Cloud API를 사용 설정합니다.

1. Cloud Shell에서 다음 명령어를 입력합니다.

gcloud services enable spanner.googleapis.com gcloud services enable artifactregistry.googleapis.com gcloud services enable run.googleapis.com

작업 2. 애플리케이션 코드 다운로드 및 검사하기

1. 이 실습에서 사용할 코드 저장소를 다운로드합니다. Cloud Shell에서 다음을 입력합니다.

git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. 애플리케이션 코드가 포함된 폴더로 이동합니다.

cd training-data-analyst/courses/cloud-spanner/omegatrade/

3. 코드는 주로 백엔드와 프런트엔드의 두 부분으로 나뉩니다. 애플리케이션 아키텍처는 아래 다이어그램에 묘사되어 있습니다.

4. 애플리케이션은 Cloud Spanner 인스턴스와 성공적으로 통신하기 위해 .env라는 배포별 파일에 의존합니다. 이 파일은 다음 작업에서 만들어 봅니다.

5. 백엔드와 관련하여 Cloud Spanner 테이블과의 일부 바인딩 및 상호작용은 Node.js 모델(company.model.js, simulation.model.js, user.model.js)에 의해 관리되며, 이 세 모델은 models 폴더에 있습니다. 다음 명령어를 실행하여 models 폴더로 이동합니다.

cd backend/app/models

6. 다음 명령어를 실행하여 company.model.js 파일을 검사합니다. 이 파일에는 companies 테이블과 상호작용하기 위한 데이터베이스 작업이 포함되어 있습니다.

more company.model.js

스페이스바를 누르면 파일을 끝까지 살펴보게 됩니다. 파일을 일찍 닫으려면 q를 입력하여 more 명령어를 종료합니다.

7. Node.js 백엔드의 이러한 모델 및 기타 구조와의 일부 프런트엔드 상호작용은 components 폴더에 있는 Angular 구성요소를 통해 이루어집니다. 다음 명령어를 실행하여 components 폴더로 이동합니다.

cd ../../../frontend/src/app/components

8. 예를 들어 company 구성요소에는 회사 정보를 관리하고 업데이트하는 기본 애플리케이션 코드가 포함되어 있습니다.

9. 다음 명령어를 실행하여 manage-company.component.ts TypeScript 구성 파일을 검사합니다. 이 파일에는 회사 삭제 또는 수정을 위한 메서드와 기타 작업이 포함되어 있습니다.

more company/manage-company/manage-company.component.ts

스페이스바를 누르면 파일을 끝까지 살펴보게 됩니다. 파일을 일찍 닫으려면 q를 입력하여 more 명령어를 종료합니다.

작업 3. 백엔드 구성요소 빌드 및 배포하기

1. 백엔드를 빌드하고 배포하는 데 필요한 코드가 포함된 폴더로 이동합니다.

cd ../../../../backend

2. .env 파일을 만듭니다. 앞서 언급했듯이 이 파일에는 애플리케이션의 백엔드 구성요소가 Cloud Spanner 인스턴스와 통신할 수 있도록 프로젝트별 정보가 포함되어 있습니다.

Cloud Shell에서 다음 명령어를 입력하여 Nano 텍스트 편집기를 호출하고 .env 파일을 새로 만듭니다.

nano .env

아래 나열된 코드 블록을 붙여넣습니다.

PROJECTID = {{{project_0.project_id|Project ID}}} INSTANCE = omegatrade-instance DATABASE = omegatrade-db JWT_KEY = w54p3Y?4dj%8Xqa2jjVC84narhe5Pk EXPIRE_IN = 30d

Ctrl+X 키를 눌러 Nano를 종료하고, Y 키를 눌러 업데이트를 확인한 다음, Enter 키를 눌러 변경사항을 저장합니다.

3. 계속 진행하기 전에 백엔드를 올바르게 컴파일할 수 있도록 npm의 업데이트된 구성요소를 설치해야 합니다. npm은 JavaScript용 패키지 관리자입니다. npm은 JavaScript 런타임 환경인 Node.js의 기본 패키지 관리자입니다.

nvm install 22.6 npm install npm -g npm install --loglevel=error

4. 다음으로 저장소 폴더에 있는 참조 Dockerfile을 사용하여 백엔드 애플리케이션을 빌드합니다.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . 참고: 빌드 프로세스 중에 표시되는 npm notice... 메시지는 무시해도 됩니다.

5. 새 애플리케이션 패키지를 푸시하기 전에 Cloud Shell에서 다음 명령어를 실행하여 구성 권한을 설정합니다.

계속할지 묻는 메시지가 표시되면 'y'를 입력합니다.

gcloud auth configure-docker

6. 새로 만든 애플리케이션 패키지를 Qwiklabs 프로젝트의 Artifact Registry에 푸시합니다.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1

7. 마지막으로 Cloud Run을 사용하여 백엔드 애플리케이션을 배포합니다. Cloud Run은 인프라 관리를 없애 줄 뿐만 아니라 트래픽에 따라 거의 즉시 자동으로 수직 확장 또는 축소하는 서버리스 배포 프레임워크입니다.

gcloud run deploy omegatrade-backend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 --memory 512Mi --allow-unauthenticated

8. 배포가 끝나면 제공된 URL을 복사합니다. 메모장, 텍스트 파일 또는 기타 쉽게 액세스할 수 있는 위치에 URL을 보관합니다. 이 URL은 프런트엔드 애플리케이션에 제공되어 사용자 인터페이스가 백엔드를 통해 Cloud Spanner 데이터베이스와 적절하게 통신할 수 있도록 합니다.

백엔드 서비스 URL은 다음 형식으로 표시됩니다.

https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app

작업 4. 샘플 주식 거래 데이터를 데이터베이스로 가져오기

1. 샘플 회사 및 주식 데이터를 가져오려면 현재(기본 백엔드) 폴더에서 다음 명령어를 실행합니다.

unset SPANNER_EMULATOR_HOST node seed-data.js

2. 테이블이 성공적으로 로드되었다는 확인 메시지가 표시됩니다.

Inserting Companies... done Inserting Simulations... done Inserting Stocks... done Data Loaded successfully

3. 내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

샘플 주식 거래 데이터를 데이터베이스로 가져오기

작업 5. 프런트엔드 구성요소 빌드 및 배포하기

1. 프런트엔드 코드가 포함된 디렉터리로 이동합니다. 특히 환경 폴더로 이동하여 백엔드 구성요소를 가리키도록 구성 파일을 업데이트합니다.

cd ../frontend/src/environments

2. Cloud Shell에서 다음 명령어를 입력하여 Nano 텍스트 편집기를 호출하고 environment.ts 파일을 엽니다.

nano environment.ts

3. http://localhost:3000 문자열을 조심히 삭제하고 백엔드 URL로 바꿉니다.

참고: URL의 /api/v1/ 부분을 반드시 유지하세요.

Ctrl+X 키를 눌러 Nano를 종료하고, Y 키를 눌러 업데이트를 확인한 다음, Enter 키를 눌러 변경사항을 저장합니다.

업데이트된 environment.ts 파일은 아래 예시와 유사하게 표시됩니다.

export const environment = { production: false, name: "dev", // change baseUrl according to backend URL baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // change clientId to actual value you have received from Oauth console clientId: "" };

4. 기본 프런트엔드 폴더로 이동합니다.

cd ../..

5. 프런트엔드를 제대로 컴파일할 수 있도록 npm의 업데이트된 구성요소를 설치합니다.

npm install npm -g npm install --loglevel=error 참고: 설치 과정에서 표시되는 npm WARN config... 메시지는 무시해도 됩니다.

6. 다음으로 저장소 폴더에 있는 참조 Dockerfile을 사용하여 프런트엔드 애플리케이션을 빌드합니다. 프런트엔드 빌드를 완료하는 데 5~10분 정도 걸릴 수 있습니다.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . 참고: 빌드 프로세스 중에 표시되는 npm notice... 메시지는 무시해도 됩니다.

7. 새로 만든 애플리케이션 패키지를 Qwiklabs 프로젝트의 Artifact Registry에 푸시합니다.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1

8. 마지막으로 Cloud Run을 사용하여 프런트엔드 애플리케이션을 배포합니다.

gcloud run deploy omegatrade-frontend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 --allow-unauthenticated

9. 프런트엔드 서비스 URL은 다음 형식으로 표시됩니다. URL을 직접 클릭하여 열거나 URL을 복사하여 새 탭에 붙여넣을 수 있습니다.

https://omegatrade-frontend-zzzyyyxx1x-uw.a.run.app

작업 6. OmegaTrade 애플리케이션에서 작업 수행하기

1. 애플리케이션 실행 페이지에서 sign up(가입) 링크를 클릭합니다.

2. 다음 세부정보를 사용하여 Spanner1이라는 가상의 회사에 대한 새 계정을 만듭니다.

항목	값
회사 이메일	admin@spanner1.com
전체 이름	Spanner1 Admin
비밀번호	Spanner1
비밀번호 확인	Spanner1

3. 계정이 생성되고 로그인됩니다.

4. OmegaTrade 애플리케이션을 검사하려면 Dashboard(대시보드)로 이동합니다. 선택기에서 Foobar Inc를 선택하여 Foobar Inc의 주식 성과 차트를 확인합니다. Foobar Inc의 시뮬레이션된 주식 가격이 시간 경과에 따라 어떻게 변하는지 확인할 수 있습니다.

5. Manage Company(회사 관리)로 이동하여 Spanner1을 새 회사로 추가합니다.

6. 페이지 오른쪽에 있는 Add Company(회사 추가)를 클릭합니다. 팝업 창에 다음 값을 입력합니다.

항목	값
회사 이름	Spanner1
쇼트 코드	SPN

저장을 클릭합니다.

7. 이제 Spanner1이 회사 목록에 표시됩니다.

8. Dashboard(대시보드)로 이동하여 아직 선택되지 않은 경우 Spanner1을 선택합니다. Spanner1에 대한 시뮬레이션이 존재하지 않음을 알 수 있습니다. here(여기)라는 제목의 링크를 클릭하여 시뮬레이션을 생성합니다.

9. Simulate Data(데이터 시뮬레이션)에서 다음 세부정보를 제공합니다.

항목	값
회사 선택	Spanner1
간격 선택	5
레코드 수	50

그런 다음 Simulate(시뮬레이션)를 클릭합니다.

10. Dashboard(대시보드)로 이동하면 시뮬레이션이 진행됨에 따라 Spanner1의 차트가 즉시 업데이트됩니다. 시뮬레이션이 완료되는 데 3~6분 정도 소요됩니다.

11. OmegaTrade 애플리케이션을 사용하면 기존 회사 정보도 수정할 수 있습니다. Manage Company(회사 관리) 탭에서 Acme Corp의 Action(작업) 아래에 있는 연필 아이콘을 클릭합니다.

12. 회사 이름을 Coyote Inc로 업데이트합니다. 쇼트 코드는 사용자 인터페이스에서 업데이트할 수 없습니다. Update(업데이트)를 클릭하여 닫고 변경사항을 적용합니다.

13. 회사 이름은 즉시 업데이트됩니다. Dashboard(대시보드)로 이동하면 Acme Corp가 더 이상 표시되지 않고 Coyote Inc가 대신 표시되는 것을 확인할 수 있습니다.

14. 때로는 애플리케이션 코드의 기능을 초과하는 데이터 변경이 필요합니다. 권한이 있는 사용자는 Cloud Spanner 데이터베이스에서 직접 변경하여 OmegaTrade 애플리케이션에 사용되는 데이터를 업데이트할 수 있습니다.

15. Cloud 콘솔에서 탐색 메뉴 () > 모든 제품 보기 > 데이터베이스 > Spanner를 클릭합니다.

16. 표시되는 모든 확인 또는 정보 창을 수락합니다.

17. omegatrade-instance 이름을 클릭한 후 데이터베이스 아래에서 omegatrade-db를 클릭합니다. 페이지 하단의 테이블 목록에서 companies를 클릭합니다.

18. 왼쪽 창에서 데이터를 클릭하여 테이블 콘텐츠를 확인합니다.

19. Bar Industries 항목의 이름을 업데이트해 보겠습니다.

20. Bar Industries 행의 체크박스를 클릭합니다. 그런 다음 테이블 행 위에 나열된 선택 항목에서 수정을 클릭합니다.

21. Spanner Studio로 이동합니다. + 새 탭을 클릭합니다. 다음 쿼리를 입력하여 companyName의 값을 Bar Industries에서 Consolidated Enterprises Inc로 업데이트합니다.

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; 참고: Cloud Spanner 쿼리 창에서 쇼트 코드 값을 변경할 수 있습니다. 설계된 애플리케이션 코드에서는 사용자 인터페이스를 통해 이 값을 업데이트할 수 없습니다.

22. 실행을 클릭하여 업데이트를 처리합니다.

23. 애플리케이션 페이지로 돌아가 브라우저를 새로고침하고 Dashboard(대시보드) 탭으로 이동합니다. Bar Industries가 더 이상 표시되지 않고 Consolidated Enterprises Inc가 대신 표시되는 것을 확인할 수 있습니다.

수고하셨습니다

이제 Cloud Spanner 인스턴스에 연결된 Node.js 애플리케이션을 배포하고, 애플리케이션을 사용하여 데이터베이스에 대한 기본 작업을 수행했으며, 데이터베이스에서 직접 데이터를 수정했습니다.

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2025년 12월 31일

실습 최종 테스트: 2025년 12월 31일

Copyright 2026 Google LLC. All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.