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

1. परिचय

खास जानकारी

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

  • Angular SSR - Angular पर आधारित
  • Nuxt.js - Vue.js पर आधारित
  • Next.js - React पर आधारित
  • रीमिक्स - प्रतिक्रिया के हिसाब से
  • SvelteKit - Svelte पर आधारित
  • सॉलिडस्टार्ट - Solid.js पर आधारित
  • एस्ट्रो
  • Qwik

ऐंग्युलर ऐप्लिकेशन का स्क्रीनशॉटNuxt.js ऐप्लिकेशन का स्क्रीनशॉटNext.js ऐप्लिकेशन का स्क्रीनशॉटऐप्लिकेशन का स्क्रीनशॉट रीमिक्स करें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. अपने gcloud प्रोजेक्ट को सेट करने के लिए, Cloud Shell में यह निर्देश चलाएं:
    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. ऐंग्युलर एसएसआर (ऐंगुलर)

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

ऐंग्युलर ऐप्लिकेशन का स्क्रीनशॉट

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

स्टोरेज खाली करने की सुविधा (ज़रूरी नहीं)

  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 (प्रतिक्रिया)

  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. रीमिक्स करना (प्रतिक्रिया देना)

  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. 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. सॉलिडस्टार्ट (सॉलिड)

  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. बधाई हो!

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

हमारा सुझाव है कि आप क्विकस्टार्ट: GitHub डेटा स्टोर करने की जगह से Cloud Run में डिप्लॉय करें पर जाएं, ताकि आने वाले समय में बनाए जाने वाले ऐप्लिकेशन, हर पुश टू वर्शन कंट्रोल के साथ अपने-आप डिप्लॉय हो सकें.

हमने वीडियो में क्या-क्या बताया

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

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

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

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

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