모든 JavaScript 프레임워크를 Cloud Run에 배포하는 방법

1. 소개

개요

이 Codelab에서는 8개의 JavaScript 애플리케이션을 Cloud Run에 배포합니다.

  • Angular SSR - Angular 기반
  • Nuxt.js - Vue.js 기반
  • Next.js - React 기반
  • 리믹스 - React 기반
  • SvelteKit - Svelte 기반
  • SolidStart - Solid.js 기반
  • 천체
  • Qwik

Angular 애플리케이션 스크린샷Nuxt.js 애플리케이션 스크린샷Next.js 애플리케이션 스크린샷리믹스 애플리케이션 스크린샷SvelteKit 애플리케이션 스크린샷SolidStart 애플리케이션 스크린샷Astro 애플리케이션 스크린샷Qwik 애플리케이션 스크린샷

학습할 내용

  • Cloud Build에서 지원하는 JavaScript 프레임워크를 자동으로 배포하는 방법
  • 구성이 필요한 JavaScript 프레임워크를 배포하는 방법

기본 요건

2. Cloud Shell 활성화

  1. Cloud Shell 터미널(https://shell.cloud.google.com/?show=terminal)로 이동합니다. Cloud Shell을 처음 시작하는 경우 설명이 포함된 중간 화면이 표시됩니다. 중간 화면이 표시되면 계속을 클릭합니다. Cloud Shell을 프로비저닝하고 연결하는 데 몇 분 정도만 걸립니다.
  2. Cloud Shell에서 다음 명령어를 실행하여 gcloud 프로젝트를 설정합니다.
    gcloud config set project <PROJECT_ID>
    <PROJECT_ID>를 프로젝트 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)

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. 서버 측 렌더링 (SSR)을 사용하는 Angular 애플리케이션 만들기 
    npx @angular/cli new angular-app --ssr
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd angular-app
  4. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://angular-app-xxxxxxxxxx-uc.a.run.app

Angular 애플리케이션 스크린샷

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

선택사항: 정리

  1. 로컬에서 Angular 프로젝트 삭제 
    cd ..
rm -rf angular-app
  2. Angular Cloud Run 서비스 삭제 
    gcloud run services delete angular-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

7. Nuxt.js (Vue.js)

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. Nuxt.js 애플리케이션 만들기 
    npx nuxi init nuxt-app
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd nuxt-app
  4. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

Nuxt.js 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 Nuxt.js 프로젝트 삭제 
    cd ..
rm -rf nuxt-app
  2. Nuxt.js Cloud Run 서비스 삭제 
    gcloud run services delete nuxt-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

8. Next.js (React)

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. Next.js 애플리케이션 만들기 
    npx create-next-app next-app
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd next-app
  4. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://next-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

Next.js 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 Next.js 프로젝트 삭제 
    cd ..
rm -rf next-app
  2. Next.js Cloud Run 서비스 삭제 
    gcloud run services delete next-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

9. 리믹스 (React)

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. 리믹스 애플리케이션 만들기 
    npx create-remix remix-app
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd remix-app
  4. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://remix-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

리믹스 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 Remix 프로젝트 삭제 
    cd ..
rm -rf remix-app
  2. 리믹스 Cloud Run 서비스 삭제 
    gcloud run services delete remix-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

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)

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. SvelteKit 애플리케이션 만들기 
    npx create-svelte svelte-app
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd svelte-app
  4. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://svelte-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

SvelteKit 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 SvelteKit 프로젝트 삭제 
    cd ..
rm -rf svelte-app
  2. SvelteKit Cloud Run 서비스 삭제 
    gcloud run services delete svelte-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

12. SolidStart (Solid)

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. SolidStart 애플리케이션 만들기 
    npx create-solid solid-app
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd solid-app
  4. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://solid-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

SolidStart 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 SolidStart 프로젝트 삭제 
    cd ..
rm -rf solid-app
  2. SolidStart Cloud Run 서비스 삭제 
    gcloud run services delete solid-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

13. 천체

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. Astro 애플리케이션 만들기 
    npx create-astro astro-app
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd astro-app
  4. Node.js용 Astro 어댑터 추가 
    npx astro add node
  5. package.json에서 start 스크립트 업데이트
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://astro-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

Astro 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 Astro 프로젝트 삭제 
    cd ..
rm -rf astro-app
  2. Astro Cloud Run 서비스 삭제 
    gcloud run services delete astro-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

14. Qwik

  1. Angular 애플리케이션을 만들려는 디렉터리로 이동합니다. 
    cd ~
  2. Qwik 애플리케이션 만들기 
    npx create-qwik
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.
  3. 만든 새 프로젝트 폴더로 이동합니다. 
    cd qwik-app
  4. Cloud Run용 Qwik 어댑터 추가 
    npm run qwik add cloud-run
  5. 애플리케이션 배포 
    gcloud run deploy --allow-unauthenticated
    환경설정을 묻는 메시지가 표시되면 Enter 키를 눌러 기본값을 수락합니다.

애플리케이션 방문

배포하는 데 몇 분 정도 걸립니다. 완료되면 Cloud Run에서 다음과 같은 URL을 반환합니다.

https://qwik-app-xxxxxxxxxx-uc.a.run.app

제공된 URL을 새 브라우저 탭에서 열어 배포된 애플리케이션을 확인합니다.

Qwik 애플리케이션 스크린샷

선택사항: 정리

  1. 로컬에서 Qwik 프로젝트 삭제 
    cd ..
rm -rf qwik-app
  2. Qwik Cloud Run 서비스 삭제 
    gcloud run services delete qwik-app
    계속할지 묻는 메시지가 표시되면 Enter 키를 눌러 계속합니다.

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 프레임워크를 배포하는 방법
    • 천체
    • Qwik

16. 삭제

의도치 않은 요금이 청구되지 않도록 하려면(예: 이 Cloud Run 서비스가 무료 등급의 월별 Cloud Run 호출 할당량보다 더 많이 호출되는 경우) Cloud Run 작업을 삭제하거나 1단계에서 만든 프로젝트를 삭제하면 됩니다.

Cloud Run 서비스를 삭제하려면 https://console.cloud.google.com/run/에서 Cloud Run Cloud Console로 이동하여 Cloud Run 서비스를 삭제합니다.

전체 프로젝트를 삭제하려면 https://console.cloud.google.com/cloud-resource-manager로 이동하여 2단계에서 만든 프로젝트를 선택하고 삭제를 선택합니다. 프로젝트를 삭제하면 Cloud SDK에서 프로젝트를 변경해야 합니다. gcloud projects list를 실행하여 사용 가능한 모든 프로젝트의 목록을 볼 수 있습니다.