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

1. مقدمه

نمای کلی

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

  • Angular SSR - بر اساس Angular
  • Nuxt.js - بر اساس Vue.js
  • Next.js - بر اساس React
  • ریمیکس - بر اساس React
  • SvelteKit - بر اساس Svelte
  • SolidStart - بر اساس Solid.js
  • Astro
  • Qwik

اسکرین شات برنامه زاویه ایاسکرین شات برنامه Nuxt.jsاسکرین شات برنامه Next.jsاسکرین شات برنامه ریمیکساسکرین شات برنامه SvelteKitاسکرین شات برنامه SolidStartاسکرین شات اپلیکیشن Astroاسکرین شات برنامه Qwik

چیزی که یاد خواهید گرفت

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

پیش نیازها

2. Cloud Shell را فعال کنید

  1. به ترمینال Cloud Shell بروید: https://shell.cloud.google.com/?show=terminal اگر این اولین بار است که Cloud Shell را راه اندازی می کنید، یک صفحه میانی نشان داده می شود که آن را توصیف می کند. اگر یک صفحه میانی به شما نشان داده شد، روی Continue کلیک کنید. تهیه و اتصال به Cloud Shell فقط چند لحظه طول می کشد.
  2. برای تنظیم پروژه gcloud خود دستور زیر را در Cloud Shell اجرا کنید:
    gcloud config set project <PROJECT_ID>
    شناسه پروژه خود را جایگزین <PROJECT_ID> کنید. مثال:
    gcloud config set project js-frameworks
    اگر از شما خواسته شد مجوز دهید، روی تأیید کلیک کنید.

3. API ها را فعال کنید

قبل از اینکه بتوانید از این کد لبه استفاده کنید، چندین API وجود دارد که باید آنها را فعال کنید. این آزمایشگاه کد نیاز به استفاده از 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 (زاویه ای)

  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

اسکرین شات برنامه زاویه ای

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. ریمیکس (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 ارائه شده را در یک برگه مرورگر جدید باز کنید تا برنامه مستقر شده خود را مشاهده کنید.

اسکرین شات برنامه ریمیکس

پاکسازی اختیاری

  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 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. تبریک می گویم!

برای تکمیل کد لبه تبریک می گویم!

توصیه می‌کنیم مستندات مربوط به Quickstart را مرور کنید: Deploy to Cloud Run از یک مخزن git به طوری که ساخت‌های آینده شما بتوانند به طور خودکار با هر فشار به کنترل نسخه مستقر شوند.

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

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

16. پاکسازی کنید

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

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

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