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

1. परिचय

खास जानकारी

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

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

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

Cloud Shell चालू करें

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

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

प्रावधान करने और Cloud Shell से कनेक्ट होने में कुछ ही समय लगेगा.

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

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

2. यह पुष्टि करने के लिए 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 कमांड-लाइन टूल, Google Cloud में मौजूद एक बेहतर और यूनिफ़ाइड कमांड-लाइन टूल है. यह Cloud Shell में पहले से इंस्टॉल होती है. आपको पता चलेगा कि यह टैब पूरा होने पर काम करता है. पहली बार कोई निर्देश चलाने पर, आपसे पुष्टि करने के लिए कहा जा सकता है. ज़्यादा जानकारी के लिए, gcloud command-line टूल की खास जानकारी देखें.

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

gcloud config list project

कमांड आउटपुट

[core]
project = <PROJECT_ID>

अगर ऐसा नहीं है, तो आप इसे इस निर्देश की मदद से सेट कर सकते हैं:

gcloud config set project <PROJECT_ID>

कमांड आउटपुट

Updated property [core/project].

ध्यान दें: अगर इस ट्यूटोरियल को Cloud Shell के अलावा किसी दूसरे प्लैटफ़ॉर्म पर भी पूरा किया जा रहा है, तो ऐप्लिकेशन डिफ़ॉल्ट क्रेडेंशियल सेट अप करें लेख पढ़ें.

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. सेवा खाता बनाना

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

सबसे पहले, इस निर्देश को चलाकर सेवा खाता बनाएं:

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 प्रोजेक्ट बनाना और उसे कॉन्फ़िगर करना

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

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 के उपयोगकर्ता की भूमिका होनी चाहिए. अगर पुष्टि करने के लिए अपनी पहचान का इस्तेमाल किया जा रहा है, जैसे कि Cloud Shell का इस्तेमाल किया जा रहा है, तो आपके पास पहले से बनाए गए उपयोगकर्ता खाते के नाम पर काम करने का विकल्प होना चाहिए.

डिवाइस पर चलाते समय ADC का इस्तेमाल करना

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

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

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

अगर आपको अपने क्रेडेंशियल का इस्तेमाल करना है, तो सबसे पहले gcloud auth list चलाकर देखें कि gcloud में आपकी पुष्टि कैसे हुई है. इसके बाद, आपको अपनी पहचान Vertex AI उपयोगकर्ता की भूमिका देनी पड़ सकती है. अगर आपकी पहचान के पास मालिक की भूमिका है, तो इसका मतलब है कि आपके पास पहले से Datastore के उपयोगकर्ता की यह भूमिका है. अगर ऐसा नहीं है, तो अपनी पहचान 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

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

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

ऐप्लिकेशन को डिवाइस में चलाएं

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

cd .. && pwd

अब आपको डिपेंडेंसी इंस्टॉल करनी होगी.

npm install

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

npm run dev

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

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

एक्सप्रेस ऐप्लिकेशन को स्थानीय तौर पर चलने से रोकें (जैसे कि MacOS पर Ctrl^c).

8. GitHub डेटा स्टोर करने की जगह बनाना

ध्यान दें: अगर आप Cloud Shell में Git पहली बार कॉन्फ़िगर कर रहे हैं, तो आगे बढ़ने से पहले आपको अपना Git उपयोगकर्ता नाम और ईमेल पता कॉन्फ़िगर करना होगा.

आप git config --global user.name चलाकर अपने मौजूदा git उपयोगकर्ता नाम की पुष्टि कर सकते हैं. साथ ही, आप git config --global user.email को चलाकर अपना मौजूदा ईमेल पता भी चला सकते हैं

अपनी लोकल डायरेक्ट्री में, एक नया रेपो बनाएं, जिसमें डिफ़ॉल्ट ब्रांच का नाम मुख्य हो.

git init
git branch -M main

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

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

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

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

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

सबसे पहले, रिमोट रिपॉज़िटरी को

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 पर जाएं.

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

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

10. गड़बड़ी को ठीक करें

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

क्लाउड शेल एडिटर में, 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_ निकालें>/<YOUR_SERVICE_NAME>/revisions, आप अपने ब्राउज़र में Cloud Run सेवा का यूआरएल खोल सकते हैं और पुष्टि कर सकते हैं कि पेज को रीफ़्रेश करने के बाद शहर का हाल ही में डाला गया डेटा मौजूद है.

11. बधाई हो!

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

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

इसमें हमने इन विषयों के बारे में बताया

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

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

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

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

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