ক্লাউড বিল্ড ব্যবহার করে কীভাবে গিটহাব থেকে ক্লাউড রানে আপনার পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে স্থাপন করবেন

1. ভূমিকা

ওভারভিউ

এই কোডল্যাবে, আপনি যখনই আপনার সোর্স কোড পরিবর্তনগুলিকে গিটহাব রিপোজিটরিতে ঠেলে দেবেন তখনই আপনি আপনার অ্যাপ্লিকেশনের নতুন সংস্করণগুলি স্বয়ংক্রিয়ভাবে তৈরি এবং স্থাপন করতে ক্লাউড রান কনফিগার করবেন।

এই ডেমো অ্যাপ্লিকেশনটি ফায়ারস্টোরে ব্যবহারকারীর ডেটা সংরক্ষণ করে, তবে শুধুমাত্র আংশিক পরিমাণ ডেটা সঠিকভাবে সংরক্ষণ করা হয়। আপনি ক্রমাগত স্থাপনাগুলি কনফিগার করবেন যাতে আপনি যখন আপনার GitHub সংগ্রহস্থলে একটি বাগ ফিক্স পুশ করেন, আপনি স্বয়ংক্রিয়ভাবে দেখতে পাবেন যে সমাধানটি একটি নতুন সংশোধনে উপলব্ধ হয়ে গেছে।

আপনি কি শিখবেন

  • ক্লাউড শেল সম্পাদকের সাথে একটি এক্সপ্রেস ওয়েব অ্যাপ্লিকেশন লিখুন
  • ক্রমাগত স্থাপনার জন্য আপনার GitHub অ্যাকাউন্টটি Google ক্লাউডের সাথে সংযুক্ত করুন
  • ক্লাউড রানে স্বয়ংক্রিয়ভাবে আপনার অ্যাপ্লিকেশন স্থাপন করুন
  • এইচটিএমএক্স এবং টেইলউইন্ডসিএসএস কীভাবে ব্যবহার করবেন তা শিখুন

2. সেটআপ এবং প্রয়োজনীয়তা

পূর্বশর্ত

  • আপনার একটি GitHub অ্যাকাউন্ট আছে এবং আপনি কোড তৈরি এবং রিপোজিটরিতে পুশ করার সাথে পরিচিত।
  • আপনি ক্লাউড কনসোলে লগ ইন করেছেন।
  • আপনি পূর্বে একটি ক্লাউড রান পরিষেবা স্থাপন করেছেন৷ উদাহরণস্বরূপ, আপনি শুরু করতে সোর্স কোড কুইকস্টার্ট থেকে একটি ওয়েব পরিষেবা স্থাপন অনুসরণ করতে পারেন।

ক্লাউড শেল সক্রিয় করুন

  1. ক্লাউড কনসোল থেকে, ক্লাউড শেল সক্রিয় করুন ক্লিক করুন d1264ca30785e435.png .

cb81e7c8e34bc8d.png

যদি এটি আপনার প্রথমবার ক্লাউড শেল শুরু হয়, তাহলে এটি কী তা বর্ণনা করে আপনাকে একটি মধ্যবর্তী স্ক্রীন উপস্থাপন করা হবে। যদি আপনি একটি মধ্যবর্তী স্ক্রীনের সাথে উপস্থাপিত হন, তবে চালিয়ে যান ক্লিক করুন।

d95252b003979716.png

ক্লাউড শেলের সাথে সংযোগ করতে এবং সংযোগ করতে এটির মাত্র কয়েক মুহূর্ত লাগবে৷

7833d5e1c5d18f54.png

এই ভার্চুয়াল মেশিনটি প্রয়োজনীয় সমস্ত বিকাশের সরঞ্জাম দিয়ে লোড করা হয়েছে। এটি একটি ক্রমাগত 5 GB হোম ডিরেক্টরি অফার করে এবং Google ক্লাউডে চলে, যা নেটওয়ার্ক কর্মক্ষমতা এবং প্রমাণীকরণকে ব্যাপকভাবে উন্নত করে। এই কোডল্যাবে আপনার অনেক কাজ, যদি সব না হয়, ব্রাউজার দিয়ে করা যেতে পারে।

একবার ক্লাউড শেলের সাথে সংযুক্ত হয়ে গেলে, আপনি দেখতে পাবেন যে আপনি প্রমাণীকৃত হয়েছেন এবং প্রকল্পটি আপনার প্রকল্প আইডিতে সেট করা আছে।

  1. আপনি প্রমাণীকৃত কিনা তা নিশ্চিত করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান: 
gcloud auth list

কমান্ড আউটপুট

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

To set the active account, run:
    $ gcloud config set account `ACCOUNT`
  1. gcloud কমান্ড আপনার প্রকল্প সম্পর্কে জানে তা নিশ্চিত করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান: 
gcloud config list project

কমান্ড আউটপুট

[core]
project = <PROJECT_ID>

যদি এটি না হয়, আপনি এই কমান্ড দিয়ে এটি সেট করতে পারেন:

gcloud config set project <PROJECT_ID>

কমান্ড আউটপুট

Updated property [core/project].

3. এপিআই সক্ষম করুন এবং এনভায়রনমেন্ট ভেরিয়েবল সেট করুন

এপিআই সক্ষম করুন

এই কোডল্যাবের জন্য নিম্নলিখিত API ব্যবহার করা প্রয়োজন। আপনি নিম্নলিখিত কমান্ডটি চালিয়ে সেই APIগুলি সক্ষম করতে পারেন:

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 ব্যবহার করবে। এই পরিষেবা অ্যাকাউন্টে ফায়ারস্টোরে পড়তে এবং লিখতে এবং সিক্রেট ম্যানেজারের গোপনীয়তা পড়ার অনুমতিও থাকবে।

প্রথমে, এই কমান্ডটি চালিয়ে পরিষেবা অ্যাকাউন্ট তৈরি করুন:

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

এখন, পরিষেবা অ্যাকাউন্টটিকে ফায়ারস্টোরে পড়ার এবং লেখার অ্যাক্সেসের অনুমতি দিন। 

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

5. একটি ফায়ারবেস প্রকল্প তৈরি এবং কনফিগার করুন৷

  1. Firebase কনসোলে , প্রজেক্ট যোগ করুন ক্লিক করুন।
  2. আপনার বিদ্যমান Google ক্লাউড প্রকল্পগুলির একটিতে Firebase যোগ করতে <YOUR_PROJECT_ID> লিখুন
  3. অনুরোধ করা হলে, Firebase শর্তাবলী পর্যালোচনা করুন এবং স্বীকার করুন।
  4. অবিরত ক্লিক করুন.
  5. Firebase বিলিং পরিকল্পনা নিশ্চিত করতে পরিকল্পনা নিশ্চিত করুন ক্লিক করুন।
  6. এই কোডল্যাবের জন্য Google Analytics সক্ষম করা ঐচ্ছিক।
  7. Firebase যোগ করুন ক্লিক করুন।
  8. প্রজেক্ট তৈরি হয়ে গেলে Continue এ ক্লিক করুন।
  9. বিল্ড মেনু থেকে, ফায়ারস্টোর ডাটাবেসে ক্লিক করুন।
  10. ডাটাবেস তৈরি করুন ক্লিক করুন।
  11. অবস্থান ড্রপ-ডাউন থেকে আপনার অঞ্চল চয়ন করুন, তারপর পরবর্তী ক্লিক করুন।
  12. প্রোডাকশন মোডে ডিফল্ট স্টার্ট ব্যবহার করুন, তারপর তৈরি করুন ক্লিক করুন।

6. আবেদনটি লিখুন

প্রথমে, সেই ডিরেক্টরিতে সোর্স কোড এবং সিডির জন্য একটি ডিরেক্টরি তৈরি করুন। 

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 অ্যাক্সেস করার জন্য আপনার হয় ডেটাস্টোর ব্যবহারকারীর ভূমিকা থাকতে হবে (যদি প্রমাণীকরণের জন্য আপনার পরিচয় ব্যবহার করেন, যেমন আপনি ক্লাউড শেল চালাচ্ছেন) অথবা আপনি পূর্বে তৈরি করা ব্যবহারকারীর অ্যাকাউন্টের ছদ্মবেশ ধারণ করতে পারেন।

স্থানীয়ভাবে চালানোর সময় ADC ব্যবহার করা

আপনি যদি ক্লাউড শেল চালাচ্ছেন, আপনি ইতিমধ্যেই একটি Google Compute Engine ভার্চুয়াল মেশিনে চলছেন৷ এই ভার্চুয়াল মেশিনের সাথে যুক্ত আপনার শংসাপত্রগুলি (যেমন gcloud auth list চালানোর মাধ্যমে দেখানো হয়েছে) স্বয়ংক্রিয়ভাবে অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র (ADC) দ্বারা ব্যবহার করা হবে, তাই gcloud auth application-default login কমান্ড ব্যবহার করার প্রয়োজন নেই। যাইহোক, আপনার পরিচয়ের জন্য এখনও ডেটাস্টোর ব্যবহারকারীর ভূমিকার প্রয়োজন হবে। আপনি স্থানীয়ভাবে অ্যাপ চালান বিভাগে এড়িয়ে যেতে পারেন।

যাইহোক, যদি আপনি আপনার স্থানীয় টার্মিনালে (অর্থাৎ ক্লাউড শেলে নয়) চালাচ্ছেন, তাহলে আপনাকে Google API-এ প্রমাণীকরণের জন্য অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র ব্যবহার করতে হবে। আপনি হয় 1) আপনার শংসাপত্র ব্যবহার করে লগইন করতে পারেন (যদি আপনার ডেটাস্টোর ব্যবহারকারীর ভূমিকা থাকে) বা 2) আপনি এই কোডল্যাবে ব্যবহৃত পরিষেবা অ্যাকাউন্টের ছদ্মবেশী করে লগইন করতে পারেন।

বিকল্প 1) ADC-এর জন্য আপনার শংসাপত্র ব্যবহার করা

আপনি যদি আপনার শংসাপত্রগুলি ব্যবহার করতে চান, তাহলে আপনি কীভাবে gcloud-এ প্রমাণীকরণ করেছেন তা যাচাই করতে আপনি প্রথমে gcloud auth list চালাতে পারেন। এর পরে, আপনাকে আপনার পরিচয় প্রদান করতে হতে পারে Vertex AI ব্যবহারকারীর ভূমিকা। আপনার পরিচয়ের মালিকের ভূমিকা থাকলে, আপনার কাছে ইতিমধ্যেই এই ডেটাস্টোর ব্যবহারকারী ব্যবহারকারীর ভূমিকা রয়েছে৷ যদি না হয়, আপনি আপনার পরিচয় 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

বিকল্প 2) ADC-এর জন্য একটি পরিষেবা অ্যাকাউন্ট ছদ্মবেশী করা

আপনি যদি এই কোডল্যাবে তৈরি পরিষেবা অ্যাকাউন্ট ব্যবহার করতে চান তবে আপনার ব্যবহারকারীর অ্যাকাউন্টে পরিষেবা অ্যাকাউন্ট টোকেন নির্মাতার ভূমিকা থাকতে হবে। আপনি নিম্নলিখিত কমান্ড চালানোর মাধ্যমে এই ভূমিকা পেতে পারেন: 

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 থেকে output.css ফাইলও তৈরি করবে। 

npm run dev

এখন আপনার ওয়েব ব্রাউজারটি http://localhost:8080 এ খুলুন। আপনি যদি ক্লাউড শেলে থাকেন, আপনি ওয়েব প্রিভিউ বোতামটি খুলে এবং প্রিভিউ পোর্ট 8080 নির্বাচন করে ওয়েবসাইটটি খুলতে পারেন।

ওয়েব প্রিভিউ - পোর্ট 8080 বোতামে পূর্বরূপ

নাম এবং শহরের ইনপুট ক্ষেত্রের জন্য পাঠ্য লিখুন এবং সংরক্ষণ করুন টিপুন। তারপর পৃষ্ঠাটি রিফ্রেশ করুন। আপনি লক্ষ্য করবেন যে শহরের ক্ষেত্রটি স্থায়ী হয়নি। আপনি পরবর্তী বিভাগে এই বাগটি ঠিক করবেন।

এক্সপ্রেস অ্যাপকে স্থানীয়ভাবে চালানো বন্ধ করুন (যেমন MacOS-এ Ctrl^c)।

8. একটি GitHub সংগ্রহস্থল তৈরি করুন

আপনার স্থানীয় ডিরেক্টরিতে, ডিফল্ট শাখার নাম হিসাবে প্রধান সহ একটি নতুন রেপো তৈরি করুন। 

git init
git branch -M main

বাগ ধারণ করে বর্তমান কোডবেস কমিট করুন। ক্রমাগত স্থাপনা কনফিগার করার পরে আপনি বাগটি ঠিক করবেন। 

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

গিটহাবে যান এবং একটি খালি সংগ্রহস্থল তৈরি করুন যা হয় আপনার ব্যক্তিগত বা সর্বজনীন। এই কোডল্যাবটি আপনার রিপোজিটরির নামকরণের সুপারিশ করে cloud-run-auto-deploy-codelab একটি খালি সংগ্রহস্থল তৈরি করতে, আপনি সমস্ত ডিফল্ট সেটিংস চেক না করে রেখে দেবেন বা এমন কোনওটিতে সেট করবেন না যাতে তৈরি করার সময় কোনও সামগ্রী ডিফল্টরূপে রেপোতে থাকবে না, যেমন

GitHub ডিফল্ট সেটিংস

আপনি যদি এই ধাপটি সঠিকভাবে সম্পন্ন করেন, তাহলে আপনি খালি সংগ্রহস্থল পৃষ্ঠায় নিম্নলিখিত নির্দেশাবলী দেখতে পাবেন:

GitHub রেপো নির্দেশাবলী খালি করুন

আপনি নিম্নলিখিত কমান্ডগুলি চালিয়ে কমান্ড লাইন নির্দেশাবলী থেকে একটি বিদ্যমান সংগ্রহস্থল ধাক্কা অনুসরণ করবেন:

প্রথমে, রান করে রিমোট রিপোজিটরি যোগ করুন 

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

তারপর মূল শাখাটিকে আপস্ট্রিম রেপোতে ঠেলে দিন। 

git push -u origin main

9. ক্রমাগত স্থাপনা সেটআপ করুন

এখন আপনার একটি GitHub এ কোড আছে, আপনি ক্রমাগত স্থাপনা সেটআপ করতে পারেন। ক্লাউড রানের জন্য ক্লাউড কনসোলে যান।

  • একটি পরিষেবা তৈরি করুন ক্লিক করুন
  • একটি সংগ্রহস্থল থেকে ক্রমাগত স্থাপন ক্লিক করুন
  • ক্লাউড বিল্ড সেট আপ করুন ক্লিক করুন।
  • উৎস ভান্ডারের অধীনে
    • রিপোজিটরি প্রদানকারী হিসাবে GitHub নির্বাচন করুন
    • রেপোতে ক্লাউড বিল্ড অ্যাক্সেস কনফিগার করতে সংযুক্ত সংগ্রহস্থলগুলি পরিচালনা করুন ক্লিক করুন৷
    • আপনার সংগ্রহস্থল নির্বাচন করুন এবং পরবর্তী ক্লিক করুন
  • বিল্ড কনফিগারেশনের অধীনে
    • ^প্রধান$ হিসাবে শাখা ছেড়ে দিন
    • বিল্ড টাইপের জন্য, Google ক্লাউডের বিল্ডপ্যাকগুলির মাধ্যমে Go, Node.js, Python, Java, .NET Core, Ruby বা PHP নির্বাচন করুন
  • বিল্ড কনটেক্সট ডিরেক্টরিকে / হিসাবে ছেড়ে দিন
  • Save এ ক্লিক করুন
  • প্রমাণীকরণ অধীনে
    • অননুমোদিত আহ্বানের অনুমতি দিন ক্লিক করুন
  • ধারক(গুলি), ভলিউম, নেটওয়ার্কিং, নিরাপত্তার অধীনে
    • নিরাপত্তা ট্যাবের অধীনে, পূর্ববর্তী ধাপে আপনার তৈরি করা পরিষেবা অ্যাকাউন্ট নির্বাচন করুন, যেমন Cloud Run access to Firestore
  • CREATE এ ক্লিক করুন

এটি ক্লাউড রান পরিষেবা স্থাপন করবে যেটি বাগ রয়েছে যা আপনি পরবর্তী বিভাগে ঠিক করবেন৷

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"

এবং তারপর এটিকে গিটহাবের আপস্ট্রিম সংগ্রহস্থলে ঠেলে দিন। 

git push origin main

ক্লাউড বিল্ড স্বয়ংক্রিয়ভাবে আপনার পরিবর্তনগুলি স্থাপন করবে৷ আপনি স্থাপনার পরিবর্তনগুলি নিরীক্ষণ করতে আপনার ক্লাউড রান পরিষেবার জন্য ক্লাউড কনসোলে যেতে পারেন।

উৎপাদনে ফিক্স যাচাই করুন

একবার আপনার ক্লাউড রান পরিষেবার জন্য ক্লাউড কনসোল দেখায় যে একটি 2য় সংশোধন এখন 100% ট্রাফিক পরিবেশন করছে, যেমন https://console.cloud.google.com/run/detail/<YOUR_REGION>/<YOUR_SERVICE_NAME>/রিভিশন, আপনি খুলতে পারেন আপনার ব্রাউজারে ক্লাউড রান পরিষেবার URL এবং পৃষ্ঠাটি রিফ্রেশ করার পরে নতুন প্রবেশ করা শহরের ডেটা টিকে আছে তা যাচাই করুন।

11. অভিনন্দন!

কোডল্যাব সম্পূর্ণ করার জন্য অভিনন্দন!

আমরা গিট থেকে ক্লাউড রান এবং ক্রমাগত স্থাপনার ডকুমেন্টেশন পর্যালোচনা করার পরামর্শ দিই।

আমরা কভার করেছি কি

  • ক্লাউড শেল সম্পাদকের সাথে একটি এক্সপ্রেস ওয়েব অ্যাপ্লিকেশন লিখুন
  • ক্রমাগত স্থাপনার জন্য আপনার GitHub অ্যাকাউন্টটি Google ক্লাউডের সাথে সংযুক্ত করুন
  • ক্লাউড রানে স্বয়ংক্রিয়ভাবে আপনার অ্যাপ্লিকেশন স্থাপন করুন
  • এইচটিএমএক্স এবং টেইলউইন্ডসিএসএস কীভাবে ব্যবহার করবেন তা শিখুন

12. পরিষ্কার করুন

অসাবধানতাবশত চার্জ এড়াতে, (উদাহরণস্বরূপ, যদি ক্লাউড রান পরিষেবাগুলি আপনার মাসিক ক্লাউড রান ইনভোকমেন্ট বরাদ্দের চেয়ে বিনামূল্যের স্তরে অজান্তেই বেশি বার আহ্বান করা হয়), আপনি হয় ক্লাউড রানটি মুছে ফেলতে পারেন বা ধাপ 2 এ আপনার তৈরি করা প্রকল্পটি মুছে ফেলতে পারেন৷

ক্লাউড রান পরিষেবাটি মুছতে, https://console.cloud.google.com/run-এ ক্লাউড রান ক্লাউড কনসোলে যান এবং এই কোডল্যাবে আপনার তৈরি করা ক্লাউড রান পরিষেবাটি মুছুন, যেমন cloud-run-auto-deploy-codelab মুছুন cloud-run-auto-deploy-codelab পরিষেবা।

আপনি যদি সম্পূর্ণ প্রকল্প মুছে ফেলার সিদ্ধান্ত নেন, আপনি https://console.cloud.google.com/cloud-resource-manager- এ যেতে পারেন, ধাপ 2-এ আপনার তৈরি করা প্রকল্পটি নির্বাচন করুন এবং মুছুন নির্বাচন করুন৷ আপনি যদি প্রকল্পটি মুছে ফেলেন, তাহলে আপনাকে আপনার ক্লাউড SDK-এ প্রকল্পগুলি পরিবর্তন করতে হবে৷ আপনি gcloud projects list চালিয়ে সমস্ত উপলব্ধ প্রকল্পের তালিকা দেখতে পারেন।