1. Ringkasan
Cloud Run adalah platform terkelola sepenuhnya yang memungkinkan Anda menjalankan kode langsung di atas infrastruktur Google yang skalabel. Codelab ini akan menunjukkan cara menghubungkan aplikasi Next.js di Cloud Run ke database Cloud SQL untuk PostgreSQL.
Di lab ini, Anda akan mempelajari cara:
- Membuat instance Cloud SQL untuk PostgreSQL (dikonfigurasi untuk menggunakan Private Service Connect)
- Men-deploy aplikasi ke Cloud Run yang terhubung ke database Cloud SQL Anda
- Menggunakan Gemini Code Assist untuk menambahkan fungsi ke aplikasi Anda
2. Prasyarat
- Jika belum memiliki Akun Google, Anda harus membuat Akun Google.
- Gunakan akun pribadi, bukan akun kantor atau sekolah. Akun kerja dan sekolah mungkin memiliki batasan yang mencegah Anda mengaktifkan API yang diperlukan untuk lab ini.
3. Penyiapan project
- Login ke Konsol Google Cloud.
- Aktifkan penagihan di Konsol Cloud.
- Menyelesaikan lab ini akan menghabiskan biaya kurang dari $1 USD untuk resource Cloud.
- Anda dapat mengikuti langkah-langkah di akhir lab ini untuk menghapus resource guna menghindari tagihan lebih lanjut.
- Pengguna baru memenuhi syarat untuk Uji Coba Gratis senilai$300 USD.
- Buat project baru atau pilih untuk menggunakan kembali project yang ada.
4. Membuka Cloud Shell Editor
- Buka Cloud Shell Editor
- Jika terminal tidak muncul di bagian bawah layar, buka:
- Klik menu tiga garis
- Klik Terminal
- Klik New Terminal
- Klik menu tiga garis
- Di terminal, tetapkan project Anda dengan perintah ini:
- Format:
gcloud config set project [PROJECT_ID]
- Contoh:
gcloud config set project lab-project-id-example
- Jika Anda tidak dapat mengingat project ID:
- Anda dapat mencantumkan semua project ID dengan:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Anda dapat mencantumkan semua project ID dengan:
- Format:
- Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan.
- Anda akan melihat pesan ini:
Jika Anda melihatUpdated property [core/project].
WARNING
dan ditanyaDo you want to continue (Y/N)?
, berarti Anda mungkin salah memasukkan project ID. TekanN
, tekanEnter
, lalu coba jalankan kembali perintahgcloud config set project
.
5. Mengaktifkan API
Di terminal, aktifkan API:
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
Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan.
Pemrosesan perintah ini mungkin memerlukan waktu beberapa menit, tetapi pada akhirnya akan menampilkan pesan berhasil seperti ini:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. Menyiapkan Akun Layanan
Buat dan konfigurasi akun layanan Google Cloud yang akan digunakan oleh Cloud Run sehingga akun tersebut memiliki izin yang benar untuk terhubung ke Cloud SQL.
- Jalankan perintah
gcloud iam service-accounts create
sebagai berikut untuk membuat akun layanan baru:gcloud iam service-accounts create quickstart-service-account \ --display-name="Quickstart Service Account"
- Jalankan perintah gcloud projects add-iam-policy-binding sebagai berikut untuk menambahkan peran Log Writer ke akun layanan Google Cloud yang baru saja Anda buat.
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. Membuat Instance Cloud SQL
- Membuat Kebijakan Koneksi Layanan untuk mengizinkan konektivitas jaringan dari Cloud Run ke Cloud SQL dengan 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
- Membuat sandi unik untuk database Anda
export DB_PASSWORD=$(openssl rand -base64 20)
- Jalankan perintah
gcloud sql instances create
untuk membuat instance Cloud SQLgcloud 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
Pemrosesan perintah ini dapat memerlukan waktu beberapa menit.
- Jalankan perintah
gcloud sql databases create
untuk membuat database Cloud SQL dalamquickstart-instance
.gcloud sql databases create quickstart_db \ --instance=quickstart-instance
8. Menyiapkan Aplikasi
Siapkan aplikasi Next.js yang merespons permintaan HTTP.
- Untuk membuat project Next.js baru bernama
task-app
, gunakan perintah:npx create-next-app@15.0.3 task-app \ --ts \ --eslint \ --tailwind \ --no-src-dir \ --turbopack \ --app \ --no-import-alias
- Jika diminta untuk menginstal
create-next-app
, tekanEnter
untuk melanjutkan:Need to install the following packages: create-next-app@15.0.3 Ok to proceed? (y)
- Ubah direktori menjadi
task-app
:cd task-app
- Instal
pg
untuk berinteraksi dengan database PostgreSQL.npm install pg
- Instal
@types/pg
sebagai dependensi developer untuk menggunakan aplikasi TypeScript Next.js.npm install --save-dev @types/pg
- Buat file
actions.ts
.touch app/actions.ts
- Buka file
actions.ts
di Cloud Shell Editor: File kosong kini akan muncul di bagian atas layar. Di sinilah Anda dapat mengedit filecloudshell edit app/actions.ts
actions.ts
ini. - Salin kode berikut dan tempelkan ke dalam file
actions.ts
yang terbuka:'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 visits ( id SERIAL NOT NULL, created_at timestamp NOT NULL, PRIMARY KEY (id) );`); 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`); console.table(rows); // logs the last 5 visits on the server return rows; // sends the last 5 visits to the client } // 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; }
- Buka file
page.tsx
di Cloud Shell Editor: File yang ada kini akan muncul di bagian atas layar. Di sinilah Anda dapat mengedit filecloudshell edit app/page.tsx
page.tsx
ini. - Hapus konten file
page.tsx
yang ada. - Salin kode berikut dan tempelkan ke dalam file
page.tsx
yang terbuka:'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 addTask() { 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" > Delete </button> </td> </tr> ); })} </tbody> </table> </main> ); }
Aplikasi kini siap di-deploy.
9. Men-deploy aplikasi ke Cloud Run
- Jalankan perintah gcloud projects add-iam-policy-binding sebagai berikut untuk menambahkan peran Network User ke akun layanan Cloud Run untuk layanan Cloud Run yang akan Anda buat.
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"
- Jalankan perintah di bawah ini untuk men-deploy aplikasi Anda ke 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
- Jika diminta, tekan
Y
danEnter
untuk mengonfirmasi bahwa Anda ingin melanjutkan:Do you want to continue (Y/n)? Y
Setelah beberapa menit, aplikasi akan memberikan URL yang dapat Anda kunjungi.
Buka URL untuk melihat cara kerja aplikasi Anda. Setiap kali Anda mengunjungi URL atau memuat ulang halaman, Anda akan melihat aplikasi tugas.
10. Menambahkan fitur dengan Gemini Code Assist
Sekarang Anda telah men-deploy aplikasi web dengan database. Selanjutnya, kita akan menambahkan fitur baru ke aplikasi next.js menggunakan bantuan AI.
- Kembali ke Cloud Shell Editor
- Buka
page.tsx
lagicd ~/task-app cloudshell edit app/page.tsx
- Buka Gemini Code Assist dalam Cloud Shell Editor:
- Klik ikon Gemini
di toolbar di sisi kiri layar
- Jika diminta, login dengan kredensial Akun Google Anda
- Jika diminta untuk memilih project, pilih project yang Anda buat untuk Codelab ini
- Klik ikon Gemini
- Masukkan perintah:
Add the ability to update the title of the task. The code in your output should be complete and working code.
. Responsnya harus menyertakan sesuatu seperti cuplikan ini untuk menambahkan fungsihandleEditStart
danhandleEditCancel
:const [editingTaskId, setEditingTaskId] = useState<string>(''); const [editedTaskTitle, setEditedTaskTitle] = useState(''); const handleEditStart = (task: Task) => { setEditingTaskId(task.id); setEditedTaskTitle(task.title); }; const handleEditCancel = () => { setEditingTaskId(''); setEditedTaskTitle(''); };
<td className="py-2 px-4"> {editingTaskId === task.id ? ( <form onSubmit={(e) => { e.preventDefault(); updateTask(task, { title: editedTaskTitle }); }}> <input type="text" value={editedTaskTitle} onChange={(e) => setEditedTaskTitle(e.target.value)} onBlur={() => handleEditCancel} // Handle clicking outside input className="border border-gray-400 rounded px-3 py-1 mr-2" /> <button type="submit" className="text-green-600 hover:text-green-900 mr-1">Save</button> </form> ) : ( <span onClick={() => handleEditStart(task)} className="cursor-pointer"> {task.title} </span> )} </td>
- Ganti
page.tsx
dengan output Gemini Code Assist. Berikut adalah contoh yang berfungsi:'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<string>(''); const [editedTaskTitle, setEditedTaskTitle] = useState(''); async function getTasks() { const updatedListOfTasks = await getTasksFromDatabase(); setTasks(updatedListOfTasks); } useEffect(() => { getTasks(); }, []); async function addTask() { await addNewTaskToDatabase(newTaskTitle); await getTasks(); setNewTaskTitle(''); } async function updateTask(task: Task, newTaskValues: Partial<Task>) { await updateTaskInDatabase({ ...task, ...newTaskValues }); await getTasks(); setEditingTaskId(''); // Clear editing state after update setEditedTaskTitle(''); } async function deleteTask(taskId: string) { await deleteTaskFromDatabase(taskId); await getTasks(); } const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); addTask(); }; const handleEditStart = (task: Task) => { setEditingTaskId(task.id); setEditedTaskTitle(task.title); }; const handleEditCancel = () => { setEditingTaskId(''); setEditedTaskTitle(''); }; return ( <main className="p-4"> <h2 className="text-2xl font-bold mb-4">To Do List</h2> <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> <table className="w-full"> <tbody> {tasks.map(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={() => handleEditCancel()} // Handle clicking outside input className="flex-grow border border-gray-400 rounded px-3 py-1 mr-2 bg-inherit" /> <button type="submit" className="bg-green-600 hover:bg-green-900 m-1 text-white font-bold py-2 px-4 rounded" > Save </button> </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. Men-deploy ulang aplikasi ke Cloud Run
- Jalankan perintah di bawah untuk men-deploy aplikasi Anda ke 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
- Jika diminta, tekan
Y
danEnter
untuk mengonfirmasi bahwa Anda ingin melanjutkan:Do you want to continue (Y/n)? Y
12. Selamat
Di lab ini, Anda telah mempelajari cara melakukan hal-hal berikut:
- Membuat instance Cloud SQL untuk PostgreSQL (dikonfigurasi untuk menggunakan Private Service Connect)
- Men-deploy aplikasi ke Cloud Run yang terhubung ke database Cloud SQL Anda
- Menggunakan Gemini Code Assist untuk menambahkan fungsi ke aplikasi Anda
Pembersihan
Cloud SQL tidak memiliki paket gratis dan akan menagih Anda jika Anda terus menggunakannya. Anda dapat menghapus project Cloud untuk menghindari tagihan tambahan.
Meskipun Cloud Run tidak mengenakan biaya saat layanannya tidak digunakan, Anda mungkin tetap ditagih atas penyimpanan image container di Artifact Registry. Menghapus project Cloud akan menghentikan penagihan untuk semua resource yang digunakan dalam project tersebut.
Jika mau, hapus project:
gcloud projects delete $GOOGLE_CLOUD_PROJECT
Anda juga dapat menghapus resource yang tidak diperlukan dari disk cloudshell. Anda dapat:
- Hapus direktori project codelab:
rm -rf ~/task-app
- Peringatan! Tindakan berikutnya ini tidak dapat diurungkan. Jika ingin menghapus semua yang ada di Cloud Shell untuk mengosongkan ruang, Anda dapat menghapus seluruh direktori beranda. Pastikan semua yang ingin Anda simpan disimpan di tempat lain.
sudo rm -rf $HOME