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

1. מבוא

סקירה כללית

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

  • SSR זוויתי – מבוסס על Angular
  • Nuxt.js - מבוסס על Vue.js
  • Next.js – על סמך React
  • רמיקס – על סמך תגובה
  • SvelteKit – מבוסס על Svelte
  • SolidStart – על סמך Solid.js
  • Astro
  • Qwik

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

מה תלמדו

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

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

2. הפעלת Cloud Shell

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

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. SSR זוויתי (אנגלי)

  1. עוברים אל הספרייה שבה רוצים ליצור את אפליקציית Angular. 
    cd ~
  2. יוצרים אפליקציה של Angular שמשתמשת ברינדור בצד השרת (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 (תגובה)

  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. רמיקס (תגובה)

  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. מחיקה מקומית של פרויקט הרמיקס 
    cd ..
rm -rf remix-app
  2. מחיקת השירות Remix Cloud Run 
    gcloud run services delete remix-app
    כשמוצגת הנחיה אם רוצים להמשיך, לוחצים על המקש Enter כדי להמשיך.

10. ניקוי ב-Cloud Shell

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

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

כדי לפרוס את כל 8 ה-frameworks באמצעות 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. מחיקת שירות 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. Astro

  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 שסופקה בכרטיסייה חדשה בדפדפן כדי לראות את האפליקציה שנפרסה.

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

הסרת המשאבים האופציונלית

  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. מחיקת השירות Qwik Cloud Run 
    gcloud run services delete qwik-app
    כשמוצגת הנחיה אם רוצים להמשיך, לוחצים על המקש Enter כדי להמשיך.

15. מעולה!

מזל טוב, השלמת את Codelab!

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

הנושאים שעליהם דיברנו

  • איך פורסים frameworks של JavaScript ש-Cloud Build תומך בהן באופן אוטומטי
    • SSR זוויתי – מבוסס על Angular
    • Nuxt.js - מבוסס על Vue.js
    • Next.js – על סמך React
    • רמיקס – על סמך תגובה
    • SvelteKit – מבוסס על Svelte
    • SolidStart – על סמך Solid.js
  • איך לפרוס מסגרות JavaScript שמחייבות הגדרה
    • Astro
    • 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.