איך לפרוס את כל ה-frameworks של JavaScript ל-Cloud Run

1. מבוא

סקירה כללית

ב-Codelab זה, פורסים שמונה אפליקציות JavaScript ב-Cloud Run:

  • ‫Angular SSR – מבוסס על Angular
  • ‫Nuxt.js – מבוסס על Vue.js
  • ‫Next.js – מבוסס על React
  • ‫Remix – מבוסס על React
  • SvelteKit – מבוסס על Svelte
  • ‫SolidStart – מבוסס על Solid.js
  • צילום אסטרונומי
  • Qwik

צילום מסך של אפליקציית Angularצילום מסך של אפליקציית Nuxt.jsצילום מסך של אפליקציית Next.jsצילום מסך של אפליקציית Remixצילום מסך של אפליקציית SvelteKitצילום מסך של אפליקציית SolidStartצילום מסך של אפליקציית Astroצילום מסך של אפליקציית Qwik

מה תלמדו

  • איך פורסים באופן אוטומטי מסגרות JavaScript ש-Cloud Build תומך בהן
  • איך פורסים מסגרות JavaScript שדורשות הגדרה

דרישות מוקדמות

2. הפעלת Cloud Shell

  1. עוברים לטרמינל של Cloud Shell: https://shell.cloud.google.com/?show=terminal אם זו הפעם הראשונה שאתם מפעילים את Cloud Shell, יוצג לכם מסך ביניים עם תיאור של Cloud Shell. אם מוצג לכם מסך ביניים, לוחצים על Continue (המשך). הקצאת המשאבים וחיבור ל-Cloud Shell אמורים להימשך רק כמה רגעים.
  2. מריצים את הפקודה הבאה ב-Cloud Shell כדי להגדיר את פרויקט gcloud:
    ‫
    gcloud config set project <PROJECT_ID>
    מחליפים את <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)

  1. עוברים לספרייה שבה רוצים ליצור את אפליקציית Angular. 
    cd ~
  2. יצירת אפליקציית Angular שמשתמשת ב-Server Side Rendering‏ (SSR) 
    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. מחיקת שירות Cloud Run של Next.js 
    gcloud run services delete next-app
    כשמוצגת השאלה אם רוצים להמשיך, מקישים על המקש Enter כדי להמשיך.

9. רמיקס (תגובה)

  1. עוברים לספרייה שבה רוצים ליצור את אפליקציית Angular. 
    cd ~
  2. יצירת אפליקציית Remix 
    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 שסופקה בכרטיסייה חדשה בדפדפן כדי לראות את האפליקציה שפרסתם.

צילום מסך של אפליקציית Remix

ניקוי אופציונלי

  1. מחיקת פרויקט הרמיקס באופן מקומי 
    cd ..
rm -rf remix-app
  2. מחיקת שירות Cloud Run של Remix 
    gcloud run services delete remix-app
    כשמוצגת השאלה אם רוצים להמשיך, מקישים על המקש Enter כדי להמשיך.

10. ניקוי של Cloud Shell

אם אתם לא משתמשים ב-Cloud Shell או שאתם פורסים רק אפליקציה אחת, השלב הזה הוא אופציונלי

ב-Cloud Shell יש ספריית בית בנפח מתמיד של 5GB והיא פועלת ב-Google Cloud.

כדי לפרוס את כל שמונה המסגרות באמצעות Cloud Shell, תצטרכו ליצור מקום לאפליקציות שנותרו.

הסרת הפרויקטים ב-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. מחיקת שירות Cloud Run של SvelteKit 
    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. הוספת מתאם Astro ל-Node.js 
    npx astro add node
  5. עדכון הסקריפט start ב-package.json
    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. הוספת מתאם Qwik ל-Cloud Run 
    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. מחיקת שירות Cloud Run של Qwik 
    gcloud run services delete qwik-app
    כשמוצגת השאלה אם רוצים להמשיך, מקישים על המקש Enter כדי להמשיך.

15. מעולה!

כל הכבוד, סיימתם את ה-Codelab!

מומלץ לעיין במאמרי העזרה בנושא מדריך למתחילים: פריסה ב-Cloud Run ממאגר git כדי שהפריסות שלכם בעתיד יתבצעו אוטומטית בכל פעם שתבצעו push לניהול הגרסאות.

מה כיסינו

  • איך פורסים באופן אוטומטי מסגרות JavaScript ש-Cloud Build תומך בהן
    • ‫Angular SSR – מבוסס על Angular
    • ‫Nuxt.js – מבוסס על Vue.js
    • ‫Next.js – מבוסס על React
    • ‫Remix – מבוסס על React
    • SvelteKit – מבוסס על Svelte
    • ‫SolidStart – מבוסס על Solid.js
  • איך פורסים מסגרות JavaScript שדורשות הגדרה
    • צילום אסטרונומי
    • Qwik

16. הסרת המשאבים

כדי להימנע מחיובים לא מכוונים (לדוגמה, אם שירות Cloud Run הזה מופעל בטעות יותר פעמים מההקצאה החודשית של הפעלות Cloud Run בחבילה ללא תשלום), אפשר למחוק את משימת Cloud Run או את הפרויקט שיצרתם בשלב 1.

כדי למחוק את שירותי Cloud Run, נכנסים אל Cloud Run Cloud Console בכתובת https://console.cloud.google.com/run/ ומוחקים את שירותי Cloud Run.

אם אתם רוצים למחוק את הפרויקט כולו, אתם יכולים להיכנס לכתובת https://console.cloud.google.com/cloud-resource-manager, לבחור את הפרויקט שיצרתם בשלב 2 וללחוץ על 'מחיקה'. אם תמחקו את הפרויקט, תצטרכו לשנות את הפרויקטים ב-Cloud SDK. כדי לראות את רשימת כל הפרויקטים הזמינים, מריצים את הפקודה gcloud projects list.