كيفية نشر جميع أطر عمل JavaScript على Cloud Run

1. مقدمة

نظرة عامة

في هذا الدرس التطبيقي حول الترميز، ننشر ثمانية تطبيقات JavaScript على Cloud Run:

  • العرض من جهة الخادم في Angular - استنادًا إلى Angular
  • Nuxt.js - based on Vue.js
  • ‫Next.js - استنادًا إلى React
  • ‫Remix - استنادًا إلى React
  • ‫SvelteKit - مستند إلى Svelte
  • SolidStart - based on 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. إذا ظهرت لك شاشة وسيطة، انقر على متابعة.لن يستغرق توفير Cloud Shell والاتصال به سوى بضع لحظات.
  2. نفِّذ الأمر التالي في Cloud Shell لضبط مشروع gcloud:
    gcloud config set project <PROJECT_ID>
    استبدِل <PROJECT_ID> برقم تعريف مشروعك. مثال:
    gcloud config set project js-frameworks
    إذا طُلب منك منح الإذن، انقر على منح الإذن.

3- تفعيل واجهات برمجة التطبيقات

قبل البدء في استخدام هذا الدرس العملي، عليك تفعيل العديد من واجهات برمجة التطبيقات. يتطلّب هذا الدرس التطبيقي استخدام واجهات برمجة التطبيقات التالية. يمكنك تفعيل واجهات برمجة التطبيقات هذه من خلال تنفيذ الأمر التالي:

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

بعد ذلك، يمكنك ضبط متغيرات البيئة التي سيتم استخدامها في جميع أنحاء هذا الدرس التطبيقي حول الترميز.

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 (Angular)

  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 (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- Remix (React)

  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. حذف خدمة Remix Cloud Run 
    gcloud run services delete remix-app
    عندما يُطلب منك تحديد ما إذا كنت تريد المتابعة، اضغط على المفتاح Enter للمتابعة.

10. تنظيف Cloud Shell

إذا كنت لا تستخدم Cloud Shell أو كنت تنشر تطبيقًا واحدًا فقط، تكون هذه الخطوة اختيارية

توفّر Cloud Shell دليلاً رئيسيًا ثابتًا بسعة 5 غيغابايت ويتم تشغيلها في 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. حذف خدمة 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. إضافة محوّل 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. حذف خدمة Qwik Cloud Run 
    gcloud run services delete qwik-app
    عندما يُطلب منك تحديد ما إذا كنت تريد المتابعة، اضغط على المفتاح Enter للمتابعة.

15. تهانينا!

تهانينا على إكمال هذا الدرس العملي.

ننصحك بمراجعة المستندات حول البدء السريع: النشر على Cloud Run من مستودع git حتى يمكن نشر عمليات الإنشاء المستقبلية تلقائيًا مع كل عملية دفع إلى التحكم في الإصدارات.

المواضيع التي تناولناها

  • كيفية نشر أُطر عمل JavaScript التي تتوافق مع Cloud Build تلقائيًا
    • العرض من جهة الخادم في Angular - استنادًا إلى Angular
    • Nuxt.js - based on Vue.js
    • ‫Next.js - استنادًا إلى React
    • ‫Remix - استنادًا إلى React
    • ‫SvelteKit - مستند إلى Svelte
    • SolidStart - based on 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.