1. 소개
개요
이 Codelab에서는 8개의 JavaScript 애플리케이션을 Cloud Run에 배포합니다.
- Angular SSR - Angular 기반
- Nuxt.js - Vue.js 기반
- Next.js - React 기반
- 리믹스 - React 기반
- SvelteKit - Svelte 기반
- SolidStart - Solid.js 기반
- Astro
- Qwik
학습할 내용
- Cloud Build에서 자동으로 지원하는 JavaScript 프레임워크를 배포하는 방법
- 구성이 필요한 JavaScript 프레임워크를 배포하는 방법
기본 요건
- Cloud Shell 터미널에 로그인되어 있습니다.
- 결제가 사용 설정되어 있고 Cloud Run에 배포할 권한이 있는 Google Cloud 프로젝트가 있습니다.
- 이전에 Cloud Run 서비스를 배포한 경우 이를 확인할 수 있습니다. 예를 들어 소스 코드에서 Node.js 웹 서비스 배포 빠른 시작의 안내에 따라 시작할 수 있습니다.
2. Cloud Shell 활성화
- Cloud Shell 터미널(https://shell.cloud.google.com/?show=terminal)로 이동합니다. Cloud Shell을 처음 시작하는 경우 기능을 설명하는 중간 화면이 표시됩니다. 중간 화면이 표시되면 계속을 클릭합니다.Cloud Shell을 프로비저닝하고 연결하는 데 몇 분 정도 소요됩니다.
- Cloud Shell에서 다음 명령어를 실행하여
gcloud프로젝트를 설정합니다.gcloud config set project <PROJECT_ID>
gcloud config set project js-frameworks
3. API 사용 설정
이 Codelab을 사용하기 전에 먼저 사용 설정해야 하는 API가 몇 가지 있습니다. 이 Codelab에서는 다음 API를 사용해야 합니다. 다음 명령어를 실행하여 이러한 API를 사용 설정할 수 있습니다.
gcloud services enable \
cloudbuild.googleapis.com \
artifactregistry.googleapis.com \
run.googleapis.com
그런 다음 이 Codelab 전체에서 사용할 환경 변수를 설정할 수 있습니다.
4. 기본 리전 구성
각 배포에 개별적으로 리전을 설정할 수 있습니다. 이 명령어는 기본 리전을 us-central1로 설정하므로 각각에 리전을 설정할 필요가 없습니다.
gcloud config set run/region us-central1
5. git 구성
일부 라이브러리는 git가 버전 제어에 기본적으로 사용될 것으로 예상합니다. 컴퓨터에 이미 git가 구성되어 있으면 (예: 이 실습을 로컬에서 실행) 이 단계를 실행할 필요가 없습니다.
git config --global user.email "you@example.com" git config --global user.name "Your Name" git config --global init.defaultBranch main
6. Angular SSR (Angular)
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- 서버 측 렌더링 (SSR)을 사용하는 Angular 애플리케이션 만들기
npx @angular/cli new angular-app --ssr
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd angular-app
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://angular-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 Angular 프로젝트 삭제
cd .. rm -rf angular-app - Angular Cloud Run 서비스 삭제
gcloud run services delete angular-appEnter키를 눌러 계속 진행합니다.
7. Nuxt.js (Vue.js)
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- Nuxt.js 애플리케이션 만들기
npx nuxi init nuxt-app
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd nuxt-app
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://nuxt-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 Nuxt.js 프로젝트 삭제
cd .. rm -rf nuxt-app - Nuxt.js Cloud Run 서비스 삭제
gcloud run services delete nuxt-appEnter키를 눌러 계속 진행합니다.
8. Next.js (React)
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- Next.js 애플리케이션 만들기
npx create-next-app next-app
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd next-app
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://next-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 Next.js 프로젝트 삭제
cd .. rm -rf next-app - Next.js Cloud Run 서비스 삭제
gcloud run services delete next-appEnter키를 눌러 계속 진행합니다.
9. 리믹스 (반응)
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- 리믹스 애플리케이션 만들기
npx create-remix remix-app
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd remix-app
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://remix-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 리믹스 프로젝트 삭제
cd .. rm -rf remix-app - 리믹스 Cloud Run 서비스 삭제
gcloud run services delete remix-appEnter키를 눌러 계속 진행합니다.
10. Cloud Shell 삭제
Cloud Shell을 사용하지 않거나 단일 애플리케이션만 배포하는 경우 이 단계는 선택사항입니다.
Cloud Shell은 영구적인 5GB 홈 디렉터리를 제공하며 Google Cloud에서 실행됩니다.
Cloud Shell로 8개의 프레임워크를 모두 배포하려면 나머지 애플리케이션을 위한 공간을 만들어야 합니다.
Cloud Shell에서 프로젝트를 삭제해도 배포한 Cloud Run 서비스는 삭제되지 않습니다.
이미 만든 애플리케이션을 지우려면 다음 명령어를 실행합니다.
cd ~ rm -rf angular-app/ rm -rf nuxt-app/ rm -rf next-app/ rm -rf remix-app/
11. SvelteKit (Svelte)
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- SvelteKit 애플리케이션 만들기
npx create-svelte svelte-app
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd svelte-app
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://svelte-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 SvelteKit 프로젝트 삭제
cd .. rm -rf svelte-app - SvelteKit Cloud Run 서비스 삭제
gcloud run services delete svelte-appEnter키를 눌러 계속 진행합니다.
12. SolidStart (SolidStart)
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- SolidStart 애플리케이션 만들기
npx create-solid solid-app
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd solid-app
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://solid-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 SolidStart 프로젝트 삭제
cd .. rm -rf solid-app - SolidStart Cloud Run 서비스 삭제
gcloud run services delete solid-appEnter키를 눌러 계속 진행합니다.
13. Astro
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- Astro 애플리케이션 만들기
npx create-astro astro-app
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd astro-app
- Node.js용 Astro 어댑터 추가
npx astro add node
package.json에서start스크립트를 업데이트합니다.npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://astro-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 Astro 프로젝트 삭제
cd .. rm -rf astro-app - Astro Cloud Run 서비스 삭제
gcloud run services delete astro-appEnter키를 눌러 계속 진행합니다.
14. Qwik
- Angular 애플리케이션을 만들려는 디렉터리로 이동합니다.
cd ~
- Qwik 애플리케이션 만들기
npx create-qwik
Enter키를 눌러 기본값을 수락합니다. - 새로 만든 프로젝트 폴더로 이동합니다.
cd qwik-app
- Cloud Run용 Qwik 어댑터 추가
npm run qwik add cloud-run
- 애플리케이션 배포
gcloud run deploy --allow-unauthenticated
Enter키를 눌러 기본값을 수락합니다.
애플리케이션 방문
배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run은 다음과 같은 URL을 반환합니다.
https://qwik-app-xxxxxxxxxx-uc.a.run.app
새 브라우저 탭에서 제공된 URL을 열어 배포된 애플리케이션을 확인합니다.
선택적 정리
- 로컬에서 Qwik 프로젝트 삭제
cd .. rm -rf qwik-app - Qwik Cloud Run 서비스 삭제
gcloud run services delete qwik-appEnter키를 눌러 계속 진행합니다.
15. 축하합니다.
축하합니다. Codelab을 완료했습니다.
향후 빌드가 버전 제어에 푸시할 때마다 자동으로 배포될 수 있도록 빠른 시작: Git 저장소에서 Cloud Run에 배포의 문서를 검토하는 것이 좋습니다.
학습한 내용
- Cloud Build에서 지원하는 JavaScript 프레임워크를 자동으로 배포하는 방법
- Angular SSR - Angular 기반
- Nuxt.js - Vue.js 기반
- Next.js - React 기반
- 리믹스 - React 기반
- SvelteKit - Svelte 기반
- SolidStart - Solid.js 기반
- 구성이 필요한 JavaScript 프레임워크를 배포하는 방법
- Astro
- Qwik
16. 삭제
실수로 인한 요금 청구를 방지하려면(예: 이 Cloud Run 서비스가 무료 등급의 월별 Cloud Run 호출 할당보다 실수로 더 많이 호출된 경우) Cloud Run 작업을 삭제하거나 1단계에서 만든 프로젝트를 삭제합니다.
Cloud Run 서비스를 삭제하려면 Cloud Run Cloud 콘솔(https://console.cloud.google.com/run/)으로 이동하여 Cloud Run 서비스를 삭제합니다.
전체 프로젝트를 삭제하려면 https://console.cloud.google.com/cloud-resource-manager로 이동하여 2단계에서 만든 프로젝트를 선택한 후 삭제를 선택하면 됩니다. 프로젝트를 삭제하면 Cloud SDK에서 프로젝트를 변경해야 합니다. gcloud projects list를 실행하면 사용 가능한 모든 프로젝트의 목록을 볼 수 있습니다.