Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

Cloud Build का इस्तेमाल करके, GitHub से Cloud Run में अपने बदलाव अपने-आप डिप्लॉय करने का तरीका

1. परिचय

खास जानकारी

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

यह डेमो ऐप्लिकेशन, उपयोगकर्ता के डेटा को Firestore में सेव करता है. हालांकि, डेटा का सिर्फ़ कुछ हिस्सा ही सही तरीके से सेव होता है. आपको लगातार डिप्लॉयमेंट को इस तरह से कॉन्फ़िगर करना होगा कि जब आप GitHub रिपॉज़िटरी में किसी बग को ठीक करने के लिए कोड पुश करें, तो आपको अपने-आप एक नए वर्शन में वह ठीक किया गया कोड उपलब्ध दिखे.

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

Cloud Shell Editor की मदद से Express वेब ऐप्लिकेशन लिखना
लगातार डिप्लॉयमेंट के लिए, अपने GitHub खाते को Google Cloud से कनेक्ट करना
अपने ऐप्लिकेशन को Cloud Run पर अपने-आप डिप्लॉय करना
HTMX और TailwindCSS इस्तेमाल करने का तरीका जानें

2. सेटअप और ज़रूरी शर्तें

ज़रूरी शर्तें

आपके पास GitHub खाता हो और आपको रिपॉज़िटरी में कोड बनाने और उसे पुश करने के बारे में जानकारी हो.
आपने Cloud Console में लॉग इन किया हो.
आपने पहले Cloud Run सेवा डिप्लॉय की हो. उदाहरण के लिए, शुरू करने के लिए सोर्स कोड से वेब सेवा डिप्लॉय करने के बारे में जानकारी पढ़ें.

Cloud Shell चालू करें

Cloud Console में, Cloud Shell चालू करें पर क्लिक करें.

अगर Cloud Shell को पहली बार शुरू किया जा रहा है, तो आपको एक इंटरमीडिएट स्क्रीन दिखेगी. इसमें Cloud Shell के बारे में बताया गया होगा. अगर आपको इंटरमीडिएट स्क्रीन दिखती है, तो जारी रखें पर क्लिक करें.

Cloud Shell से कनेक्ट होने में कुछ ही सेकंड लगेंगे.

इस वर्चुअल मशीन में, डेवलपमेंट के लिए ज़रूरी सभी टूल पहले से मौजूद होते हैं. यह 5 जीबी की होम डायरेक्ट्री उपलब्ध कराता है. साथ ही, Google Cloud में काम करता है. इससे नेटवर्क की परफ़ॉर्मेंस और पुष्टि करने की प्रोसेस बेहतर होती है. इस कोडलैब में ज़्यादातर काम ब्राउज़र से किया जा सकता है.

Cloud Shell से कनेक्ट होने के बाद, आपको दिखेगा कि आपने पुष्टि कर ली है और प्रोजेक्ट को आपके प्रोजेक्ट आईडी पर सेट कर दिया गया है.

पुष्टि करें कि आपने Cloud Shell में पुष्टि कर ली है. इसके लिए, यह कमांड चलाएं:

gcloud auth list

कमांड का आउटपुट

 Credentialed Accounts
ACTIVE  ACCOUNT
*       <my_account>@<my_domain.com>

To set the active account, run:
    $ gcloud config set account `ACCOUNT`

यह पुष्टि करने के लिए कि gcloud कमांड को आपके प्रोजेक्ट के बारे में पता है, Cloud Shell में यह कमांड चलाएं:

gcloud config list project

कमांड का आउटपुट

[core]
project = <PROJECT_ID>

अगर ऐसा नहीं है, तो इस कमांड का इस्तेमाल करके इसे सेट किया जा सकता है:

gcloud config set project <PROJECT_ID>

कमांड का आउटपुट

Updated property [core/project].

3. एपीआई चालू करना और एनवायरमेंट वैरिएबल सेट करना

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

इस कोडलैब के लिए, इन एपीआई का इस्तेमाल करना ज़रूरी है. इन एपीआई को चालू करने के लिए, यह कमांड चलाएं:

gcloud services enable run.googleapis.com \
    cloudbuild.googleapis.com \
    firestore.googleapis.com \
    iamcredentials.googleapis.com

एनवायरमेंट वैरिएबल सेट अप करना

ऐसे एनवायरमेंट वैरिएबल सेट किए जा सकते हैं जिनका इस्तेमाल इस कोडलैब में किया जाएगा.

REGION=<YOUR-REGION>
PROJECT_ID=<YOUR-PROJECT-ID>
PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')
SERVICE_ACCOUNT="firestore-accessor"
SERVICE_ACCOUNT_ADDRESS=$SERVICE_ACCOUNT@$PROJECT_ID.iam.gserviceaccount.com

4. सेवा खाता बनाना

इस सेवा खाते का इस्तेमाल, Cloud Run करेगा. इससे वह Vertex AI Gemini API को कॉल कर पाएगा. इस सेवा खाते के पास Firestore में डेटा पढ़ने और लिखने की अनुमतियां भी होंगी. साथ ही, इसके पास Secret Manager से सीक्रेट पढ़ने की अनुमति भी होगी.

सबसे पहले, यह कमांड चलाकर सेवा खाता बनाएं:

gcloud iam service-accounts create $SERVICE_ACCOUNT \
  --display-name="Cloud Run access to Firestore"

अब सेवा खाते को Firestore में डेटा पढ़ने और लिखने का ऐक्सेस दें.

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member serviceAccount:$SERVICE_ACCOUNT_ADDRESS \
  --role=roles/datastore.user

5. Firebase प्रोजेक्ट बनाना और उसे कॉन्फ़िगर करना

Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें.
अपने किसी मौजूदा Google Cloud प्रोजेक्ट में Firebase जोड़ने के लिए, <YOUR_PROJECT_ID> डालें
अगर प्रॉम्प्ट मिलता है, तो Firebase की शर्तें पढ़ें और उन्हें स्वीकार करें.
जारी रखें पर क्लिक करें.
Firebase के बिलिंग प्लान की पुष्टि करने के लिए, प्लान की पुष्टि करें पर क्लिक करें.
इस कोडलैब के लिए, Google Analytics को चालू करना ज़रूरी नहीं है.
Firebase जोड़ें पर क्लिक करें.
प्रोजेक्ट बन जाने के बाद, जारी रखें पर क्लिक करें.
बनाएं मेन्यू में जाकर, Firestore डेटाबेस पर क्लिक करें.
डेटाबेस बनाएं पर क्लिक करें.
जगह की जानकारी ड्रॉप-डाउन से अपना इलाका चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
डिफ़ॉल्ट तौर पर मौजूद प्रोडक्शन मोड में शुरू करें का इस्तेमाल करें. इसके बाद, बनाएं पर क्लिक करें.

6. आवेदन लिखना

सबसे पहले, सोर्स कोड के लिए एक डायरेक्ट्री बनाएं और उस डायरेक्ट्री में cd करें.

mkdir cloud-run-github-cd-demo && cd $_

इसके बाद, यहां दिए गए कॉन्टेंट के साथ package.json फ़ाइल बनाएं:

{
  "name": "cloud-run-github-cd-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "nodemon": "nodemon app.js",
    "tailwind-dev": "npx tailwindcss -i ./input.css -o ./public/output.css --watch",
    "tailwind": "npx tailwindcss -i ./input.css -o ./public/output.css",
    "dev": "npm run tailwind && npm run nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@google-cloud/firestore": "^7.3.1",
    "axios": "^1.6.7",
    "express": "^4.18.2",
    "htmx.org": "^1.9.10"
  },
  "devDependencies": {
    "nodemon": "^3.1.0",
    "tailwindcss": "^3.4.1"
  }
}

सबसे पहले, नीचे दिए गए कॉन्टेंट के साथ app.js सोर्स फ़ाइल बनाएं. इस फ़ाइल में, सेवा के लिए एंट्री पॉइंट होता है. साथ ही, इसमें ऐप्लिकेशन के लिए मुख्य लॉजिक होता है.

const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
const path = require("path");
const { get } = require("axios");

const { Firestore } = require("@google-cloud/firestore");
const firestoreDb = new Firestore();

const fs = require("fs");
const util = require("util");
const { spinnerSvg } = require("./spinnerSvg.js");

const service = process.env.K_SERVICE;
const revision = process.env.K_REVISION;

app.use(express.static("public"));

app.get("/edit", async (req, res) => {
    res.send(`<form hx-post="/update" hx-target="this" hx-swap="outerHTML">
                <div>
  <p>
    <label>Name</label>    
    <input class="border-2" type="text" name="name" value="Cloud">
    </p><p>
    <label>Town</label>    
    <input class="border-2" type="text" name="town" value="Nibelheim">
    </p>
  </div>
  <div class="flex items-center mr-[10px] mt-[10px]">
  <button class="btn bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium mr-[10px]">Submit</button>
  <button class="btn bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-center text-sm font-medium mr-[10px]" hx-get="cancel">Cancel</button>  
                ${spinnerSvg} 
                </div>
  </form>`);
});

app.post("/update", async function (req, res) {
    let name = req.body.name;
    let town = req.body.town;
    const doc = firestoreDb.doc(`demo/${name}`);

    //TODO: fix this bug
    await doc.set({
        name: name
        /* town: town */
    });

    res.send(`<div hx-target="this" hx-swap="outerHTML" hx-indicator="spinner">
                <p>
                <div><label>Name</label>: ${name}</div>
                </p><p>
                <div><label>Town</label>: ${town}</div>
                </p>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>               
            </div>`);
});

app.get("/cancel", (req, res) => {
    res.send(`<div hx-target="this" hx-swap="outerHTML">
                <p>
                <div><label>Name</label>: Cloud</div>
                </p><p>
                <div><label>Town</label>: Nibelheim</div>
                </p>
                <div>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>                
                </div>
            </div>`);
});

const port = parseInt(process.env.PORT) || 8080;
app.listen(port, async () => {
    console.log(`booth demo: listening on port ${port}`);

    //serviceMetadata = helper();
});

app.get("/helper", async (req, res) => {
    let region = "";
    let projectId = "";
    let div = "";

    try {
        // Fetch the token to make a GCF to GCF call
        const response1 = await get(
            "http://metadata.google.internal/computeMetadata/v1/project/project-id",
            {
                headers: {
                    "Metadata-Flavor": "Google"
                }
            }
        );

        // Fetch the token to make a GCF to GCF call
        const response2 = await get(
            "http://metadata.google.internal/computeMetadata/v1/instance/region",
            {
                headers: {
                    "Metadata-Flavor": "Google"
                }
            }
        );

        projectId = response1.data;
        let regionFull = response2.data;
        const index = regionFull.lastIndexOf("/");
        region = regionFull.substring(index + 1);

        div = `
        <div>
        This created the revision <code>${revision}</code> of the 
        Cloud Run service <code>${service}</code> in <code>${region}</code>
        for project <code>${projectId}</code>.
        </div>`;
    } catch (ex) {
        // running locally
        div = `<div> This is running locally.</div>`;
    }

    res.send(div);
});

spinnerSvg.js नाम की फ़ाइल बनाना

module.exports.spinnerSvg = `<svg id="spinner" alt="Loading..."
                    class="htmx-indicator animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <circle
                        class="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        stroke-width="4"
                    ></circle>
                    <path
                        class="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                </svg>`;

TailwindCSS के लिए input.css फ़ाइल बनाना

@tailwind base;
@tailwind components;
@tailwind utilities;

साथ ही, TailwindCSS के लिए tailwind.config.js फ़ाइल बनाएं

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./**/*.{html,js}"],
    theme: {
        extend: {}
    },
    plugins: []
};

इसके बाद, .gitignore फ़ाइल बनाएं.

node_modules/

npm-debug.log
coverage/

package-lock.json

.DS_Store

अब, एक नई public डायरेक्ट्री बनाएं.

mkdir public
cd public

इसके बाद, उस सार्वजनिक डायरेक्ट्री में फ़्रंट एंड के लिए index.html फ़ाइल बनाएं. यह htmx का इस्तेमाल करेगी.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <script
            src="https://unpkg.com/htmx.org@1.9.10"
            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
            crossorigin="anonymous"
        ></script>

        <link href="./output.css" rel="stylesheet" />
        <title>Demo 1</title>
    </head>
    <body
        class="font-sans bg-body-image bg-cover bg-center leading-relaxed"
    >
        <div class="container max-w-[700px] mt-[50px] ml-auto mr-auto">
            <div class="hero flex items-center">                    
                <div class="message text-base text-center mb-[24px]">
                    <h1 class="text-2xl font-bold mb-[10px]">
                        It's running!
                    </h1>
                    <div class="congrats text-base font-normal">
                        Congratulations, you successfully deployed your
                        service to Cloud Run. 
                    </div>
                </div>
            </div>

            <div class="details mb-[20px]">
                <p>
                    <div hx-trigger="load" hx-get="/helper" hx-swap="innerHTML" hx-target="this">Hello</div>                   
                </p>
            </div>

            <p
                class="callout text-sm text-blue-700 font-bold pt-4 pr-6 pb-4 pl-10 leading-tight"
            >
                You can deploy any container to Cloud Run that listens for
                HTTP requests on the port defined by the
                <code>PORT</code> environment variable. Cloud Run will
                scale automatically based on requests and you never have to
                worry about infrastructure.
            </p>

            <h1 class="text-2xl font-bold mt-[40px] mb-[20px]">
                Persistent Storage Example using Firestore
            </h1>
            <div hx-target="this" hx-swap="outerHTML">
                <p>
                <div><label>Name</label>: Cloud</div>
                </p><p>
                <div><label>Town</label>: Nibelheim</div>
                </p>
                <div>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>                
                </div>
            </div>

            <h1 class="text-2xl font-bold mt-[40px] mb-[20px]">
                What's next
            </h1>
            <p class="next text-base mt-4 mb-[20px]">
                You can build this demo yourself!
            </p>
            <p class="cta">
                <button
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium"
                >
                    VIEW CODELAB
                </button>
            </p> 
        </div>
   </body>
</html>

7. ऐप्लिकेशन को स्थानीय तौर पर चलाना

इस सेक्शन में, ऐप्लिकेशन को स्थानीय तौर पर चलाया जाएगा. इससे यह पुष्टि की जा सकेगी कि जब उपयोगकर्ता डेटा सेव करने की कोशिश करता है, तब ऐप्लिकेशन में कोई गड़बड़ी होती है.

सबसे पहले, आपको Firestore को ऐक्सेस करने के लिए, Datastore User की भूमिका की ज़रूरत होगी. ऐसा तब होता है, जब पुष्टि करने के लिए अपनी पहचान का इस्तेमाल किया जा रहा हो. उदाहरण के लिए, Cloud Shell में काम करते समय. इसके अलावा, पहले से बनाए गए उपयोगकर्ता खाते के तौर पर भी काम किया जा सकता है.

स्थानीय तौर पर विज्ञापन दिखाने के लिए, एडीसी का इस्तेमाल करना

अगर Cloud Shell में काम किया जा रहा है, तो इसका मतलब है कि Google Compute Engine की वर्चुअल मशीन का इस्तेमाल किया जा रहा है. इस वर्चुअल मशीन से जुड़े आपके क्रेडेंशियल (gcloud auth list चलाने पर दिखते हैं) का इस्तेमाल ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल (एडीसी) अपने-आप करेगा. इसलिए, gcloud auth application-default login कमांड का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, आपकी पहचान के लिए अब भी Datastore User की भूमिका ज़रूरी होगी. सीधे ऐप्लिकेशन को स्थानीय तौर पर चलाना सेक्शन पर जाएं.

हालांकि, अगर आपने इसे अपने लोकल टर्मिनल (यानी कि Cloud Shell में नहीं) पर चलाया है, तो आपको Google API से पुष्टि करने के लिए, ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल का इस्तेमाल करना होगा. आपके पास ये विकल्प हैं: 1) अपने क्रेडेंशियल का इस्तेमाल करके लॉग इन करें. इसके लिए, आपके पास Datastore User की भूमिका होनी चाहिए या 2) इस कोडलैब में इस्तेमाल किए गए सेवा खाते के तौर पर लॉग इन करें.

पहला विकल्प) एडीसी के लिए अपने क्रेडेंशियल का इस्तेमाल करना

अगर आपको अपने क्रेडेंशियल का इस्तेमाल करना है, तो सबसे पहले gcloud auth list चलाकर पुष्टि करें कि gcloud में आपकी पुष्टि कैसे की जाती है. इसके बाद, आपको अपनी पहचान को Vertex AI User की भूमिका देनी पड़ सकती है. अगर आपकी पहचान के पास मालिक की भूमिका है, तो आपके पास पहले से ही Datastore User की भूमिका है. अगर ऐसा नहीं है, तो अपनी पहचान को Vertex AI उपयोगकर्ता की भूमिका और Datastore उपयोगकर्ता की भूमिका देने के लिए, यह कमांड चलाएं.

USER=<YOUR_PRINCIPAL_EMAIL>

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/datastore.user

इसके बाद, यह कमांड चलाएं

gcloud auth application-default login

दूसरा विकल्प) एडीसी के लिए सेवा खाते से मिलता-जुलता खाता बनाना

अगर आपको इस कोडलैब में बनाए गए सेवा खाते का इस्तेमाल करना है, तो आपके उपयोगकर्ता खाते के पास सेवा खाता टोकन क्रिएटर की भूमिका होनी चाहिए. यह भूमिका पाने के लिए, यह कमांड चलाएं:

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/iam.serviceAccountTokenCreator

इसके बाद, सेवा खाते के साथ एडीसी का इस्तेमाल करने के लिए, आपको यह कमांड चलानी होगी

gcloud auth application-default login --impersonate-service-account=$SERVICE_ACCOUNT_ADDRESS

ऐप्लिकेशन को स्थानीय तौर पर चलाना

इसके बाद, पक्का करें कि आप अपने कोडलैब के लिए रूट डायरेक्ट्री cloud-run-github-cd-demo में हों.

cd .. && pwd

अब, डिपेंडेंसी इंस्टॉल करें.

npm install

आखिर में, इस स्क्रिप्ट को चलाकर ऐप्लिकेशन शुरू किया जा सकता है. यह स्क्रिप्ट, TailwindCSS से output.css फ़ाइल भी जनरेट करेगी.

npm run dev

अब http://localhost:8080 पर जाकर, अपना वेब ब्राउज़र खोलें. अगर Cloud Shell में हैं, तो वेबसाइट खोलने के लिए, 'वेब प्रीव्यू' बटन खोलें और 'पोर्ट 8080 की झलक देखें' को चुनें.

वेब प्रीव्यू - पोर्ट 8080 पर झलक देखें बटन

नाम और शहर के इनपुट फ़ील्ड के लिए टेक्स्ट डालें और सेव करें. इसके बाद, पेज को रीफ़्रेश करें. आपको दिखेगा कि शहर का फ़ील्ड सेव नहीं हुआ है. इस बग को अगले सेक्शन में ठीक किया जाएगा.

एक्सप्रेस ऐप्लिकेशन को स्थानीय तौर पर चलने से रोकें. उदाहरण के लिए, MacOS पर Ctrl^c दबाएं.

8. GitHub रिपॉज़िटरी बनाना

अपनी लोकल डायरेक्ट्री में, main को डिफ़ॉल्ट ब्रांच का नाम देकर नई रेपो बनाएं.

git init
git branch -M main

गड़बड़ी वाले मौजूदा कोडबेस को कमिट करें. लगातार डिप्लॉयमेंट की सुविधा कॉन्फ़िगर करने के बाद, आपको गड़बड़ी ठीक करनी होगी.

git add .
git commit -m "first commit for express application"

GitHub पर जाएं और एक खाली रिपॉज़िटरी बनाएं. इसे निजी या सार्वजनिक के तौर पर सेट करें. इस कोडलैब में, अपनी रिपॉज़िटरी का नाम cloud-run-auto-deploy-codelab रखने का सुझाव दिया गया है. खाली रिपॉज़िटरी बनाने के लिए, आपको सभी डिफ़ॉल्ट सेटिंग से सही का निशान हटाना होगा या उन्हें 'कोई नहीं' पर सेट करना होगा. इससे रिपॉज़िटरी बनाते समय, उसमें डिफ़ॉल्ट रूप से कोई कॉन्टेंट नहीं होगा. उदाहरण के लिए,

GitHub की डिफ़ॉल्ट सेटिंग

अगर आपने यह चरण सही तरीके से पूरा किया है, तो आपको खाली रिपॉज़िटरी पेज पर ये निर्देश दिखेंगे:

GitHub repo के लिए खाली निर्देश

नीचे दिए गए कमांड चलाकर, कमांड लाइन से किसी मौजूदा रिपॉज़िटरी को पुश करें निर्देशों का पालन करें:

सबसे पहले, रिमोट रिपॉज़िटरी जोड़ें. इसके लिए, यह कमांड चलाएं

git remote add origin <YOUR-REPO-URL-PER-GITHUB-INSTRUCTIONS>

इसके बाद, मुख्य ब्रांच को अपस्ट्रीम रेपो में पुश करें.

git push -u origin main

ध्यान दें: अगर आपसे उपयोगकर्ता नाम और पासवर्ड मांगा जाता है, तो हमारा सुझाव है कि Cloud Shell से Git के साथ पुष्टि करने के लिए निजी ऐक्सेस टोकन बनाएं. GitHub पर निजी ऐक्सेस टोकन बनाने का तरीका यहां जानें.

अपने निजी ऐक्सेस टोकन को Repo स्कोप दें. इससे, Cloud Shell से अपनी रेपो में बदलाव किए जा सकेंगे. इसके बाद, जब आपसे उपयोगकर्ता नाम और पासवर्ड पूछा जाए, तो अपने निजी ऐक्सेस टोकन को पासवर्ड के तौर पर इस्तेमाल करें.

9. लगातार डिप्लॉयमेंट की सुविधा सेटअप करना

अब आपके पास GitHub में कोड है. इसलिए, लगातार डिप्लॉयमेंट की सुविधा सेट अप की जा सकती है. Cloud Run के लिए Cloud Console पर जाएं.

'सेवा बनाएं' पर क्लिक करें
किसी रिपॉज़िटरी से लगातार डिप्लॉय करें पर क्लिक करें
Cloud Build सेट अप करें पर क्लिक करें.
सोर्स रिपॉज़िटरी में जाकर
- रिपॉज़िटरी की सुविधा देने वाली कंपनी के तौर पर GitHub को चुनें
- Cloud Build को रिपॉज़िटरी का ऐक्सेस देने के लिए, कनेक्ट की गई रिपॉज़िटरी मैनेज करें पर क्लिक करें
- अपनी रिपॉज़िटरी चुनें और आगे बढ़ें पर क्लिक करें
बिल्ड कॉन्फ़िगरेशन
- ब्रांच को ^main$ के तौर पर छोड़ दें
- बिल्ड टाइप के लिए, Google Cloud के बिल्डपैक के ज़रिए Go, Node.js, Python, Java, .NET Core, Ruby या PHP चुनें
बिल्ड कॉन्टेक्स्ट डायरेक्ट्री को / के तौर पर छोड़ें
सेव करें पर क्लिक करें
पुष्टि करने का तरीका
- बिना पुष्टि किए गए अनुरोधों को अनुमति दें पर क्लिक करें
कंटेनर, वॉल्यूम, नेटवर्किंग, सुरक्षा
- सुरक्षा टैब में जाकर, वह सेवा खाता चुनें जिसे आपने पिछले चरण में बनाया था. उदाहरण के लिए, Cloud Run access to Firestore
बनाएं पर क्लिक करें

इससे Cloud Run सेवा डिप्लॉय हो जाएगी. इसमें वह गड़बड़ी मौजूद है जिसे आपको अगले सेक्शन में ठीक करना है.

10. गड़बड़ी ठीक करना

कोड में मौजूद गड़बड़ी को ठीक करना

Cloud Shell Editor में, app.js फ़ाइल खोलें और उस टिप्पणी पर जाएं जिसमें //TODO: fix this bug लिखा है

नीचे दी गई लाइन को

 //TODO: fix this bug
    await doc.set({
        name: name
    });

से

//fixed town bug
    await doc.set({
        name: name,
        town: town
    });

इस कमांड को चलाकर, समस्या हल होने की पुष्टि करें

npm run start

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

समस्या ठीक होने की पुष्टि करने के बाद, अब इसे डिप्लॉय किया जा सकता है. सबसे पहले, गड़बड़ी को ठीक करें.

git add .
git commit -m "fixed town bug"

इसके बाद, उसे GitHub पर अपस्ट्रीम रिपॉज़िटरी में पुश करें.

git push origin main

Cloud Build, आपके बदलावों को अपने-आप डिप्लॉय कर देगा. डिप्लॉयमेंट में हुए बदलावों को मॉनिटर करने के लिए, Cloud Run सेवा के Cloud Console पर जाएं.

प्रोडक्शन में समस्या हल होने की पुष्टि करना

जब Cloud Run सेवा के लिए Cloud Console में यह दिखे कि दूसरा वर्शन अब 100% ट्रैफ़िक को मैनेज कर रहा है, जैसे कि https://console.cloud.google.com/run/detail/<YOUR_REGION>/<YOUR_SERVICE_NAME>/revisions, तब अपने ब्राउज़र में Cloud Run सेवा का यूआरएल खोलें. इसके बाद, पुष्टि करें कि पेज को रीफ़्रेश करने के बाद, शहर का नया डेटा सेव हो गया है.

11. बधाई हो!

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

हमारा सुझाव है कि आप Cloud Run और git से लगातार डिप्लॉयमेंट के बारे में दस्तावेज़ पढ़ें.

हमने क्या-क्या बताया

Cloud Shell Editor की मदद से Express वेब ऐप्लिकेशन लिखना
लगातार डिप्लॉयमेंट के लिए, अपने GitHub खाते को Google Cloud से कनेक्ट करना
अपने ऐप्लिकेशन को Cloud Run पर अपने-आप डिप्लॉय करना
HTMX और TailwindCSS इस्तेमाल करने का तरीका जानें

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

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

Cloud Run सेवा को मिटाने के लिए, Cloud Run Cloud Console पर जाएं. इसके लिए, https://console.cloud.google.com/run पर जाएं. इसके बाद, इस कोडलैब में बनाई गई Cloud Run सेवा को मिटाएं. उदाहरण के लिए, cloud-run-auto-deploy-codelab सेवा को मिटाएं.

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