सभी JavaScript फ़्रेमवर्क को Cloud Run पर डिप्लॉय करने का तरीका

1. परिचय

खास जानकारी

इस कोडलैब में, JavaScript के आठ ऐप्लिकेशन को Cloud Run में डिप्लॉय करना सीखें:

  • ऐंगुलर एसएसआर - ऐंगुलर पर आधारित
  • Nuxt.js - Vue.js पर आधारित
  • Next.js - React पर आधारित
  • Remix - React पर आधारित
  • SvelteKit - Svelte पर आधारित
  • SolidStart - Solid.js पर आधारित
  • एस्ट्रो
  • Qwik

Angular ऐप्लिकेशन का स्क्रीनशॉटNuxt.js ऐप्लिकेशन का स्क्रीनशॉटNext.js ऐप्लिकेशन का स्क्रीनशॉटरीमिक्स ऐप्लिकेशन का स्क्रीनशॉटSvelteKit ऐप्लिकेशन का स्क्रीनशॉटSolidStart ऐप्लिकेशन का स्क्रीनशॉटAstro ऐप्लिकेशन का स्क्रीनशॉटQwik ऐप्लिकेशन का स्क्रीनशॉट

आपको क्या सीखने को मिलेगा

  • Cloud Build में अपने-आप काम करने वाले JavaScript फ़्रेमवर्क को डिप्लॉय करने का तरीका
  • कॉन्फ़िगरेशन की ज़रूरत वाले JavaScript फ़्रेमवर्क को डिप्लॉय करने का तरीका

ज़रूरी शर्तें

2. Cloud Shell चालू करें

  1. Cloud Shell टर्मिनल पर जाएं: https://shell.cloud.google.com/?show=terminalअगर आपने पहली बार Cloud Shell शुरू किया है, तो आपको एक इंटरमीडिएट स्क्रीन दिखेगी. इसमें Cloud Shell के बारे में जानकारी दी गई होगी. अगर आपको इंटरमीडिएट स्क्रीन दिखती है, तो जारी रखें पर क्लिक करें.Cloud Shell को चालू होने और कनेक्ट होने में कुछ ही समय लगेगा.
  2. अपने gcloud प्रोजेक्ट को सेट करने के लिए, Cloud Shell में यह कमांड चलाएं:
    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. ऐंगुलर एसएसआर (ऐंगुलर)

  1. उस डायरेक्ट्री पर जाएं जहां आपको Angular ऐप्लिकेशन बनाना है 
    cd ~
  2. सर्वर साइड रेंडरिंग (एसएसआर) का इस्तेमाल करने वाला Angular ऐप्लिकेशन बनाना 
    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

Angular ऐप्लिकेशन का स्क्रीनशॉट

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

वैकल्पिक तौर पर साफ़ करना

  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 इस तरह का यूआरएल दिखाएगा:

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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

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 इस तरह का यूआरएल दिखाएगा:

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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

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. रीमिक्स ऐप्लिकेशन बनाना 
    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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

रीमिक्स ऐप्लिकेशन का स्क्रीनशॉट

चैनल पर बिना अनुमति के की गई गतिविधियों को मिटाना (ज़रूरी नहीं)

  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 इस तरह का यूआरएल दिखाएगा:

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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

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 इस तरह का यूआरएल दिखाएगा:

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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

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. Node.js के लिए Astro अडैप्टर जोड़ना 
    npx astro add node
  5. package.json में start स्क्रिप्ट को अपडेट करना
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. ऐप्लिकेशन डिप्लॉय करना 
    gcloud run deploy --allow-unauthenticated
    जब आपसे आपकी प्राथमिकताओं के बारे में पूछा जाए, तो डिफ़ॉल्ट सेटिंग स्वीकार करने के लिए Enter बटन दबाएं.

अपने आवेदन पर जाएं

इसे डिप्लॉय होने में कुछ मिनट लगेंगे. प्रोसेस पूरी होने के बाद, Cloud Run इस तरह का यूआरएल दिखाएगा:

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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

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. Cloud Run के लिए Qwik अडैप्टर जोड़ना 
    npm run qwik add cloud-run
  5. ऐप्लिकेशन डिप्लॉय करना 
    gcloud run deploy --allow-unauthenticated
    जब आपसे आपकी प्राथमिकताओं के बारे में पूछा जाए, तो डिफ़ॉल्ट सेटिंग स्वीकार करने के लिए Enter बटन दबाएं.

अपने आवेदन पर जाएं

इसे डिप्लॉय होने में कुछ मिनट लगेंगे. प्रोसेस पूरी होने के बाद, Cloud Run इस तरह का यूआरएल दिखाएगा:

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

डिप्लॉय किए गए ऐप्लिकेशन को देखने के लिए, दिए गए यूआरएल को नए ब्राउज़र टैब में खोलें.

Qwik ऐप्लिकेशन का स्क्रीनशॉट

चैनल पर बिना अनुमति के की गई गतिविधियों को मिटाना (ज़रूरी नहीं)

  1. Qwik प्रोजेक्ट को स्थानीय तौर पर मिटाना 
    cd ..
rm -rf qwik-app
  2. Qwik Cloud Run सेवा मिटाना 
    gcloud run services delete qwik-app
    जब आपसे पूछा जाए कि क्या आपको जारी रखना है, तो जारी रखने के लिए Enter बटन दबाएं.

15. बधाई हो!

कोडलैब पूरा करने के लिए बधाई!

हमारा सुझाव है कि आप क्विकस्टार्ट: git रिपॉज़िटरी से Cloud Run पर डिप्लॉय करना के बारे में दस्तावेज़ पढ़ें. इससे, वर्शन कंट्रोल में हर पुश के साथ आपकी आने वाली बिल्ड अपने-आप डिप्लॉय हो सकती हैं.

हमने क्या-क्या कवर किया

  • Cloud Build में अपने-आप काम करने वाले JavaScript फ़्रेमवर्क को डिप्लॉय करने का तरीका
    • ऐंगुलर एसएसआर - ऐंगुलर पर आधारित
    • Nuxt.js - Vue.js पर आधारित
    • Next.js - React पर आधारित
    • Remix - React पर आधारित
    • SvelteKit - Svelte पर आधारित
    • SolidStart - Solid.js पर आधारित
  • कॉन्फ़िगरेशन की ज़रूरत वाले JavaScript फ़्रेमवर्क को डिप्लॉय करने का तरीका
    • एस्ट्रो
    • Qwik

16. व्यवस्थित करें

अनजाने में लगने वाले शुल्क से बचने के लिए, Cloud Run जॉब को मिटा दें. उदाहरण के लिए, अगर इस Cloud Run सेवा को मुफ़्त टियर में Cloud Run के लिए हर महीने तय की गई सीमा से ज़्यादा बार अनजाने में चालू किया गया है, तो Cloud Run जॉब को मिटा दें. इसके अलावा, पहले चरण में बनाए गए प्रोजेक्ट को भी मिटाया जा सकता है.

Cloud Run सेवाओं को मिटाने के लिए, Cloud Run Cloud Console पर जाएं. इसके लिए, https://console.cloud.google.com/run/ पर जाएं और Cloud Run सेवाओं को मिटाएं.

अगर आपको पूरा प्रोजेक्ट मिटाना है, तो https://console.cloud.google.com/cloud-resource-manager पर जाएं. इसके बाद, दूसरे चरण में बनाया गया प्रोजेक्ट चुनें और मिटाएं को चुनें. प्रोजेक्ट मिटाने पर, आपको Cloud SDK में प्रोजेक्ट बदलने होंगे. gcloud projects list कमांड चलाकर, सभी उपलब्ध प्रोजेक्ट की सूची देखी जा सकती है.