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

1. مقدمة

نظرة عامة

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

  • Angular SSR - استنادًا إلى Angular
  • Nuxt.js - استنادًا إلى Vue.js
  • Next.js - استنادًا إلى React
  • إنشاء ريمكس استنادًا إلى React
  • SvelteKit - بناءً على Svelte
  • SolidStart - استنادًا إلى Solid.js
  • Astro
  • 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 بضع دقائق فقط.
  2. نفِّذ الأمر التالي في Cloud Shell لضبط مشروع gcloud:
    gcloud config set project <PROJECT_ID>
    استبدِل &lt;PROJECT_ID&gt; برقم تعريف مشروعك. مثال:
    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 SSR (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 (التفاعل)

  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. إنشاء تطبيق 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. حذف مشروع Remix على الجهاز 
    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. 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 المقدَّم في علامة تبويب متصفِّح جديدة لعرض التطبيق المنشور.

لقطة شاشة لتطبيق 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 
    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. تهانينا

تهانينا على إكمال الدرس التطبيقي حول الترميز.

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

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

  • طريقة نشر أُطر عمل JavaScript التي تتوافق مع Cloud Build تلقائيًا
    • Angular SSR - استنادًا إلى Angular
    • Nuxt.js - استنادًا إلى Vue.js
    • Next.js - استنادًا إلى React
    • إنشاء ريمكس استنادًا إلى React
    • SvelteKit - بناءً على Svelte
    • SolidStart - استنادًا إلى Solid.js
  • كيفية نشر أُطر عمل JavaScript التي تتطلّب الضبط
    • Astro
    • Qwik

16. تَنظيم

لتجنب تحصيل رسوم غير مقصودة، (على سبيل المثال، إذا تم استدعاء خدمة Cloud Run هذه بدون قصد مرات أكثر من تخصيص استدعاء Cloud Run الشهري في الفئة المجانية)، يمكنك إما حذف مهمة Cloud Run أو حذف المشروع الذي أنشأته في الخطوة 1.

لحذف خدمات التشغيل في السحابة الإلكترونية، انتقل إلى Cloud Run Console على الرابط https://console.cloud.google.com/run/ واحذف خدمات التشغيل في السحابة الإلكترونية.

إذا اخترت حذف المشروع بالكامل، يمكنك الانتقال إلى https://console.cloud.google.com/cloud-resource-manager، واختيار المشروع الذي أنشأته في الخطوة الثانية، ثم اختيار "حذف". إذا حذفت المشروع، ستحتاج إلى تغيير المشاريع في حزمة تطوير البرامج (SDK) للسحابة الإلكترونية. يمكنك عرض قائمة بجميع المشاريع المتاحة من خلال تشغيل gcloud projects list.