نحوه استقرار تمام چارچوب های جاوا اسکریپت در Cloud Run

۱. مقدمه

نمای کلی

در این آزمایشگاه کد، هشت برنامه جاوا اسکریپت را در Cloud Run مستقر کنید:

• Angular SSR - مبتنی بر Angular
• Nuxt.js - مبتنی بر Vue.js
• Next.js - مبتنی بر React
• ریمیکس - مبتنی بر React
• SvelteKit - مبتنی بر Svelte
• SolidStart - مبتنی بر Solid.js
• آسترو
• کوئیک

آنچه یاد خواهید گرفت

• نحوه استقرار چارچوب‌های جاوا اسکریپت که Cloud Build به طور خودکار پشتیبانی می‌کند
• نحوه استقرار چارچوب‌های جاوا اسکریپت که نیاز به پیکربندی دارند

پیش‌نیازها

• شما وارد ترمینال Cloud Shell شده‌اید.
• شما یک پروژه Google Cloud با قابلیت پرداخت فعال و مجوز استقرار در Cloud Run دارید.
  • اگر قبلاً یک سرویس Cloud Run را مستقر کرده‌اید، می‌توانید این موضوع را تأیید کنید. برای مثال، می‌توانید برای شروع، شروع سریع راه‌اندازی یک سرویس وب Node.js از کد منبع را دنبال کنید.

۲. فعال کردن پوسته ابری

1. به ترمینال Cloud Shell بروید: https://shell.cloud.google.com/?show=terminal اگر این اولین بار است که Cloud Shell را اجرا می‌کنید، یک صفحه میانی برای توضیح ماهیت آن به شما نمایش داده می‌شود. اگر با یک صفحه میانی مواجه شدید، روی ادامه کلیک کنید. آماده‌سازی و اتصال به Cloud Shell فقط چند لحظه طول می‌کشد.
2. برای تنظیم پروژه gcloud خود، دستور زیر را در Cloud Shell اجرا کنید:

   gcloud config set project <PROJECT_ID>
   

   به جای <PROJECT_ID> ، شناسه پروژه خود را قرار دهید. مثال:

   gcloud config set project js-frameworks
   

   اگر از شما خواسته شد که مجوز دهید، روی «مجوز دادن» کلیک کنید.

۳. فعال کردن APIها

قبل از اینکه بتوانید از این codelab استفاده کنید، باید چندین API را فعال کنید. این codelab به استفاده از APIهای زیر نیاز دارد. می‌توانید با اجرای دستور زیر این APIها را فعال کنید:

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

سپس می‌توانید متغیرهای محیطی را که در سراسر این آزمایشگاه کد استفاده خواهند شد، تنظیم کنید.

۴. پیکربندی منطقه پیش‌فرض

شما می‌توانید منطقه را برای هر استقرار به صورت جداگانه تنظیم کنید. این دستور منطقه پیش‌فرض را روی us-central1 تنظیم می‌کند، بنابراین نیازی نیست آن را برای هر کدام تنظیم کنید.

gcloud config set run/region us-central1

۵. پیکربندی گیت

برخی از کتابخانه‌ها انتظار دارند که git به طور پیش‌فرض برای کنترل نسخه استفاده شود. اگر از قبل git روی دستگاه خود پیکربندی کرده‌اید (مثلاً: این آزمایشگاه را به صورت محلی اجرا می‌کنید)، نیازی به اجرای این مراحل ندارید.

git config --global user.email "[e-mail]"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. SSR زاویه‌ای (زاویه‌دار)

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 آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://angular-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه Angular را به صورت محلی حذف کنید

   cd ..
   rm -rf angular-app
   

2. سرویس Angular Cloud Run را حذف کنید

   gcloud run services delete angular-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۷. 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 آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه Nuxt.js را به صورت محلی حذف کنید

   cd ..
   rm -rf nuxt-app
   

2. سرویس Nuxt.js Cloud Run را حذف کنید

   gcloud run services delete nuxt-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۸. 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 آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://next-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه Next.js را به صورت محلی حذف کنید

   cd ..
   rm -rf next-app
   

2. سرویس Next.js Cloud Run را حذف کنید

   gcloud run services delete next-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۹. ریمیکس (واکنش)

1. به دایرکتوری که می‌خواهید برنامه Angular خود را در آن ایجاد کنید، بروید.

   cd ~
   

2. یک برنامه ریمیکس ایجاد کنید

   npx create-remix remix-app
   

   وقتی از شما خواسته شد تنظیمات برگزیده خود را وارد کنید، کلید Enter را فشار دهید تا پیش‌فرض‌ها را بپذیرید.
3. به پوشه پروژه جدیدی که ایجاد کرده‌اید بروید

   cd remix-app
   

4. برنامه را مستقر کنید

   gcloud run deploy --allow-unauthenticated
   

   وقتی از شما خواسته شد تنظیمات برگزیده خود را وارد کنید، کلید Enter را فشار دهید تا پیش‌فرض‌ها را بپذیرید.

به اپلیکیشن خود مراجعه کنید

استقرار چند دقیقه طول می‌کشد. پس از اتمام، Cloud Run آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://remix-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه Remix را به صورت محلی حذف کنید

   cd ..
   rm -rf remix-app
   

2. سرویس Remix Cloud Run را حذف کنید

   gcloud run services delete remix-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۱۰. پاکسازی پوسته ابری

اگر از Cloud Shell استفاده نمی‌کنید یا فقط یک برنامه واحد را مستقر می‌کنید، این مرحله اختیاری است.

Cloud Shell یک دایرکتوری خانگی پایدار ۵ گیگابایتی ارائه می‌دهد و در 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/

۱۱. اسولت کیت (اسولت)

1. به دایرکتوری که می‌خواهید برنامه Angular خود را در آن ایجاد کنید، بروید.

   cd ~
   

2. ایجاد یک برنامه SvelteKit

   npx create-svelte svelte-app
   

   وقتی از شما خواسته شد تنظیمات برگزیده خود را وارد کنید، کلید Enter را فشار دهید تا پیش‌فرض‌ها را بپذیرید.
3. به پوشه پروژه جدیدی که ایجاد کرده‌اید بروید

   cd svelte-app
   

4. برنامه را مستقر کنید

   gcloud run deploy --allow-unauthenticated
   

   وقتی از شما خواسته شد تنظیمات برگزیده خود را وارد کنید، کلید Enter را فشار دهید تا پیش‌فرض‌ها را بپذیرید.

به اپلیکیشن خود مراجعه کنید

استقرار چند دقیقه طول می‌کشد. پس از اتمام، Cloud Run آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://svelte-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه SvelteKit را به صورت محلی حذف کنید

   cd ..
   rm -rf svelte-app
   

2. سرویس SvelteKit Cloud Run را حذف کنید

   gcloud run services delete svelte-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۱۲. سالیداستارت (سالید)

1. به دایرکتوری که می‌خواهید برنامه Angular خود را در آن ایجاد کنید، بروید.

   cd ~
   

2. ایجاد یک برنامه SolidStart

   npx create-solid solid-app
   

   وقتی از شما خواسته شد تنظیمات برگزیده خود را وارد کنید، کلید Enter را فشار دهید تا پیش‌فرض‌ها را بپذیرید.
3. به پوشه پروژه جدیدی که ایجاد کرده‌اید بروید

   cd solid-app
   

4. برنامه را مستقر کنید

   gcloud run deploy --allow-unauthenticated
   

   وقتی از شما خواسته شد تنظیمات برگزیده خود را وارد کنید، کلید Enter را فشار دهید تا پیش‌فرض‌ها را بپذیرید.

به اپلیکیشن خود مراجعه کنید

استقرار چند دقیقه طول می‌کشد. پس از اتمام، Cloud Run آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://solid-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه SolidStart را به صورت محلی حذف کنید

   cd ..
   rm -rf solid-app
   

2. سرویس SolidStart Cloud Run را حذف کنید

   gcloud run services delete solid-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۱۳. آسترو

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 را فشار دهید تا پیش‌فرض‌ها را بپذیرید.

توجه: Astro به طور خودکار توسط Cloud Run پشتیبانی نمی‌شود زیرا Astro به طور پیش‌فرض از محیط Node.js استفاده نمی‌کند. دستور npm pkg set در بالا، اسکریپت start را در package.json به HOST=0.0.0.0 node ./dist/server/entry.mjs به‌روزرسانی می‌کند. اگر آن دستور را برای شروع برنامه خود می‌دانید، آن را به عنوان اسکریپت start تنظیم کنید. Cloud Build سعی می‌کند برنامه شما را با هر چیزی که به عنوان اسکریپت start تنظیم کرده‌اید، اجرا کند.

به اپلیکیشن خود مراجعه کنید

استقرار چند دقیقه طول می‌کشد. پس از اتمام، Cloud Run آدرس اینترنتی مانند زیر را برمی‌گرداند:

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 را برای ادامه فشار دهید.

۱۴. کوئیک

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 را فشار دهید تا پیش‌فرض‌ها را بپذیرید.

توجه: Qwik از یک Dockerfile برای مشخص کردن نحوه ساخت و اجرای پروژه استفاده می‌کند. اگر چارچوبی که انتخاب می‌کنید به طور خودکار توسط Cloud Run پشتیبانی نمی‌شود، می‌توانید از یک Dockerfile برای استقرار چارچوب مورد نظر خود مانند Qwik استفاده کنید. Cloud Build قبل از تلاش برای استفاده از Buildpacks برای استقرار خودکار برنامه، به دنبال یک Dockerfile می‌گردد.

به اپلیکیشن خود مراجعه کنید

استقرار چند دقیقه طول می‌کشد. پس از اتمام، Cloud Run آدرس اینترنتی مانند زیر را برمی‌گرداند:

https://qwik-app-xxxxxxxxxx-uc.a.run.app

برای مشاهده برنامه اجرا شده، URL ارائه شده را در یک برگه مرورگر جدید باز کنید.

تمیز کردن اختیاری

1. پروژه Qwik را به صورت محلی حذف کنید

   cd ..
   rm -rf qwik-app
   

2. سرویس Qwik Cloud Run را حذف کنید

   gcloud run services delete qwik-app
   

   وقتی از شما پرسیده شد که آیا مایل به ادامه هستید، کلید Enter را برای ادامه فشار دهید.

۱۵. تبریک می‌گویم!

تبریک می‌گویم که آزمایشگاه کد را تمام کردید!

توصیه می‌کنیم مستندات Quickstart: Deploy to Cloud Run را از یک مخزن گیت بررسی کنید تا نسخه‌های بعدی شما بتوانند به طور خودکار با هر بار اعمال کنترل نسخه، پیاده‌سازی شوند.

آنچه ما پوشش دادیم

• نحوه استقرار چارچوب‌های جاوا اسکریپت که Cloud Build به طور خودکار پشتیبانی می‌کند
  • Angular SSR - مبتنی بر Angular
  • Nuxt.js - مبتنی بر Vue.js
  • Next.js - مبتنی بر React
  • ریمیکس - مبتنی بر React
  • SvelteKit - مبتنی بر Svelte
  • SolidStart - مبتنی بر Solid.js
• نحوه استقرار چارچوب‌های جاوا اسکریپت که نیاز به پیکربندی دارند
  • آسترو
  • کوئیک

۱۶. تمیز کردن

برای جلوگیری از هزینه‌های ناخواسته، (برای مثال، اگر این سرویس Cloud Run سهواً بیشتر از تخصیص فراخوانی ماهانه Cloud Run شما در سطح رایگان فراخوانی شود)، می‌توانید کار Cloud Run یا پروژه‌ای را که در مرحله 1 ایجاد کرده‌اید، حذف کنید.

برای حذف سرویس‌های Cloud Run، به کنسول ابری Cloud Run در آدرس https://console.cloud.google.com/run/ بروید و سرویس‌های Cloud Run را حذف کنید.

اگر تصمیم به حذف کل پروژه دارید، می‌توانید به آدرس https://console.cloud.google.com/cloud-resource-manager بروید، پروژه‌ای را که در مرحله ۲ ایجاد کرده‌اید انتخاب کنید و گزینه Delete را انتخاب کنید. اگر پروژه را حذف کنید، باید پروژه‌ها را در Cloud SDK خود تغییر دهید. می‌توانید با اجرای gcloud projects list لیست تمام پروژه‌های موجود را مشاهده کنید.