Tüm JavaScript çerçevelerini Cloud Run'a dağıtma

1. Giriş

Genel Bakış

Bu codelab'de sekiz JavaScript uygulamasını Cloud Run'a dağıtın:

• Angular SSR - Angular tabanlı
• Nuxt.js - Vue.js tabanlı
• Next.js - React tabanlı
• Remix - React tabanlı
• SvelteKit - Svelte tabanlı
• SolidStart - Solid.js tabanlı
• Astro
• Qwik

Neler öğreneceksiniz?

• Cloud Build'in otomatik olarak desteklediği JavaScript çerçevelerini dağıtma
• Yapılandırma gerektiren JavaScript çerçevelerini dağıtma

Ön koşullar

• Cloud Shell terminaline giriş yapmış olmanız gerekir.
• Faturalandırmanın etkin olduğu bir Google Cloud projeniz ve Cloud Run'a dağıtım yapma izniniz olmalıdır.
  • Daha önce bir Cloud Run hizmeti dağıttıysanız bunu onaylayabilirsiniz. Örneğin, başlamak için kaynak kodundan Node.js web hizmeti dağıtma hızlı başlangıç kılavuzunu inceleyebilirsiniz.

2. Cloud Shell'i etkinleştirme

1. Cloud Shell terminaline gidin: https://shell.cloud.google.com/?show=terminalCloud Shell'i ilk kez başlatıyorsanız ne olduğunu açıklayan bir ara ekran gösterilir. Ara ekran gösterildiyse Devam'ı tıklayın.Cloud Shell'in temel hazırlığı ve bağlanması yalnızca birkaç dakikanızı alır.
2. gcloud projenizi ayarlamak için Cloud Shell'de aşağıdaki komutu çalıştırın:

   gcloud config set project <PROJECT_ID>
   

   <PROJECT_ID> kısmını proje kimliğinizle değiştirin. Örnek:

   gcloud config set project js-frameworks
   

   Yetkilendirme istenirse Yetkilendir'i tıklayın.

3. API'leri etkinleştir

Bu codelab'i kullanmaya başlamadan önce etkinleştirmeniz gereken birkaç API vardır. Bu codelab'de aşağıdaki API'lerin kullanılması gerekir. Bu API'leri aşağıdaki komutu çalıştırarak etkinleştirebilirsiniz:

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

Ardından, bu codelab boyunca kullanılacak ortam değişkenlerini ayarlayabilirsiniz.

4. Varsayılan bölgeyi yapılandırma

Bölgeyi her dağıtım için ayrı ayrı ayarlayabilirsiniz. Bu komut, varsayılan bölgeyi us-central1 olarak ayarlar. Böylece her biri için ayrı ayrı ayarlamanız gerekmez.

gcloud config set run/region us-central1

5. Git'i yapılandırma

Bazı kitaplıklar, sürüm denetimi için varsayılan olarak git kullanılmasını bekler. Makinenizde git zaten yapılandırılmışsa (örneğin, bu laboratuvarı yerel olarak çalıştırıyorsanız) bu adımları uygulamanız gerekmez.

git config --global user.email "[e-mail]"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. Angular SSR (Angular)

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. Sunucu tarafı oluşturma (SSR) kullanan bir Angular uygulaması oluşturma

   npx @angular/cli new angular-app --ssr
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd angular-app
   

4. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. Angular projesini yerel olarak silme

   cd ..
   rm -rf angular-app
   

2. Angular Cloud Run hizmetini silin.

   gcloud run services delete angular-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

7. Nuxt.js (Vue.js)

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. Nuxt.js uygulaması oluşturma

   npx nuxi init nuxt-app
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd nuxt-app
   

4. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. Nuxt.js projesini yerel olarak silin.

   cd ..
   rm -rf nuxt-app
   

2. Nuxt.js Cloud Run hizmetini silin.

   gcloud run services delete nuxt-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

8. Next.js (React)

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. Next.js uygulaması oluşturma

   npx create-next-app next-app
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd next-app
   

4. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. Next.js projesini yerel olarak silme

   cd ..
   rm -rf next-app
   

2. Next.js Cloud Run hizmetini silme

   gcloud run services delete next-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

9. Remix (React)

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. Remiks uygulaması oluşturma

   npx create-remix remix-app
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd remix-app
   

4. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. Remiks projesini yerel olarak silme

   cd ..
   rm -rf remix-app
   

2. Remix Cloud Run hizmetini silme

   gcloud run services delete remix-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

10. Cloud Shell'i temizleme

Cloud Shell'i kullanmıyorsanız veya yalnızca tek bir uygulama dağıtıyorsanız bu adım isteğe bağlıdır.

Cloud Shell, 5 GB boyutunda kalıcı bir ana dizin sunar ve Google Cloud'da çalışır.

Sekiz framework'ün tamamını Cloud Shell ile dağıtmak için kalan uygulamalara yer açmanız gerekir.

Cloud Shell'deki projelerin kaldırılması, dağıtılmış Cloud Run hizmetlerinizi silmez.

Daha önce oluşturduğunuz uygulamaları temizlemek için şu komutları çalıştırın:

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. SvelteKit uygulaması oluşturma

   npx create-svelte svelte-app
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd svelte-app
   

4. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. SvelteKit projesini yerel olarak silin.

   cd ..
   rm -rf svelte-app
   

2. SvelteKit Cloud Run hizmetini silme

   gcloud run services delete svelte-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

12. SolidStart (Solid)

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. SolidStart uygulaması oluşturma

   npx create-solid solid-app
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd solid-app
   

4. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. SolidStart projesini yerel olarak silin.

   cd ..
   rm -rf solid-app
   

2. SolidStart Cloud Run hizmetini silin.

   gcloud run services delete solid-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

13. Astro

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. Astro uygulaması oluşturma

   npx create-astro astro-app
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd astro-app
   

4. Node.js için Astro adaptörünü ekleyin

   npx astro add node
   

5. package.json hizmetindeki start komut dosyasını güncelleme

   npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
   

6. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Not: Astro, varsayılan olarak Node.js ortamını kullanmadığı için Cloud Run tarafından otomatik olarak desteklenmez. Yukarıdaki npm pkg set komutu, package.json içindeki start komut dosyasını HOST=0.0.0.0 node ./dist/server/entry.mjs olarak günceller. Uygulamanızı başlatmak için hangi komutu kullanacağınızı biliyorsanız bunu start komut dosyası olarak ayarlayın. Cloud Build, uygulamanızı start komut dosyası olarak ayarladığınız değerle çalıştırmaya çalışır.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. Astro projesini yerel olarak silme

   cd ..
   rm -rf astro-app
   

2. Astro Cloud Run hizmetini silme

   gcloud run services delete astro-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

14. Qwik

1. Angular uygulamanızı oluşturmak istediğiniz dizine gidin.

   cd ~
   

2. Qwik uygulaması oluşturma

   npx create-qwik
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.
3. Oluşturduğunuz yeni proje klasörüne gidin.

   cd qwik-app
   

4. Cloud Run için Qwik bağdaştırıcısını ekleyin

   npm run qwik add cloud-run
   

5. Uygulamayı dağıtın

   gcloud run deploy --allow-unauthenticated
   

   Tercihleriniz istendiğinde varsayılanları kabul etmek için Enter tuşuna basın.

Not: Qwik, projenin nasıl oluşturulacağını ve çalıştırılacağını belirtmek için Dockerfile kullanır. Seçtiğiniz çerçeve Cloud Run tarafından otomatik olarak desteklenmiyorsa Qwik'te olduğu gibi tercih ettiğiniz çerçeveyi dağıtmak için bir Dockerfile kullanabilirsiniz. Cloud Build, uygulamayı otomatik olarak dağıtmak için Buildpack'leri kullanmaya çalışmadan önce Dockerfile arar.

Uygulamanızı ziyaret edin

Dağıtım işlemi birkaç dakika sürer. İşlem tamamlandığında Cloud Run aşağıdaki gibi bir URL döndürür:

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

Dağıtılan uygulamanızı görüntülemek için sağlanan URL'yi yeni bir tarayıcı sekmesinde açın.

İsteğe bağlı temizleme

1. Qwik projesini yerel olarak silme

   cd ..
   rm -rf qwik-app
   

2. Qwik Cloud Run hizmetini silme

   gcloud run services delete qwik-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda devam etmek için Enter tuşuna basın.

15. Tebrikler!

Tebrikler, codelab'i tamamladınız.

Gelecekteki derlemelerinizin sürüm denetimine her gönderimde otomatik olarak dağıtılabilmesi için Hızlı Başlangıç: Git deposundan Cloud Run'a dağıtma başlıklı dokümanı incelemenizi öneririz.

İşlediğimiz konular

• Cloud Build'in desteklediği JavaScript çerçevelerini otomatik olarak dağıtma
  • Angular SSR - Angular tabanlı
  • Nuxt.js - Vue.js tabanlı
  • Next.js - React tabanlı
  • Remix - React tabanlı
  • SvelteKit - Svelte tabanlı
  • SolidStart - Solid.js tabanlı
• Yapılandırma gerektiren JavaScript çerçevelerini dağıtma
  • Astro
  • Qwik

16. Temizleme

Yanlışlıkla ücretlendirilmemek için (örneğin, bu Cloud Run hizmeti ücretsiz katmandaki aylık Cloud Run çağırma tahsisinizden daha fazla kez yanlışlıkla çağrılırsa) Cloud Run işini veya 1. adımda oluşturduğunuz projeyi silebilirsiniz.

Cloud Run hizmetlerini silmek için https://console.cloud.google.com/run/ adresinden Cloud Run Cloud Console'a gidip Cloud Run hizmetlerini silin.

Projenin tamamını silmeyi tercih ederseniz https://console.cloud.google.com/cloud-resource-manager adresine gidebilir, 2. adımda oluşturduğunuz projeyi seçip Sil'i tıklayabilirsiniz. Projeyi silerseniz Cloud SDK'nızda projeleri değiştirmeniz gerekir. gcloud projects list komutunu çalıştırarak kullanılabilir tüm projelerin listesini görüntüleyebilirsiniz.