1. खास जानकारी
Cloud Run, पूरी तरह से मैनेज किया गया एक प्लैटफ़ॉर्म है. इसकी मदद से, Google के स्केलेबल इन्फ़्रास्ट्रक्चर पर सीधे तौर पर अपना कोड चलाया जा सकता है. इस कोडलैब में, Cloud Run पर मौजूद Next.js ऐप्लिकेशन को Cloud SQL for PostgreSQL डेटाबेस से कनेक्ट करने का तरीका बताया जाएगा.
इस लैब में, आपको इनके बारे में जानकारी मिलेगी:
- Cloud SQL for PostgreSQL इंस्टेंस बनाना
- Cloud Run पर ऐसा ऐप्लिकेशन डिप्लॉय करना जो आपके Cloud SQL डेटाबेस से कनेक्ट हो
2. ज़रूरी शर्तें
- अगर आपके पास पहले से कोई Google खाता नहीं है, तो आपको एक Google खाता बनाना होगा.
- ऑफ़िस या स्कूल वाले खाते के बजाय, निजी खाते का इस्तेमाल करें. ऑफ़िस और स्कूल वाले खातों पर कुछ पाबंदियां हो सकती हैं. इनकी वजह से, इस लैब के लिए ज़रूरी एपीआई चालू नहीं किए जा सकते.
3. प्रोजेक्ट सेटअप करना
- Google Cloud Console में साइन इन करें.
- Cloud Console में बिलिंग चालू करें.
- इस लैब को पूरा करने में, Cloud संसाधनों पर 1 डॉलर से कम का खर्च आना चाहिए.
- ज़्यादा शुल्क से बचने के लिए, इस लैब के आखिर में दिए गए निर्देशों का पालन करके संसाधनों को मिटाया जा सकता है.
- नए उपयोगकर्ता, 300 डॉलर के मुफ़्त में आज़माने की सुविधा का फ़ायदा पा सकते हैं.
- नया प्रोजेक्ट बनाएं या किसी मौजूदा प्रोजेक्ट का फिर से इस्तेमाल करें.
4. Cloud Shell Editor खोलें
- Cloud Shell Editor पर जाएं
- अगर टर्मिनल स्क्रीन पर सबसे नीचे नहीं दिखता है, तो इसे खोलें:
- हैमबर्गर मेन्यू
पर क्लिक करें - टर्मिनल पर क्लिक करें
- नया टर्मिनल
पर क्लिक करें
- हैमबर्गर मेन्यू
- टर्मिनल में, इस निर्देश का इस्तेमाल करके अपना प्रोजेक्ट सेट करें:
- फ़ॉर्मैट:
gcloud config set project [PROJECT_ID] - उदाहरण:
gcloud config set project lab-project-id-example - अगर आपको अपना प्रोजेक्ट आईडी याद नहीं है, तो:
- अपने सभी प्रोजेक्ट आईडी की सूची देखने के लिए, यह कमांड इस्तेमाल करें:
gcloud projects list | awk '/PROJECT_ID/{print $2}'

- अपने सभी प्रोजेक्ट आईडी की सूची देखने के लिए, यह कमांड इस्तेमाल करें:
- फ़ॉर्मैट:
- अगर अनुमति देने के लिए कहा जाए, तो जारी रखने के लिए अनुमति दें पर क्लिक करें.

- आपको यह मैसेज दिखेगा:
अगर आपकोUpdated property [core/project].
WARNINGदिखता है और आपसेDo you want to continue (Y/N)?पूछा जाता है, तो इसका मतलब है कि आपने प्रोजेक्ट आईडी गलत डाला है.Nदबाएं,Enterदबाएं, औरgcloud config set projectनिर्देश को फिर से चलाने की कोशिश करें.
5. एपीआई चालू करें
टर्मिनल में, इन एपीआई को चालू करें:
gcloud services enable \
compute.googleapis.com \
sqladmin.googleapis.com \
run.googleapis.com \
artifactregistry.googleapis.com \
cloudbuild.googleapis.com \
networkconnectivity.googleapis.com \
servicenetworking.googleapis.com \
cloudaicompanion.googleapis.com
अगर अनुमति देने के लिए कहा जाए, तो जारी रखने के लिए अनुमति दें पर क्लिक करें. 
इस कमांड को पूरा होने में कुछ मिनट लग सकते हैं. हालांकि, आखिर में आपको इस तरह का मैसेज दिखेगा:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. सेवा खाता सेट अप करना
Cloud Run के लिए, Google Cloud सेवा खाता बनाएं और उसे कॉन्फ़िगर करें, ताकि उसके पास Cloud SQL से कनेक्ट करने की सही अनुमतियां हों.
- नया सेवा खाता बनाने के लिए,
gcloud iam service-accounts createकमांड को इस तरह चलाएं:gcloud iam service-accounts create quickstart-service-account \ --display-name="Quickstart Service Account" - अभी बनाए गए Google Cloud सेवा खाते में Log Writer की भूमिका जोड़ने के लिए, gcloud projects add-iam-policy-binding कमांड को इस तरह से चलाएं.
gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \ --member="serviceAccount:quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \ --role="roles/logging.logWriter"
7. Cloud SQL डेटाबेस बनाना
- Cloud Run से Cloud SQL तक नेटवर्क कनेक्टिविटी की अनुमति देने के लिए, सेवा कनेक्शन नीति बनाएं. इसके लिए, Private Service Connect का इस्तेमाल करें
gcloud network-connectivity service-connection-policies create quickstart-policy \ --network=default \ --project=${GOOGLE_CLOUD_PROJECT} \ --region=us-central1 \ --service-class=google-cloud-sql \ --subnets=https://www.googleapis.com/compute/v1/projects/${GOOGLE_CLOUD_PROJECT}/regions/us-central1/subnetworks/default - अपने डेटाबेस के लिए एक यूनीक पासवर्ड जनरेट करना
export DB_PASSWORD=$(openssl rand -base64 20) - Cloud SQL इंस्टेंस बनाने के लिए,
gcloud sql instances createकमांड चलाएंgcloud sql instances create quickstart-instance \ --project=${GOOGLE_CLOUD_PROJECT} \ --root-password=${DB_PASSWORD} \ --database-version=POSTGRES_17 \ --tier=db-perf-optimized-N-2 \ --region=us-central1 \ --ssl-mode=ENCRYPTED_ONLY \ --no-assign-ip \ --enable-private-service-connect \ --psc-auto-connections=network=projects/${GOOGLE_CLOUD_PROJECT}/global/networks/default
इस कमांड को पूरा होने में कुछ मिनट लग सकते हैं.
quickstart-instanceमें Cloud SQL डेटाबेस बनाने के लिए,gcloud sql databases createकमांड चलाएं.gcloud sql databases create quickstart_db \ --instance=quickstart-instance
8. ऐप्लिकेशन तैयार करना
एक ऐसा Next.js ऐप्लिकेशन तैयार करें जो एचटीटीपी अनुरोधों का जवाब दे.
task-appनाम का नया Next.js प्रोजेक्ट बनाने के लिए, इस कमांड का इस्तेमाल करें:npx --yes create-next-app@15 task-app \ --ts \ --eslint \ --tailwind \ --no-src-dir \ --turbopack \ --app \ --no-import-alias- डायरेक्ट्री को
task-appमें बदलें:cd task-app - PostgreSQL डेटाबेस के साथ इंटरैक्ट करने के लिए,
pgइंस्टॉल करें.npm install pg - TypeScript Next.js ऐप्लिकेशन का इस्तेमाल करने के लिए,
@types/pgको dev dependency के तौर पर इंस्टॉल करें.npm install --save-dev @types/pg - Cloud Shell Editor में
actions.tsफ़ाइल खोलें: अब स्क्रीन के सबसे ऊपर वाले हिस्से में, एक खाली फ़ाइल दिखेगी. यहां इसcloudshell edit app/actions.tsactions.tsफ़ाइल में बदलाव किया जा सकता है.
- यहां दिए गए कोड को कॉपी करें और इसे खुली हुई
actions.tsफ़ाइल में चिपकाएं:'use server' import pg from 'pg'; type Task = { id: string; title: string; status: 'IN_PROGRESS' | 'COMPLETE'; }; const { Pool } = pg; const pool = new Pool({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, ssl: { // @ts-expect-error require true is not recognized by @types/pg, but does exist on pg require: true, rejectUnauthorized: false, // required for self-signed certs // https://node-postgres.com/features/ssl#self-signed-cert } }); const tableCreationIfDoesNotExist = async () => { await pool.query(`CREATE TABLE IF NOT EXISTS tasks ( id SERIAL NOT NULL, created_at timestamp NOT NULL, status VARCHAR(255) NOT NULL default 'IN_PROGRESS', title VARCHAR(1024) NOT NULL, PRIMARY KEY (id) );`); } // CREATE export async function addNewTaskToDatabase(newTask: string) { await tableCreationIfDoesNotExist(); await pool.query(`INSERT INTO tasks(created_at, status, title) VALUES(NOW(), 'IN_PROGRESS', $1)`, [newTask]); return; } // READ export async function getTasksFromDatabase() { await tableCreationIfDoesNotExist(); const { rows } = await pool.query(`SELECT id, created_at, status, title FROM tasks ORDER BY created_at DESC LIMIT 100`); return rows; } // UPDATE export async function updateTaskInDatabase(task: Task) { await tableCreationIfDoesNotExist(); await pool.query( `UPDATE tasks SET status = $1, title = $2 WHERE id = $3`, [task.status, task.title, task.id] ); return; } // DELETE export async function deleteTaskFromDatabase(taskId: string) { await tableCreationIfDoesNotExist(); await pool.query(`DELETE FROM tasks WHERE id = $1`, [taskId]); return; } - Cloud Shell Editor में
page.tsxफ़ाइल खोलें: अब स्क्रीन के सबसे ऊपर, मौजूदा फ़ाइल दिखनी चाहिए. यहां इसcloudshell edit app/page.tsxpage.tsxफ़ाइल में बदलाव किया जा सकता है.
page.tsxफ़ाइल में मौजूद कॉन्टेंट मिटाएं.- यहां दिए गए कोड को कॉपी करें और इसे खुली हुई
page.tsxफ़ाइल में चिपकाएं:'use client' import React, { useEffect, useState } from "react"; import { addNewTaskToDatabase, getTasksFromDatabase, deleteTaskFromDatabase, updateTaskInDatabase } from "./actions"; type Task = { id: string; title: string; status: 'IN_PROGRESS' | 'COMPLETE'; }; export default function Home() { const [newTaskTitle, setNewTaskTitle] = useState(''); const [tasks, setTasks] = useState<Task[]>([]); async function getTasks() { const updatedListOfTasks = await getTasksFromDatabase(); setTasks(updatedListOfTasks); } useEffect(() => { getTasks(); }, []); async function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault(); await addNewTaskToDatabase(newTaskTitle); await getTasks(); setNewTaskTitle(''); }; async function updateTask(task: Task, newTaskValues: Partial<Task>) { await updateTaskInDatabase({ ...task, ...newTaskValues }); await getTasks(); } async function deleteTask(taskId: string) { await deleteTaskFromDatabase(taskId); await getTasks(); } return ( <main className="p-4"> <h2 className="text-2xl font-bold mb-4">To Do List</h2> <div className="flex mb-4"> <form onSubmit={handleSubmit} className="flex mb-8"> <input type="text" placeholder="New Task Title" value={newTaskTitle} onChange={(e) => setNewTaskTitle(e.target.value)} className="flex-grow border border-gray-400 rounded px-3 py-2 mr-2 bg-inherit" /> <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-nowrap" > Add New Task </button> </form> </div> <table className="w-full"> <tbody> {tasks.map(function (task) { const isComplete = task.status === 'COMPLETE'; return ( <tr key={task.id} className="border-b border-gray-200"> <td className="py-2 px-4"> <input type="checkbox" checked={isComplete} onClick={() => updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })} className="transition-transform duration-300 ease-in-out transform scale-100 checked:scale-125 checked:bg-green-500" /> </td> <td className="py-2 px-4"> <span className={`transition-all duration-300 ease-in-out ${isComplete ? 'line-through text-gray-400 opacity-50' : 'opacity-100'}`} > {task.title} </span> </td> <td className="py-2 px-4"> <button onClick={() => deleteTask(task.id)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded float-right" > Delete </button> </td> </tr> ); })} </tbody> </table> </main> ); }
अब ऐप्लिकेशन को डिप्लॉय किया जा सकता है.
9. ऐप्लिकेशन को Cloud Run पर डिप्लॉय करना
- आपको जिस Cloud Run सेवा को बनाना है उसके लिए, Cloud Run सेवा खाते में नेटवर्क उपयोगकर्ता की भूमिका जोड़ने के लिए, gcloud projects add-iam-policy-binding कमांड को इस तरह से चलाएं.
gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \ --member "serviceAccount:service-$(gcloud projects describe ${GOOGLE_CLOUD_PROJECT} --format="value(projectNumber)")@serverless-robot-prod.iam.gserviceaccount.com" \ --role "roles/compute.networkUser"
- आपको जिस Cloud Run सेवा को बनाना है उसके लिए, मौजूदा उपयोगकर्ता को Artifact Registry Writer की भूमिका देने के लिए, gcloud projects add-iam-policy-binding कमांड को इस तरह से चलाएं.
gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \ --member=user:$(gcloud auth list --filter=status:ACTIVE --format="value(account)") \ --role="roles/artifactregistry.writer"
- अपने ऐप्लिकेशन को Cloud Run पर डिप्लॉय करने के लिए, यहां दी गई कमांड चलाएं:
gcloud run deploy helloworld \ --region=us-central1 \ --source=. \ --set-env-vars DB_NAME="quickstart_db" \ --set-env-vars DB_USER="postgres" \ --set-env-vars DB_PASSWORD=${DB_PASSWORD} \ --set-env-vars DB_HOST="$(gcloud sql instances describe quickstart-instance --project=${GOOGLE_CLOUD_PROJECT} --format='value(settings.ipConfiguration.pscConfig.pscAutoConnections.ipAddress)')" \ --service-account="quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \ --network=default \ --subnet=default \ --allow-unauthenticated - अगर कहा जाए, तो
YऔरEnterदबाकर पुष्टि करें कि आपको जारी रखना है:Do you want to continue (Y/n)? Y
कुछ मिनटों के बाद, ऐप्लिकेशन आपको एक यूआरएल देगा. इस यूआरएल पर जाकर, आपको अपनी समस्या के बारे में जानकारी मिलेगी.
अपने ऐप्लिकेशन को काम करते हुए देखने के लिए, यूआरएल पर जाएं. जब भी यूआरएल पर जाया जाएगा या पेज को रीफ़्रेश किया जाएगा, तब आपको Tasks ऐप्लिकेशन दिखेगा.
10. Gemini Code Assist की मदद से कोई सुविधा जोड़ना
अब आपने डेटाबेस के साथ एक वेब ऐप्लिकेशन डिप्लॉय कर दिया है. इसके बाद, हम एआई की मदद से अपने next.js ऐप्लिकेशन में एक नई सुविधा जोड़ने जा रहे हैं.
- Cloud Shell Editor पर वापस जाएं
page.tsxको फिर से खोलेंcd ~/task-app cloudshell edit app/page.tsx- Cloud Shell Editor में Gemini Code Assist पर जाएं:
- स्क्रीन की बाईं ओर मौजूद टूलबार में, Gemini आइकॉन
पर क्लिक करें - अगर कहा जाए, तो अपने Google खाते के क्रेडेंशियल से साइन इन करें
- अगर आपसे कोई प्रोजेक्ट चुनने के लिए कहा जाए, तो वह प्रोजेक्ट चुनें जिसे आपने इस कोडलैब के लिए बनाया है

- स्क्रीन की बाईं ओर मौजूद टूलबार में, Gemini आइकॉन
- प्रॉम्प्ट डालें:
Add the ability to update the title of the task. The code in your output should be complete and working code.. जवाब में,handleEditStartऔरhandleEditCancelफ़ंक्शन जोड़ने के लिए, इस तरह के स्निपेट शामिल होने चाहिए:const [editingTaskId, setEditingTaskId] = useState(''); const [editedTaskTitle, setEditedTaskTitle] = useState(''); function handleEditStart(task: Task) { setEditingTaskId(task.id); setEditedTaskTitle(task.title); }; page.tsxको Gemini Code Assist के आउटपुट से बदलें. यहां एक उदाहरण दिया गया है:'use client' import React, { useEffect, useState } from "react"; import { addNewTaskToDatabase, getTasksFromDatabase, deleteTaskFromDatabase, updateTaskInDatabase } from "./actions"; type Task = { id: string; title: string; status: 'IN_PROGRESS' | 'COMPLETE'; }; export default function Home() { const [newTaskTitle, setNewTaskTitle] = useState(''); const [tasks, setTasks] = useState<Task[]>([]); const [editingTaskId, setEditingTaskId] = useState(''); const [editedTaskTitle, setEditedTaskTitle] = useState(''); async function getTasks() { const updatedListOfTasks = await getTasksFromDatabase(); setTasks(updatedListOfTasks); } useEffect(() => { getTasks(); }, []); async function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault(); await addNewTaskToDatabase(newTaskTitle); await getTasks(); setNewTaskTitle(''); }; async function updateTask(task: Task, newTaskValues: Partial<Task>) { await updateTaskInDatabase({ ...task, ...newTaskValues }); await getTasks(); setEditingTaskId(''); setEditedTaskTitle(''); } async function deleteTask(taskId: string) { await deleteTaskFromDatabase(taskId); await getTasks(); } function handleEditStart(task: Task) { setEditingTaskId(task.id); setEditedTaskTitle(task.title); }; return ( <main className="p-4"> <h2 className="text-2xl font-bold mb-4">To Do List</h2> <div className="flex mb-4"> <form onSubmit={handleSubmit} className="flex mb-8"> <input type="text" placeholder="New Task Title" value={newTaskTitle} onChange={(e) => setNewTaskTitle(e.target.value)} className="flex-grow border border-gray-400 rounded px-3 py-2 mr-2 bg-inherit" /> <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-nowrap" > Add New Task </button> </form> </div> <table className="w-full"> <tbody> {tasks.map(function (task) { const isComplete = task.status === 'COMPLETE'; return ( <tr key={task.id} className="border-b border-gray-200"> <td className="py-2 px-4"> <input type="checkbox" checked={isComplete} onClick={() => updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })} className="transition-transform duration-300 ease-in-out transform scale-100 checked:scale-125 checked:bg-green-500" /> </td> <td className="py-2 px-4"> {editingTaskId === task.id ? ( <form onSubmit={(e) => { e.preventDefault(); updateTask(task, { title: editedTaskTitle }); }} className="flex" > <input type="text" value={editedTaskTitle} onChange={(e) => setEditedTaskTitle(e.target.value)} onBlur={() => updateTask(task, { title: editedTaskTitle })} // Handle clicking outside input className="flex-grow border border-gray-400 rounded px-3 py-1 mr-2 bg-inherit" /> </form> ) : ( <span onClick={() => handleEditStart(task)} className={`transition-all duration-300 ease-in-out cursor-pointer ${isComplete ? 'line-through text-gray-400 opacity-50' : 'opacity-100'}`} > {task.title} </span> )} </td> <td className="py-2 px-4"> <button onClick={() => deleteTask(task.id)} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded float-right" > Delete </button> </td> </tr> ); })} </tbody> </table> </main> ); }
11. ऐप्लिकेशन को Cloud Run पर फिर से डिप्लॉय करें
- अपने ऐप्लिकेशन को Cloud Run पर डिप्लॉय करने के लिए, यहां दी गई कमांड चलाएं:
gcloud run deploy helloworld \ --region=us-central1 \ --source=. \ --set-env-vars DB_NAME="quickstart_db" \ --set-env-vars DB_USER="postgres" \ --set-env-vars DB_PASSWORD=${DB_PASSWORD} \ --set-env-vars DB_HOST="$(gcloud sql instances describe quickstart-instance --project=${GOOGLE_CLOUD_PROJECT} --format='value(settings.ipConfiguration.pscConfig.pscAutoConnections.ipAddress)')" \ --service-account="quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \ --network=default \ --subnet=default \ --allow-unauthenticated - अगर आपसे पुष्टि करने के लिए कहा जाए, तो
YऔरEnterदबाकर पुष्टि करें कि आपको जारी रखना है:Do you want to continue (Y/n)? Y
12. बधाई हो
इस लैब में, आपने इन कामों को करने का तरीका सीखा:
- Cloud SQL for PostgreSQL इंस्टेंस बनाना
- Cloud Run पर ऐसा ऐप्लिकेशन डिप्लॉय करना जो आपके Cloud SQL डेटाबेस से कनेक्ट हो
व्यवस्थित करें
Cloud SQL का कोई मुफ़्त टियर नहीं है. इसका इस्तेमाल जारी रखने पर, आपसे शुल्क लिया जाएगा. अतिरिक्त शुल्क से बचने के लिए, अपना Cloud प्रोजेक्ट मिटाया जा सकता है.
Cloud Run, सेवा का इस्तेमाल न किए जाने पर कोई शुल्क नहीं लेता. हालांकि, Artifact Registry में कंटेनर इमेज सेव करने के लिए आपसे शुल्क लिया जा सकता है. Cloud प्रोजेक्ट मिटाने पर, उस प्रोजेक्ट में इस्तेमाल किए गए सभी संसाधनों के लिए बिलिंग बंद हो जाती है.
अगर आपको प्रोजेक्ट मिटाना है, तो यह तरीका अपनाएं:
gcloud projects delete $GOOGLE_CLOUD_PROJECT
आपके पास Cloud Shell डिस्क से, ग़ैर-ज़रूरी संसाधन मिटाने का विकल्प भी होता है. ये काम किए जा सकते हैं:
- कोड लैब प्रोजेक्ट की डायरेक्ट्री मिटाएं:
rm -rf ~/task-app - चेतावनी! इस कार्रवाई को पहले जैसा नहीं किया जा सकता! अगर आपको जगह खाली करने के लिए, Cloud Shell पर मौजूद सभी फ़ाइलें मिटानी हैं, तो अपनी पूरी होम डायरेक्ट्री मिटाएं. ध्यान रखें कि आपको जो भी डेटा सेव रखना है उसे किसी दूसरी जगह पर सेव कर लिया गया हो.
sudo rm -rf $HOME
सीखते रहें
- Cloud SQL Node.js कनेक्टर का इस्तेमाल करके, Cloud SQL for PostgreSQL के साथ Cloud Run पर फ़ुल स्टैक Next.js ऐप्लिकेशन डिप्लॉय करना
- Cloud SQL Node.js कनेक्टर का इस्तेमाल करके, Cloud SQL for PostgreSQL के साथ Cloud Run पर फ़ुल स्टैक ऐंगुलर ऐप्लिकेशन डिप्लॉय करना
- Node.js Admin SDK का इस्तेमाल करके, Firestore के साथ Cloud Run पर फ़ुल स्टैक ऐंगुलर ऐप्लिकेशन डिप्लॉय करना
- Node.js Admin SDK का इस्तेमाल करके, Cloud Run पर Firestore के साथ पूरा स्टैक Next.js ऐप्लिकेशन डिप्लॉय करना