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'a göre
• Nuxt.js - Vue.js tabanlı
• Next.js - React'e dayalı
• Remiks - tepkiye göre
• SvelteKit - Svelte'e göre
• 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ş yaptınız.
• Faturalandırmanın etkin olduğu ve Cloud Run'a dağıtım yapma iznine sahip bir Google Cloud projeniz var
  • Daha önce bir Cloud Run hizmeti dağıttıysanız bu işlemi doğrulayabilirsiniz. Örneğin, başlamak için kaynak kodu hızlı başlangıç kılavuzundan Node.js web hizmetini dağıtma adımlarını uygulayabilirsiniz.

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örüntülenir. Ara bir ekran görüntülendiyse Devam'ı tıklayın.Temel hazırlığı yapıp Cloud Shell'e bağlanmak yalnızca birkaç dakika sürer.
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
   

   Yetki vermeniz 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 şu 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ırın

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

gcloud config set run/region us-central1

5. Git'i yapılandırma

Bazı kitaplıklar, sürüm kontrolü için varsayılan olarak git ürününün kullanılmasını bekler. git uygulaması makinenizde zaten yapılandırılmışsa (ör. 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. Açısal SSR (Açısal)

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 birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 silme

   gcloud run services delete angular-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda Enter tuşuna basarak devam edin.

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 birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 silme

   cd ..
   rm -rf nuxt-app
   

2. Nuxt.js Cloud Run hizmetini silme

   gcloud run services delete nuxt-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda Enter tuşuna basarak devam edin.

8. Next.js (Tepki)

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 birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 Enter tuşuna basarak devam edin.

9. Remiks (Tepki)

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 birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 Enter tuşuna basarak devam edin.

10. Cloud Shell temizliği

Cloud Shell 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'lık kalıcı bir ana dizin sunar ve Google Cloud'da çalışır.

Sekiz çerçevenin tamamını Cloud Shell ile dağıtmak istiyorsanız kalan uygulamalar için alan oluşturmanız gerekir.

Cloud Shell'deki projeleri kaldırmak, dağıttığınız dağıtılmış Cloud Run hizmetlerini 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 birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 silme

   cd ..
   rm -rf svelte-app
   

2. SvelteKit Cloud Run hizmetini silme

   gcloud run services delete svelte-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda Enter tuşuna basarak devam edin.

12. Katı Başlatma (Düz)

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 birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 silme

   gcloud run services delete solid-app
   

   Devam etmek isteyip istemediğiniz sorulduğunda Enter tuşuna basarak devam edin.

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 bağdaştırıcısını ekleme

   npx astro add node
   

5. start komut dosyasını package.json uygulamasında güncelleyin

   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ığından 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 kullanılacak komutu biliyorsanız start komut dosyası olarak ayarlayın. Cloud Build, uygulamanızı start komut dosyası olarak ayarladığınız değerle çalıştırmayı dener.

Uygulamanızı ziyaret edin

Dağıtım birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 Enter tuşuna basarak devam edin.

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 adaptörü ekleme

   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, tercih ettiğiniz çerçeveyi Qwik'in yaptığı gibi dağıtmak için Dockerfile kullanabilirsiniz. Cloud Build, uygulamayı otomatik olarak dağıtmak için Buildpacks'i kullanmaya çalışmadan önce bir Dockerfile arar.

Uygulamanızı ziyaret edin

Dağıtım birkaç dakika sürecek. İşlem tamamlandığında Cloud Run aşağıdakine benzer 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 Enter tuşuna basarak devam edin.

15. Tebrikler!

Tebrikler, codelab'i tamamladınız.

Gelecekteki derlemelerinizin her sürüme aktar

İşlediğimiz konular

• Cloud Build'in otomatik olarak desteklediği JavaScript çerçevelerini dağıtma
  • Angular SSR - Angular'a göre
  • Nuxt.js - Vue.js tabanlı
  • Next.js - React'e dayalı
  • Remiks - tepkiye göre
  • SvelteKit - Svelte'e göre
  • SolidStart - Solid.js tabanlı
• Yapılandırma gerektiren JavaScript çerçeveleri nasıl dağıtılır?
  • Astro
  • Qwik

16. Temizleme

Yanlışlıkla yapılan ücretleri önlemek için (örneğin, bu Cloud Run hizmeti yanlışlıkla ücretsiz katmandaki aylık Cloud Run çağırma tahsisinizden daha fazla kez çağrıldıysa) 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 gidip 2. adımda oluşturduğunuz projeyi, ardından Sil'i seçebilirsiniz. Projeyi silerseniz Cloud SDK'nızdaki projeleri değiştirmeniz gerekir. gcloud projects list komutunu çalıştırarak mevcut tüm projelerin listesini görüntüleyebilirsiniz.