Cloud Run पर जनरेटिव यूआई वेबसाइट को डिप्लॉय करने का तरीका

1. परिचय

खास जानकारी

इस लैब में, आपको एक ऐसी वेबसाइट बनाने और उसे डिप्लॉय करने का तरीका बताया जाएगा जिसका कॉन्टेंट, Google के Gemini लार्ज लैंग्वेज मॉडल की मदद से तुरंत जनरेट होता है. यह वेबसाइट, विषयों को एक्सप्लोर करने के लिए "अपनी पसंद के हिसाब से एडवेंचर चुनें" स्टाइल वाला एक आसान नेविगेटर होगा. इसमें हर क्लिक पर, आपकी पसंद के हिसाब से नए लिंक वाला एक नया पेज जनरेट होगा. इसे Node.js और Fastify की मदद से बनाया जाएगा. Gemini को कॉल करने के लिए, Vertex AI SDK का इस्तेमाल किया जाएगा. इसे Cloud Run पर, सुरक्षित और प्रोडक्शन के लिए तैयार सेवा के तौर पर डिप्लॉय किया जाएगा. साथ ही, इसे Identity-Aware Proxy (IAP) का इस्तेमाल करके सुरक्षित किया जाएगा.

आपको क्या करना होगा

  • Vertex AI का इस्तेमाल करने वाला Node.js Fastify ऐप्लिकेशन बनाएं.
  • Docker फ़ाइल के बिना, सोर्स से Cloud Run पर ऐप्लिकेशन डिप्लॉय करें.
  • Identity-Aware Proxy (IAP) का इस्तेमाल करके, Cloud Run एंडपॉइंट को सुरक्षित करें.

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

  • कॉन्टेंट जनरेट करने के लिए, Node.js के लिए Vertex AI SDK का इस्तेमाल कैसे करें.
  • Cloud Run पर Node.js ऐप्लिकेशन को डिप्लॉय करने का तरीका.
  • IAP की मदद से, Cloud Run ऐप्लिकेशन को सुरक्षित करने का तरीका.

2. प्रोजेक्ट सेटअप करना

  1. अगर आपके पास पहले से कोई Google खाता नहीं है, तो आपको Google खाता बनाना होगा.
    • ऑफ़िस या स्कूल वाले खाते के बजाय, निजी खाते का इस्तेमाल करें. ऑफ़िस और स्कूल वाले खातों पर कुछ पाबंदियां हो सकती हैं. इनकी वजह से, इस लैब के लिए ज़रूरी एपीआई चालू नहीं किए जा सकते.
  2. Google Cloud Console में साइन इन करें.
  3. Cloud Console में बिलिंग चालू करें.
    • इस लैब को पूरा करने में, Cloud संसाधनों पर 1 डॉलर से कम का खर्च आना चाहिए.
    • ज़्यादा शुल्क से बचने के लिए, इस लैब के आखिर में दिए गए निर्देशों का पालन करके संसाधनों को मिटाया जा सकता है.
    • नए उपयोगकर्ता, 300 डॉलर के मुफ़्त में आज़माने की सुविधा का फ़ायदा पा सकते हैं.
  4. नया प्रोजेक्ट बनाएं या किसी मौजूदा प्रोजेक्ट का फिर से इस्तेमाल करें.
    • अगर आपको प्रोजेक्ट के कोटे से जुड़ी कोई गड़बड़ी दिखती है, तो किसी मौजूदा प्रोजेक्ट का फिर से इस्तेमाल करें या नया प्रोजेक्ट बनाने के लिए किसी मौजूदा प्रोजेक्ट को मिटाएं.

3. Cloud Shell Editor खोलें

  1. सीधे Cloud Shell Editor पर जाने के लिए, इस लिंक पर क्लिक करें
  2. अगर आज किसी भी समय अनुमति देने के लिए कहा जाता है, तो जारी रखने के लिए अनुमति दें पर क्लिक करें. Cloud Shell को अनुमति देने के लिए क्लिक करें
  3. अगर टर्मिनल स्क्रीन पर सबसे नीचे नहीं दिखता है, तो इसे खोलें:
    • देखें पर क्लिक करें
    • टर्मिनलCloud Shell Editor में नया टर्मिनल खोलना पर क्लिक करें
  4. टर्मिनल में, इस निर्देश का इस्तेमाल करके अपना प्रोजेक्ट सेट करें:
    • फ़ॉर्मैट:
      gcloud config set project [PROJECT_ID]
    • उदाहरण:
      gcloud config set project lab-project-id-example
    • अगर आपको अपना प्रोजेक्ट आईडी याद नहीं है, तो:
      • अपने सभी प्रोजेक्ट आईडी की सूची बनाने के लिए, यह तरीका अपनाएं:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Cloud Shell Editor के टर्मिनल में प्रोजेक्ट आईडी सेट करना
  5. आपको यह मैसेज दिखेगा:
    Updated property [core/project].
    अगर आपको WARNING दिखता है और आपसे Do you want to continue (Y/n)? पूछा जाता है, तो इसका मतलब है कि आपने प्रोजेक्ट आईडी गलत डाला है. n दबाएं, Enter दबाएं, और gcloud config set project निर्देश को फिर से चलाने की कोशिश करें.
  1. GOOGLE_CLOUD_PROJECT एनवायरमेंट वैरिएबल सेट करना 
    export GOOGLE_CLOUD_PROJECT=$(gcloud config get-value project)

4. एपीआई चालू करें

टर्मिनल में, इन एपीआई को चालू करें:

gcloud services enable \
  run.googleapis.com \
  aiplatform.googleapis.com \
  cloudresourcemanager.googleapis.com \
  iap.googleapis.com

अगर अनुमति देने के लिए कहा जाए, तो जारी रखने के लिए अनुमति दें पर क्लिक करें. Cloud Shell को अनुमति देने के लिए क्लिक करें

इस कमांड को पूरा होने में कुछ मिनट लग सकते हैं. हालांकि, इसके बाद आपको इस तरह का मैसेज दिखेगा:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

5. अपना Node.js प्रोजेक्ट तैयार करना

  1. डिप्लॉयमेंट के लिए सोर्स कोड सेव करने के लिए, gen-ui-on-cloudrun नाम का फ़ोल्डर बनाएं:
    mkdir gen-ui-on-cloudrun && cd gen-ui-on-cloudrun
  2. Node.js प्रोजेक्ट शुरू करें:
    npm init -y
  3. ईएस मॉड्यूल का इस्तेमाल करने के लिए प्रोजेक्ट को कॉन्फ़िगर करें. साथ ही, इन कमांड को चलाकर स्टार्ट स्क्रिप्ट तय करें:
    npm pkg set type="module"
  4. वेब सर्वर के लिए fastify और Vertex AI SDK के लिए @google/genai इंस्टॉल करें:
    npm install fastify @google/genai

6. ऐप्लिकेशन कोड बनाना

  1. ऐप्लिकेशन के सोर्स कोड के लिए, नई index.ts फ़ाइल बनाएं और उसे खोलें:
    cloudshell edit ~/gen-ui-on-cloudrun/index.ts
    cloudshell edit कमांड, टर्मिनल के ऊपर मौजूद एडिटर में index.ts फ़ाइल खोलेगी.
  2. index.ts फ़ाइल में, जनरेटिव यूआई सर्वर का यह सोर्स कोड जोड़ें:
    import fastifyLib from 'fastify';
import { GoogleGenAI } from '@google/genai';

const fastify = fastifyLib({ logger: true });

const ai = new GoogleGenAI({
    vertexai: true,
    project: process.env.GOOGLE_CLOUD_PROJECT,
    location: process.env.GOOGLE_CLOUD_LOCATION || 'europe-west1',
});

const SYSTEM_INSTRUCTION = `The user should have submitted an html page and the id of the element just clicked.
Given the next page description, create a new webpage with a link back to "Start Over" (the / route), a brief overview of the topic, and a list of clickable link elements related to the page.
When an element is clicked, the webpage should link to the base route / with the nextPageDescription as a query string parameter.
All information needed to generate the next page should be included in the nextPageDescription without additional context.
Each nextPageDescription should be less than 1500 characters.

Example:
If the current HTML page is for a small pet store, it might include a link to an "About" page.
The href for the about page link should be /?nextPageDescription=about%20page%20for%20small%20pet%20store%20website

All responses should be valid HTML without markdown backticks.`;

interface QueryParams {
    nextPageDescription?: string;
}

fastify.get<{ Querystring: QueryParams }>('/', async (request, reply) => {
    const {
        nextPageDescription = 'A web page with interesting fun facts where I can select a fact to learn more about that topic.'
    } = request.query;

    try {
        const response = await ai.models.generateContent({
            model: 'gemini-2.5-flash',
            contents: nextPageDescription,
            config: {
                systemInstruction: SYSTEM_INSTRUCTION,
                temperature: 0.9,
            }
        });

        reply.type('text/html; charset=utf-8').send(response.text);
    } catch (error: any) {
        request.log.error(error);
        reply.status(500).send('An error occurred calling the AI.');
    }
});

const start = async () => {
    try {
        await fastify.listen({ port: Number(process.env.PORT) || 8080, host: '0.0.0.0' });
    } catch (err) {
        fastify.log.error(err);
        process.exit(1);
    }
};

start();

यह कोड, एक वेब सर्वर सेट अप करता है. यह वेब सर्वर, रूट पाथ (/) पर एचटीटीपी GET अनुरोधों को सुनता है. जब कोई अनुरोध मिलता है, तो यह Vertex AI के ज़रिए Gemini 2.5 Flash मॉडल के लिए, nextPageDescription क्वेरी पैरामीटर (या डिफ़ॉल्ट वैल्यू) का इस्तेमाल प्रॉम्प्ट के तौर पर करता है. मॉडल को SYSTEM_INSTRUCTION निर्देश देता है कि वह लिंक वाला एक एचटीएमएल पेज दिखाए. इस पेज पर मौजूद हर लिंक में, अगले पेज को जनरेट करने के लिए nextPageDescription शामिल होता है.

7. सेवा खाता बनाएं

Vertex AI API से पुष्टि करने के लिए, आपको Cloud Run सेवा के लिए एक सेवा खाते की ज़रूरत होगी.

  1. gen-navigator-sa नाम का सेवा खाता बनाएं:
    gcloud iam service-accounts create gen-navigator-sa --display-name="Generative Navigator Service Account"
  2. सेवा खाते को Vertex AI का इस्तेमाल करने की अनुमति दें:
    gcloud projects add-iam-policy-binding $GOOGLE_CLOUD_PROJECT \
    --member="serviceAccount:gen-navigator-sa@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com" \
    --role="roles/aiplatform.user"

8. Cloud Run पर डिप्लॉय करें

अब ऐप्लिकेशन को सीधे सोर्स कोड से Cloud Run पर डिप्लॉय करें. इसके लिए, Dockerfile की ज़रूरत नहीं है.

  1. ऐप्लिकेशन को डिप्लॉय करने के लिए, gcloud कमांड चलाएं:
    cd ~/gen-ui-on-cloudrun
gcloud beta run deploy generative-web-navigator \
    --source . \
    --no-build \
    --base-image=nodejs24 \
    --command="node" \
    --args="index.ts" \
    --region=europe-west1 \
    --no-allow-unauthenticated \
    --iap \
    --service-account="gen-navigator-sa@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com" \
    --set-env-vars GOOGLE_CLOUD_PROJECT="$GOOGLE_CLOUD_PROJECT",GOOGLE_CLOUD_LOCATION="europe-west1"
    हम यहां कुछ ज़रूरी फ़्लैग का इस्तेमाल करते हैं:
    • --source . --no-build --base-image=nodejs24: इससे Cloud Run को यह निर्देश मिलता है कि वह मौजूदा डायरेक्ट्री से सोर्स कोड डिप्लॉय करे, बिल्ड फ़ेज़ को स्किप करे, और पहले से बनी हुई Node.js 24 की बेस इमेज का इस्तेमाल करके ऐप्लिकेशन को चलाए.
    • --no-allow-unauthenticated: इससे यह पक्का किया जाता है कि सिर्फ़ पुष्टि किए गए उपयोगकर्ता ही सेवा को ऐक्सेस कर सकें.
    • --iap: इससे Identity-Aware Proxy (IAP) को आपके ऐप्लिकेशन का ऐक्सेस मैनेज करने की अनुमति मिलती है. IAP की मदद से, सिर्फ़ आईपी पतों के बजाय उपयोगकर्ता की पहचान और कॉन्टेक्स्ट के आधार पर ऐक्सेस को कंट्रोल किया जा सकता है.
  2. कुछ मिनटों के बाद, आपको इस तरह का मैसेज दिखेगा:
    Service [generative-web-navigator] revision [generative-web-navigator-12345-abc] has been deployed and is serving 100 percent of traffic.

आपने अपना ऐप्लिकेशन डिप्लॉय कर दिया है. हालांकि, ऐक्सेस की अनुमति देने के लिए, आपको IAP को कॉन्फ़िगर करना होगा.

9. IAP का ऐक्सेस कॉन्फ़िगर करना

Cloud Run पर IAP चालू करने पर, IAP सभी अनुरोधों को इंटरसेप्ट करता है. साथ ही, उपयोगकर्ताओं को आपकी सेवा का इस्तेमाल करने से पहले, पुष्टि करनी होती है और अनुमति लेनी होती है. इसके लिए, आपको दो अनुमतियां देनी होंगी:

  • IAP सेवा को आपकी Cloud Run सेवा को चालू करने की अनुमति दें.
  • खुद को (या अन्य उपयोगकर्ताओं/ग्रुप को) आईएपी के ज़रिए ऐप्लिकेशन ऐक्सेस करने की अनुमति दें.
  1. अपना प्रोजेक्ट नंबर पाएं. इसकी मदद से, IAP सेवा एजेंट की पहचान की जा सकती है:
    export PROJECT_NUMBER=$(gcloud projects describe $GOOGLE_CLOUD_PROJECT --format="value(projectNumber)")
  2. IAP सर्विस एजेंट को अपनी Cloud Run सेवा पर roles/run.invoker की भूमिका असाइन करें. इससे IAP, किसी उपयोगकर्ता की पुष्टि करने और उसे अनुमति देने के बाद, आपकी सेवा को शुरू कर पाता है.
    gcloud run services add-iam-policy-binding generative-web-navigator \
    --region=europe-west1 \
    --member="serviceAccount:service-$PROJECT_NUMBER@gcp-sa-iap.iam.gserviceaccount.com" \
    --role="roles/run.invoker"
  3. अपने उपयोगकर्ता खाते को roles/iap.httpsResourceAccessor की भूमिका असाइन करें. इससे, आपको आईएपी से सुरक्षित एचटीटीपीएस संसाधनों को ऐक्सेस करने की अनुमति मिलती है.
    gcloud beta iap web add-iam-policy-binding \
    --resource-type=cloud-run \
    --region=europe-west1 \
    --service=generative-web-navigator \
    --member="user:$(gcloud config get-value account)" \
    --role="roles/iap.httpsResourceAccessor"

10. ऐप्लिकेशन को टेस्ट करना

  1. डिप्लॉय की गई सेवा का यूआरएल पाएं: 
    gcloud run services describe generative-web-navigator --format='value(status.url)' --region=europe-west1
  2. यूआरएल को कॉपी करें और इसे अपने वेब ब्राउज़र में खोलें. इस सेवा को IAP की मदद से सुरक्षित किया जाता है. इसलिए, अगर आपने पहले से लॉग इन नहीं किया है, तो आपको अपने Google खाते से लॉग इन करने के लिए कहा जाएगा. पुष्टि करने के बाद, आपको अपने-आप जनरेट हुआ पहला पेज दिखेगा.
  3. किसी भी लिंक पर क्लिक करके नए पेज पर जाएं. यह पेज, एआई के ज़रिए जनरेट किया जाएगा. यह इस बात पर निर्भर करेगा कि आपने किस लिंक पर क्लिक किया है!

आपने कर दिखाया! आपने Cloud Run पर जनरेटिव यूआई वेबसाइट को डिप्लॉय कर दिया है. साथ ही, IAP का इस्तेमाल करके इसे सुरक्षित कर दिया है.

11. नतीजा

बधाई हो! आपने Cloud Run, Vertex AI, और IAP का इस्तेमाल करके, जनरेटिव यूआई वाली वेबसाइट को डिप्लॉय और सुरक्षित कर लिया है.

(ज़रूरी नहीं) व्यवस्थित करें

अगर आपको बनाए गए संसाधनों को हटाना है, तो अतिरिक्त शुल्क से बचने के लिए अपना Cloud प्रोजेक्ट मिटाएं.

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

अगर आपको प्रोजेक्ट मिटाना है, तो यह तरीका अपनाएं:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

ऐसा भी हो सकता है कि आपको अपने Cloud Shell डिस्क से ग़ैर-ज़रूरी संसाधन मिटाने हों. आप:

  1. कोड लैब प्रोजेक्ट की डायरेक्ट्री मिटाएं: 
    rm -rf ~/gen-ui-on-cloudrun
  2. चेतावनी! इस कार्रवाई को पहले जैसा नहीं किया जा सकता! अगर आपको Cloud Shell पर मौजूद सभी फ़ाइलें मिटाकर जगह खाली करनी है, तो अपनी पूरी होम डायरेक्ट्री मिटाएं. ध्यान रखें कि आपको जो भी डेटा रखना है वह किसी दूसरी जगह पर सेव हो. 
    sudo rm -rf $HOME