Men-deploy aplikasi JavaScript stack lengkap ke Cloud Run dengan Cloud SQL untuk PostgreSQL

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

1. 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

1. Login ke Konsol Google Cloud.
2. 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.
3. Buat project baru atau pilih untuk menggunakan kembali project yang ada.

4. Membuka Cloud Shell Editor

1. Buka Cloud Shell Editor
2. Jika terminal tidak muncul di bagian bawah layar, buka:
   • Klik menu tiga garis
   • Klik Terminal
   • Klik New Terminal
3. 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}'
       

     
4. Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan.
5. Anda akan melihat pesan ini:

   Updated property [core/project].
   

   Jika Anda melihat WARNING dan ditanya Do you want to continue (Y/N)?, berarti Anda mungkin salah memasukkan project ID. Tekan N, tekan Enter, lalu coba jalankan kembali perintah gcloud 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.

1. 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"
   

2. 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

1. 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
   

2. Membuat sandi unik untuk database Anda

   export DB_PASSWORD=$(openssl rand -base64 20)
   

3. Jalankan perintah gcloud sql instances create untuk membuat instance Cloud SQL

   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
   

Pemrosesan perintah ini dapat memerlukan waktu beberapa menit.

1. Jalankan perintah gcloud sql databases create untuk membuat database Cloud SQL dalam quickstart-instance.

   gcloud sql databases create quickstart_db \
     --instance=quickstart-instance
   

8. Menyiapkan Aplikasi

Siapkan aplikasi Next.js yang merespons permintaan HTTP.

1. 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
   

2. Jika diminta untuk menginstal create-next-app, tekan Enter untuk melanjutkan:

   Need to install the following packages:
   create-next-app@15.0.3
   Ok to proceed? (y)
   

3. Ubah direktori menjadi task-app:

   cd task-app
   

4. Instal pg untuk berinteraksi dengan database PostgreSQL.

   npm install pg
   

5. Instal @types/pg sebagai dependensi developer untuk menggunakan aplikasi TypeScript Next.js.

   npm install --save-dev @types/pg
   

6. Buat file actions.ts.

   touch app/actions.ts
   

7. Buka file actions.ts di Cloud Shell Editor:

   cloudshell edit app/actions.ts
   

   File kosong kini akan muncul di bagian atas layar. Di sinilah Anda dapat mengedit file actions.ts ini.
8. 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;
   }
   

9. Buka file page.tsx di Cloud Shell Editor:

   cloudshell edit app/page.tsx
   

   File yang ada kini akan muncul di bagian atas layar. Di sinilah Anda dapat mengedit file page.tsx ini.
10. Hapus konten file page.tsx yang ada.
11. 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

1. 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"
   

1. 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
   

2. Jika diminta, tekan Y dan Enter 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.

1. Kembali ke Cloud Shell Editor
2. Buka page.tsx lagi

   cd ~/task-app
   cloudshell edit app/page.tsx
   

3. 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
4. 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 fungsi handleEditStart dan handleEditCancel:

   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>
   

5. 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

1. 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
   

2. Jika diminta, tekan Y dan Enter 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:

1. Hapus direktori project codelab:

   rm -rf ~/task-app
   

2. 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