ক্লাউড রানে কীভাবে একটি জেনারেটিভ UI ওয়েবসাইট স্থাপন করবেন

১. ভূমিকা

সংক্ষিপ্ত বিবরণ

এই ল্যাবে, আপনি এমন একটি ওয়েবসাইট তৈরি এবং ডেপ্লয় করবেন যার কন্টেন্ট গুগলের জেমিনি লার্জ ল্যাঙ্গুয়েজ মডেল দ্বারা তাৎক্ষণিকভাবে তৈরি হবে। ওয়েবসাইটটি হবে বিভিন্ন বিষয় অন্বেষণের জন্য একটি সহজ "নিজের পছন্দমতো পথ বেছে নিন" ধরনের নেভিগেটর, যেখানে প্রতিটি ক্লিকে আপনার পছন্দের উপর ভিত্তি করে নতুন লিঙ্কসহ একটি নতুন পৃষ্ঠা তৈরি হবে। আপনি এটি Node.js এবং Fastify দিয়ে তৈরি করবেন, জেমিনিকে কল করার জন্য Vertex AI SDK ব্যবহার করবেন, Cloud Run-এ এটিকে একটি সুরক্ষিত, প্রোডাকশন-রেডি সার্ভিস হিসেবে ডেপ্লয় করবেন এবং Identity-Aware Proxy (IAP) ব্যবহার করে সুরক্ষিত করবেন।

আপনি যা করবেন

  • একটি Node.js Fastify অ্যাপ্লিকেশন তৈরি করুন যা Vertex AI ব্যবহার করে।
  • ডকারফাইল ছাড়াই সোর্স থেকে ক্লাউড রান-এ অ্যাপ্লিকেশনটি ডেপ্লয় করুন।
  • আইডেন্টিটি-অ্যাওয়্যার প্রক্সি (IAP) ব্যবহার করে ক্লাউড রান এন্ডপয়েন্ট সুরক্ষিত করুন।

আপনি যা শিখবেন

  • কন্টেন্ট তৈরি করতে কীভাবে Node.js-এর জন্য Vertex AI SDK ব্যবহার করবেন।
  • ক্লাউড রানে কীভাবে একটি Node.js অ্যাপ্লিকেশন ডেপ্লয় করবেন।
  • IAP ব্যবহার করে কীভাবে একটি ক্লাউড রান অ্যাপ্লিকেশন সুরক্ষিত করা যায়।

২. প্রকল্প স্থাপন

  1. যদি আপনার আগে থেকে কোনো গুগল অ্যাকাউন্ট না থাকে, তাহলে আপনাকে অবশ্যই একটি গুগল অ্যাকাউন্ট তৈরি করতে হবে।
    • কর্মক্ষেত্র বা শিক্ষা প্রতিষ্ঠানের অ্যাকাউন্টের পরিবর্তে ব্যক্তিগত অ্যাকাউন্ট ব্যবহার করুন। কর্মক্ষেত্র এবং শিক্ষা প্রতিষ্ঠানে এমন কিছু সীমাবদ্ধতা থাকতে পারে, যার ফলে আপনি এই ল্যাবের জন্য প্রয়োজনীয় এপিআই (API) সক্রিয় করতে পারবেন না।
  2. গুগল ক্লাউড কনসোলে সাইন-ইন করুন।
  3. ক্লাউড কনসোলে বিলিং চালু করুন ।
    • এই ল্যাবটি সম্পন্ন করতে ক্লাউড রিসোর্সে ১ মার্কিন ডলারেরও কম খরচ হওয়া উচিত।
    • পরবর্তী চার্জ এড়াতে, এই ল্যাবের শেষে দেওয়া ধাপগুলো অনুসরণ করে আপনি রিসোর্সগুলো মুছে ফেলতে পারেন।
    • নতুন ব্যবহারকারীরা ৩০০ মার্কিন ডলারের ফ্রি ট্রায়ালের জন্য যোগ্য।
  4. একটি নতুন প্রজেক্ট তৈরি করুন অথবা বিদ্যমান কোনো প্রজেক্ট পুনরায় ব্যবহার করুন।
    • প্রজেক্ট কোটা সংক্রান্ত কোনো ত্রুটি দেখলে, একটি নতুন প্রজেক্ট তৈরি করার জন্য বিদ্যমান কোনো প্রজেক্ট পুনরায় ব্যবহার করুন অথবা আগের প্রজেক্টটি মুছে ফেলুন।

৩. ক্লাউড শেল এডিটর খুলুন

  1. সরাসরি ক্লাউড শেল এডিটর- এ যেতে এই লিঙ্কে ক্লিক করুন।
  2. আজ যেকোনো সময়ে অনুমোদনের জন্য অনুরোধ করা হলে, চালিয়ে যাওয়ার জন্য 'অনুমোদন করুন' (Authorize) বোতামে ক্লিক করুন। ক্লাউড শেল অনুমোদন করতে ক্লিক করুন
  3. যদি স্ক্রিনের নিচে টার্মিনালটি দেখা না যায়, তাহলে এটি খুলুন:
    • ভিউ ক্লিক করুন
    • টার্মিনালে ক্লিক করুন ক্লাউড শেল এডিটরে নতুন টার্মিনাল খুলুন
  4. টার্মিনালে এই কমান্ডটি দিয়ে আপনার প্রজেক্ট সেট করুন:
    • বিন্যাস: 
      gcloud config set project [PROJECT_ID]
    • উদাহরণ: 
      gcloud config set project lab-project-id-example
    • যদি আপনি আপনার প্রজেক্ট আইডি মনে করতে না পারেন:
      • আপনি আপনার সমস্ত প্রজেক্ট আইডি তালিকাভুক্ত করতে পারেন: 
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ক্লাউড শেল এডিটর টার্মিনালে প্রজেক্ট আইডি সেট করুন
  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)

৪. এপিআই সক্রিয় করুন

টার্মিনালে, এপিআইগুলো সক্রিয় করুন:

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

অনুমোদন করতে বলা হলে, চালিয়ে যাওয়ার জন্য 'Authorize'-এ ক্লিক করুন। ক্লাউড শেল অনুমোদন করতে ক্লিক করুন

এই কমান্ডটি সম্পন্ন হতে কয়েক মিনিট সময় লাগতে পারে, কিন্তু অবশেষে এটি এইটির মতো একটি সফলতার বার্তা দেবে:

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

৫. আপনার Node.js প্রজেক্ট প্রস্তুত করুন।

  1. ডিপ্লয়মেন্টের জন্য সোর্স কোড সংরক্ষণ করতে gen-ui-on-cloudrun নামে একটি ফোল্ডার তৈরি করুন: 
    mkdir gen-ui-on-cloudrun && cd gen-ui-on-cloudrun
  2. একটি Node.js প্রজেক্ট শুরু করুন: 
    npm init -y
  3. প্রজেক্টটিকে ES মডিউল ব্যবহার করার জন্য কনফিগার করতে এবং একটি স্টার্ট স্ক্রিপ্ট নির্ধারণ করতে এই কমান্ডগুলো চালান: 
    npm pkg set type="module"
  4. ওয়েব সার্ভারের জন্য fastify এবং Vertex AI SDK-এর জন্য @google/genai ইনস্টল করুন: 
    npm install fastify @google/genai

৬. অ্যাপ্লিকেশন কোড তৈরি করুন

  1. অ্যাপ্লিকেশন সোর্স কোডের জন্য একটি নতুন index.ts ফাইল তৈরি করে খুলুন:
    cloudshell edit ~/gen-ui-on-cloudrun/index.ts
    cloudshell edit কমান্ডটি টার্মিনালের উপরের এডিটরে index.ts ফাইলটি খুলবে।
  2. index.ts ফাইলে নিম্নলিখিত জেনারেটিভ UI সার্ভার সোর্স কোডটি যোগ করুন: 
    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();

এই কোডটি একটি ওয়েব সার্ভার সেট আপ করে যা রুট পাথে ( / ) HTTP GET অনুরোধ শোনার জন্য প্রস্তুত থাকে। যখন একটি অনুরোধ গৃহীত হয়, তখন এটি Vertex AI-এর মাধ্যমে Gemini 2.5 ফ্ল্যাশ মডেলকে প্রম্পট করার জন্য nextPageDescription কোয়েরি প্যারামিটার (বা একটি ডিফল্ট মান) ব্যবহার করে। SYSTEM_INSTRUCTION দ্বারা মডেলটিকে লিঙ্ক সম্বলিত একটি HTML পৃষ্ঠা ফেরত দেওয়ার নির্দেশ দেওয়া হয়, যেখানে প্রতিটি লিঙ্কে পরবর্তী পৃষ্ঠা তৈরির জন্য একটি nextPageDescription অন্তর্ভুক্ত থাকে।

৭. পরিষেবা অ্যাকাউন্ট তৈরি করুন

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"

৮. ক্লাউড রানে স্থাপন করুন

এখন ডকারফাইলের প্রয়োজন ছাড়াই সরাসরি সোর্স কোড থেকে অ্যাপ্লিকেশনটি ক্লাউড রান-এ ডেপ্লয় করুন।

  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 : এটি ক্লাউড রানকে বর্তমান ডিরেক্টরি থেকে সোর্স কোড ডেপ্লয় করতে, বিল্ড পর্বটি এড়িয়ে যেতে এবং আগে থেকে তৈরি করা একটি Node.js 24 বেস ইমেজ ব্যবহার করে অ্যাপ্লিকেশনটি চালাতে নির্দেশ দেয়।
    • --no-allow-unauthenticated : এটি নিশ্চিত করে যে শুধুমাত্র প্রমাণীকৃত ব্যবহারকারীরাই পরিষেবাটি অ্যাক্সেস করতে পারবে।
    • --iap : এটি আপনার অ্যাপ্লিকেশনে অ্যাক্সেস পরিচালনা করার জন্য আইডেন্টিটি-অ্যাওয়্যার প্রক্সি (IAP) সক্ষম করে। IAP আপনাকে শুধু আইপি অ্যাড্রেসের পরিবর্তে ব্যবহারকারীর পরিচয় এবং প্রেক্ষাপটের উপর ভিত্তি করে অ্যাক্সেস নিয়ন্ত্রণ করতে দেয়।
  2. কয়েক মিনিট পর আপনি এইরকম একটি বার্তা দেখতে পাবেন: 
    Service [generative-web-navigator] revision [generative-web-navigator-12345-abc] has been deployed and is serving 100 percent of traffic.

আপনি আপনার অ্যাপ্লিকেশনটি স্থাপন করেছেন, কিন্তু অ্যাক্সেসের অনুমতি দেওয়ার জন্য আপনাকে এখনও IAP কনফিগার করতে হবে।

৯. আইএপি অ্যাক্সেস কনফিগার করুন

আপনি যখন ক্লাউড রান-এ IAP সক্রিয় করেন, তখন এটি সমস্ত অনুরোধ আটকে দেয় এবং ব্যবহারকারীদের আপনার পরিষেবাতে পৌঁছানোর আগে প্রমাণীকরণ ও অনুমোদন করতে বলে। এটি কার্যকর করার জন্য, আপনাকে দুটি অনুমতি প্রদান করতে হবে:

  • IAP পরিষেবাটিকে নিজেই আপনার ক্লাউড রান পরিষেবা আহ্বান করার অনুমতি দিন।
  • IAP-এর মাধ্যমে অ্যাপ্লিকেশনটি অ্যাক্সেস করার জন্য নিজেকে (অথবা অন্য ব্যবহারকারী/গ্রুপকে) অনুমতি দিন।
  1. আপনার প্রজেক্ট নম্বরটি সংগ্রহ করুন, যা IAP সার্ভিস এজেন্টকে শনাক্ত করার জন্য প্রয়োজন: 
    export PROJECT_NUMBER=$(gcloud projects describe $GOOGLE_CLOUD_PROJECT --format="value(projectNumber)")
  2. আপনার ক্লাউড রান সার্ভিসে IAP সার্ভিস এজেন্টকে 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 রোলটি প্রদান করুন। এর মাধ্যমে আপনি IAP-সুরক্ষিত HTTPS রিসোর্সসমূহ অ্যাক্সেস করতে পারবেন। 
    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"

১০. অ্যাপ্লিকেশনটি পরীক্ষা করুন

  1. আপনার ডেপ্লয় করা সার্ভিসের URL-টি নিন: 
    gcloud run services describe generative-web-navigator --format='value(status.url)' --region=europe-west1
  2. ইউআরএলটি কপি করে আপনার ওয়েব ব্রাউজারে খুলুন। যেহেতু পরিষেবাটি আইএপি (IAP) দ্বারা সুরক্ষিত, আপনি যদি আগে থেকে লগ ইন করা না থাকেন, তবে আপনাকে আপনার গুগল অ্যাকাউন্ট দিয়ে লগ ইন করতে বলা হবে। প্রমাণীকরণের পরে, আপনি প্রথম স্বয়ংক্রিয়ভাবে তৈরি পৃষ্ঠাটি দেখতে পাবেন।
  3. যেকোনো লিঙ্কে ক্লিক করলে একটি নতুন পৃষ্ঠা তৈরি হবে, যা আপনার ক্লিক করা লিঙ্কের উপর ভিত্তি করে এআই দ্বারা তৈরি করা হবে!

আপনি পেরেছেন! আপনি সফলভাবে ক্লাউড রান-এ একটি জেনারেটিভ UI ওয়েবসাইট ডেপ্লয় করেছেন এবং IAP ব্যবহার করে এটিকে সুরক্ষিত করেছেন।

১১. উপসংহার

অভিনন্দন! আপনি Cloud Run, Vertex AI, এবং IAP ব্যবহার করে সফলভাবে একটি জেনারেটিভ UI ওয়েবসাইট স্থাপন ও সুরক্ষিত করেছেন।

(ঐচ্ছিক) পরিষ্কার করা

আপনি যদি আপনার তৈরি করা কন্টেন্ট মুছে ফেলতে চান, তাহলে অতিরিক্ত চার্জ এড়ানোর জন্য আপনার ক্লাউড প্রজেক্টটি ডিলিট করে দিতে পারেন।

পরিষেবাটি ব্যবহার না করা হলে ক্লাউড রান কোনো চার্জ না করলেও, যদি কোনো বিল্ড আর্টিফ্যাক্ট তৈরি হয়ে থাকে, তবে তা সংরক্ষণের জন্য আপনাকে চার্জ করা হতে পারে। আপনার ক্লাউড প্রজেক্টটি ডিলিট করে দিলে সেই প্রজেক্টের মধ্যে ব্যবহৃত সমস্ত রিসোর্সের বিলিং বন্ধ হয়ে যায়।

আপনি চাইলে প্রজেক্টটি মুছে ফেলতে পারেন: 

gcloud projects delete $GOOGLE_CLOUD_PROJECT

আপনি আপনার ক্লাউডশেল ডিস্ক থেকে অপ্রয়োজনীয় রিসোর্সগুলো মুছে ফেলতে চাইতে পারেন। আপনি তা করতে পারেন:

  1. কোডল্যাব প্রজেক্ট ডিরেক্টরিটি মুছে ফেলুন: 
    rm -rf ~/gen-ui-on-cloudrun
  2. সতর্কীকরণ! এই পরবর্তী কাজটি পূর্বাবস্থায় ফেরানো যাবে না! জায়গা খালি করার জন্য আপনি যদি আপনার ক্লাউড শেলের সবকিছু মুছে ফেলতে চান, তাহলে আপনি আপনার সম্পূর্ণ হোম ডিরেক্টরিটি ডিলিট করে দিতে পারেন। খেয়াল রাখবেন, আপনি যা কিছু রাখতে চান তা যেন অন্য কোথাও সেভ করা থাকে। 
    sudo rm -rf $HOME