Разверните полнофункциональное приложение JavaScript в Cloud Run с помощью Cloud SQL для PostgreSQL.
О практической работе
1. Обзор
Cloud Run — это полностью управляемая платформа, позволяющая запускать код непосредственно поверх масштабируемой инфраструктуры Google. В этой лаборатории кода будет показано, как подключить приложение Next.js в Cloud Run к базе данных Cloud SQL для PostgreSQL.
В этой лабораторной работе вы научитесь:
- Создайте экземпляр Cloud SQL для PostgreSQL (настроенный для использования Private Service Connect ).
- Разверните приложение в Cloud Run, которое подключается к вашей базе данных Cloud SQL.
- Используйте Gemini Code Assist, чтобы добавить функциональность вашему приложению.
2. Предварительные условия
- Если у вас еще нет учетной записи Google, вам необходимо создать учетную запись Google .
- Используйте личную учетную запись вместо рабочей или учебной учетной записи. Рабочие и учебные учетные записи могут иметь ограничения, не позволяющие вам включить API, необходимые для этой лабораторной работы.
3. Настройка проекта
- Войдите в Google Cloud Console .
- Включите биллинг в Cloud Console.
- Завершение этой лабораторной работы должно стоить менее 1 доллара США в облачных ресурсах.
- Вы можете выполнить действия, описанные в конце этого практического занятия, чтобы удалить ресурсы и избежать дальнейших расходов.
- Новые пользователи имеют право на бесплатную пробную версию стоимостью 300 долларов США .
- Создайте новый проект или повторно используйте существующий проект.
4. Открыть редактор Cloud Shell
- Перейдите в редактор Cloud Shell.
- Если терминал не отображается в нижней части экрана, откройте его:
- Нажмите на гамбургер-меню
- Нажмите Терминал
- Нажмите «Новый терминал».
- Нажмите на гамбургер-меню
- В терминале настройте свой проект с помощью этой команды:
- Формат:
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. Включить API
В терминале включите 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
Если будет предложено авторизоваться, нажмите «Авторизовать» , чтобы продолжить.
Выполнение этой команды может занять несколько минут, но в конечном итоге она должна выдать успешное сообщение, подобное этому:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. Настройка учетной записи службы
Создайте и настройте учетную запись службы Google Cloud, которая будет использоваться Cloud Run, чтобы у нее были правильные разрешения для подключения к Cloud SQL.
- Запустите команду
gcloud iam service-accounts create
следующим образом, чтобы создать новую учетную запись службы:gcloud iam service-accounts create quickstart-service-account \
--display-name="Quickstart Service Account" - Запустите команду gcloud project add-iam-policy-binding следующим образом, чтобы добавить роль записи журнала в только что созданную учетную запись службы Google Cloud.
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)
- Запустите команду
gcloud sql instances create
, чтобы создать экземпляр 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
Выполнение этой команды может занять несколько минут.
- Запустите команду
gcloud sql databases create
, чтобы создать базу данных Cloud SQL вquickstart-instance
.gcloud sql databases create quickstart_db \
--instance=quickstart-instance
8. Подготовить заявку
Подготовьте приложение Next.js, отвечающее на HTTP-запросы.
- Чтобы создать новый проект Next.js с именем
task-app
, используйте команду:npx create-next-app@15.0.3 task-app \
--ts \
--eslint \
--tailwind \
--no-src-dir \
--turbopack \
--app \
--no-import-alias - Если вас попросят установить
create-next-app
, нажмитеEnter
, чтобы продолжить:Need to install the following packages:
create-next-app@15.0.3
Ok to proceed? (y) - Измените каталог на
task-app
:cd task-app
- Установите
pg
для взаимодействия с базой данных PostgreSQL.npm install pg
- Установите
@types/pg
в качестве зависимости для разработчиков, чтобы использовать приложение TypeScript Next.js.npm install --save-dev @types/pg
- Создайте файл
actions.ts
.touch app/actions.ts
- Откройте файл
actions.ts
в редакторе Cloud Shell: Пустой файл должен появиться в верхней части экрана. Здесь вы можете редактировать файлcloudshell edit app/actions.ts
actions.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 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;
} - Откройте файл
page.tsx
в редакторе Cloud Shell: Существующий файл теперь должен появиться в верхней части экрана. Здесь вы можете редактировать файлcloudshell edit app/page.tsx
page.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 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>
);
}
Теперь приложение готово к развертыванию.
9. Разверните приложение в Cloud Run
- Запустите команду gcloud project add-iam-policy-binding следующим образом, чтобы добавить роль сетевого пользователя к учетной записи службы Cloud Run для службы Cloud Run, которую вы собираетесь создать.
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:
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
Через несколько минут приложение должно предоставить вам URL-адрес для посещения.
Перейдите по URL-адресу, чтобы увидеть свое приложение в действии. Каждый раз, когда вы посещаете URL-адрес или обновляете страницу, вы увидите приложение задач.
10. Добавьте функцию с помощью Gemini Code Assist
Теперь вы развернули веб-приложение с базой данных. Далее мы добавим новую функцию в наше приложение next.js, используя возможности искусственного интеллекта.
- Вернуться в редактор Cloud Shell
- Откройте
page.tsx
еще раз.cd ~/task-app
cloudshell edit app/page.tsx - Перейдите к Gemini Code Assist в редакторе Cloud Shell:
- Нажмите значок Близнецов
на панели инструментов в левой части экрана
- При появлении запроса войдите в систему, используя свои учетные данные Google.
- Если будет предложено выбрать проект, выберите проект, созданный вами для этой Codelab.
- Нажмите значок Близнецов
- Введите подсказку:
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<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> - Замените
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<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. Повторное развертывание приложения в 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 для PostgreSQL (настроенный для использования Private Service Connect ).
- Разверните приложение в Cloud Run, которое подключается к вашей базе данных Cloud SQL.
- Используйте Gemini Code Assist, чтобы добавить функциональность вашему приложению.
Очистить
У Cloud SQL нет уровня бесплатного пользования, и если вы продолжите его использовать, с вас будет взиматься плата. Вы можете удалить свой облачный проект, чтобы избежать дополнительных расходов.
Хотя Cloud Run не взимает плату, когда служба не используется, с вас все равно может взиматься плата за хранение образа контейнера в реестре артефактов. При удалении облачного проекта прекращается выставление счетов за все ресурсы, используемые в этом проекте.
Если хотите, удалите проект:
gcloud projects delete $GOOGLE_CLOUD_PROJECT
Вы также можете удалить ненужные ресурсы с диска CloudShell. Ты можешь:
- Удалите каталог проекта codelab:
rm -rf ~/task-app
- Предупреждение! Следующее действие невозможно отменить! Если вы хотите удалить все в Cloud Shell, чтобы освободить место, вы можете удалить весь домашний каталог . Будьте осторожны, чтобы все, что вы хотите сохранить, сохранялось где-то еще.
sudo rm -rf $HOME