Эта страница переведена с помощью Cloud Translation API.

Автоматическое развертывание веб-приложения Genkit с генеративным искусственным интеллектом Node.js из системы управления версиями в облако

1. Обзор

Первое развертывание веб-приложения может быть пугающим. Даже после первого развертывания, если процесс слишком трудоёмкий, вы можете отказаться от развертывания новых версий приложения. Непрерывное развертывание позволяет легко автоматически развертывать изменения в приложении.

В этой лабораторной работе вы напишете веб-приложение и настроите Cloud Run для автоматического развертывания приложения при внесении изменений в его исходный код. Затем вы внесете изменения в приложение и развернёте его снова.

Чему вы научитесь

Напишите веб-приложение с помощью Cloud Shell Editor
Сохраните код вашего приложения на GitHub
Автоматически разверните ваше приложение в Cloud Run

Добавьте генеративный ИИ в свое приложение с помощью Genkit
Управление подсказками LLM с помощью библиотеки dotprompt

2. Предпосылки

Если у вас еще нет учетной записи Google, вам необходимо ее создать .
- Используйте личную учётную запись вместо рабочей или учебной. Рабочие и учебные учётные записи могут иметь ограничения, которые не позволят вам включить API, необходимые для этой лабораторной работы.
Если у вас еще нет учетной записи GitHub, вам необходимо создать учетную запись GitHub.
- Если у вас есть существующая учётная запись GitHub, используйте её. GitHub с большей вероятностью заблокирует новую учётную запись как спам.
- Настройте двухфакторную аутентификацию в своей учетной записи GitHub, чтобы снизить вероятность того, что ваша учетная запись будет помечена как спам.

3. Настройка проекта

Войдите в Google Cloud Console .
Включите выставление счетов в Cloud Console.
- Выполнение этой лабораторной работы обойдется менее чем в 1 доллар США в виде облачных ресурсов.
- Вы можете следовать инструкциям в конце этой лабораторной работы, чтобы удалить ресурсы и избежать дальнейших расходов.
- Новые пользователи имеют право на бесплатную пробную версию стоимостью 300 долларов США .
- Планируете мероприятие Gen AI for Devs? Возможно, вам будет доступен кредит в размере 1 доллара США .
Создайте новый проект или выберите повторное использование существующего проекта.
Подтвердите, что выставление счетов включено в разделе «Мои проекты» в разделе «Облачный биллинг».
- Если в вашем новом проекте в столбце «Учетная запись Billing account указано, Billing is disabled :
  1. Нажмите на три точки в столбце Actions .
  2. Нажмите «Изменить платеж».
  3. Выберите платежный аккаунт, который вы хотели бы использовать
- Если вы посещаете мероприятие Gen AI for Devs, учетная запись, скорее всего, будет называться «Учетная запись пробного выставления счетов Google Cloud Platform».

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 \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

Выполнение этой команды может занять несколько минут, но в конечном итоге должно выдать сообщение об успешном выполнении, похожее на это:

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

6. Настройте Git

Укажите глобальный адрес электронной почты пользователя git:
```
git config --global user.email "you@example.com"
```
Задайте глобальное имя пользователя git:
```
git config --global user.name "Your Name"
```
Установите глобальную ветку git по умолчанию на main :
```
git config --global init.defaultBranch main
```

7. Напишите свой код

Чтобы написать приложение на Node.js:

Перейдите в домашний каталог:
```
cd ~
```
Создайте каталог codelab-genai :
```
mkdir codelab-genai
```
Перейдите в каталог codelab-genai :
```
cd codelab-genai
```
Создайте файл index.js :
```
touch index.js
```
Создайте файл package.json :
```
npm init es6 -y
```
Добавить express как зависимость
```
npm install express
```
Добавьте файл .gitignore , чтобы предотвратить коммит node_modules
```
echo node_modules/ >> .gitignore
```
Откройте файл index.js в редакторе Cloud Shell:
```
cloudshell edit index.js
```
В верхней части экрана должен появиться пустой файл. Здесь вы можете редактировать файл index.js .
Скопируйте следующий код и вставьте его в открытый файл index.js :
```
import express from 'express';

const app = express();
app.get('/', async (req, res) => {
    res.send('Hello world!');
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});
```
Через несколько секунд Cloud Shell Editor автоматически сохранит ваш код. Этот код отвечает на http-запросы нашим приветствием «Hello world!».

Ваш исходный код приложения завершен и готов к сохранению в системе контроля версий.

8. Создайте репозиторий

Вернитесь к терминалу Cloud Shell в нижней части экрана.
Убедитесь, что вы все еще находитесь в правильном каталоге:
```
cd ~/codelab-genai
```
Инициализируйте свой git-репозиторий
```
git init -b main
```
Войдите в GitHub CLI
```
gh auth login
```
Нажмите Enter , чтобы принять параметры по умолчанию, и следуйте инструкциям в инструменте GitHub CLI, включая:
1. В какую учетную запись вы хотите войти? GitHub.com
2. Какой протокол вы предпочитаете для операций Git на этом хосте? HTTPS
3. Аутентифицировать Git с помощью своих учётных данных GitHub? Y (Пропустите, если этот пункт не отображается.)
4. Как вы предпочитаете аутентифицироваться в GitHub CLI? Login with a web browser
5. Скопируйте свой одноразовый код
6. Откройте https://github.com/login/device
7. Вставьте свой одноразовый код
8. Нажмите «Авторизовать» на GitHub.
9. Завершите вход в систему
Подтвердите, что вы вошли в систему:
```
gh api user -q ".login"
```
Если вы успешно вошли в систему, должно быть выведено ваше имя пользователя GitHub.
Создайте переменную GITHUB_USERNAME
```
GITHUB_USERNAME=$(gh api user -q ".login")
```
Убедитесь, что вы создали переменную среды:
```
echo ${GITHUB_USERNAME}
```
Если вы успешно создали переменную, должно быть выведено ваше имя пользователя GitHub.
Создайте пустой репозиторий GitHub с именем codelab-genai :
```
gh repo create codelab-genai --private
```
Если вы получили сообщение об ошибке:
```
GraphQL: Name already exists on this account (createRepository)
```
Если у вас уже есть репозиторий с именем codelab-genai , у вас есть два варианта продолжить работу с этим руководством:
- Удалить существующий репозиторий GitHub
- Создайте репозиторий с другим именем и не забудьте изменить его в следующих командах.
Добавьте репозиторий codelab-genai в качестве удаленного origin :
```
git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
```

9. Поделитесь своим кодом

Убедитесь, что вы находитесь в правильном каталоге:
```
cd ~/codelab-genai
```
Добавьте все файлы в текущем каталоге в этот коммит:
```
git add .
```
Создайте первый коммит:
```
git commit -m "add http server"
```
Перенесите коммит в main ветку origin репозитория:
```
git push -u origin main
```

Вы можете выполнить эту команду и перейти по полученному URL-адресу, чтобы просмотреть код своего приложения на GitHub:

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"

10. Настройте автоматическое развертывание

Оставьте вкладку «Редактор Cloud Shell» открытой. Мы вернёмся к этой вкладке позже.
В новой вкладке откройте страницу Cloud Run .
Выберите правильный проект Google Cloud в консоли.
Нажмите «ПОДКЛЮЧИТЬ РЕПО»
Нажмите «НАСТРОЙКА С ПОМОЩЬЮ ОБЛАЧНОГО СБОРА»
1. Выберите GitHub в качестве поставщика репозитория.
  - Если вы не вошли в свою учетную запись GitHub в браузере, войдите, используя свои учетные данные.
2. Нажмите «Аутентифицировать» , а затем нажмите «Продолжить» .
3. После входа в систему на странице Cloud Run вы увидите сообщение о том, что приложение GitHub не установлено ни в одном из ваших репозиториев.
4. Нажмите кнопку УСТАНОВИТЬ GOOGLE CLOUD BUILD .
  - На странице «Настройка установки» выберите «Только выбрать репозитории» и выберите репозиторий codelab-genai , созданный вами с помощью CLI.
  - Нажмите «Установить».
  - Примечание: если у вас много репозиториев GitHub, загрузка может занять несколько минут.
5. Выберите your-user-name/codelab-genai в качестве репозитория.
  - Если репозиторий отсутствует, нажмите ссылку Управление подключенными репозиториями .
6. Оставьте ветку как ^main$
7. Нажмите Go, Node.js, Python, Java, .NET Core, Ruby или PHP через сборочные пакеты Google Cloud.
  - Оставьте остальные поля ( Build context directory , Entrypoint и Function target ) без изменений.
8. Нажмите «Сохранить».
Прокрутите вниз до раздела «Аутентификация» .
Нажмите «Разрешить неаутентифицированные вызовы».
Нажмите «СОЗДАТЬ».

После завершения сборки (что займет несколько минут) выполните эту команду и перейдите по полученному URL-адресу, чтобы просмотреть работающее приложение:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. Измените свой код

Вернуться в редактор Cloud Shell

Если у вас все еще открыт Cloud Shell Editor, вы можете пропустить эти шаги.

Перейдите в редактор 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 .

Добавьте Genkit и Vertex AI в ваше приложение

Вернитесь к терминалу Cloud Shell в нижней части экрана.
Убедитесь, что вы все еще находитесь в правильном каталоге:
```
cd ~/codelab-genai
```
Установите Node.js Genkit SDK:
```
npm install @genkit-ai/ai
```
Установите Node.js Genkit SDK для Vertex AI:
```
npm install @genkit-ai/vertexai
```
Повторно откройте index.js в редакторе Cloud Shell.
```
cloudshell edit ~/codelab-genai/index.js
```

Замените код в файле index.js на:

import express from 'express';
const app = express();

import { genkit } from 'genkit';
import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';

const ai = genkit({
    plugins: [
        vertexAI({ location: 'us-central1' }),
    ],
});

app.get('/', async (req, res) => {
    const animal = req.query.animal || 'dog';
    const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
    const llmResponse = await ai.generate({
        model: gemini15Flash,
        prompt: prompt,
    });
    const html = llmResponse.text;
    res.send(html);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});

Убедитесь, что вы все еще находитесь в правильном каталоге в Cloud Shell:
```
cd ~/codelab-genai
```
Выполните эти команды, чтобы зафиксировать новую версию вашего приложения в локальном репозитории git:
```
git add .
git commit -m "add latest changes"
```
Отправьте изменения на GitHub:
```
git push
```

После завершения сборки выполните эту команду и посетите развернутое приложение:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

Завершение сборки может занять несколько минут, прежде чем вы увидите изменения.

Историю всех изменений можно посмотреть здесь: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

12. (Необязательно) Используйте файлы .prompt с Genkit

Вернитесь к терминалу Cloud Shell в нижней части экрана.
Убедитесь, что вы все еще находитесь в правильном каталоге:
```
cd ~/codelab-genai
```
Создайте папку для хранения prompts :
```
mkdir prompts
```
Создайте файл animal-facts.prompt , чтобы создать свою первую подсказку:
```
touch prompts/animal-facts.prompt
```
Откройте файл animal-facts.prompt в редакторе Cloud Shell:
```
cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
```

Отредактируйте файл animal-facts.prompt и вставьте в него следующий код:

---
model: vertexai/gemini-1.5-flash
input:
    schema:
        animal: string
---

Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.

Откройте файл index.js в редакторе Cloud Shell:
```
cloudshell edit ~/codelab-genai/index.js
```

Замените код в файле index.js на:

import express from 'express';
const app = express();

import { genkit } from 'genkit';
import { vertexAI } from '@genkit-ai/vertexai';

const ai = genkit({
    plugins: [
        vertexAI({ location: 'us-central1' }),
    ],
});

app.get('/', async (req, res) => {
    const animal = req.query.animal || 'dog';
    const animalPrompt = ai.prompt('animal-facts');
    const llmResponse = await animalPrompt({animal});
    const html = llmResponse.text;
    res.send(html);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});

Убедитесь, что вы все еще находитесь в правильном каталоге в Cloud Shell:
```
cd ~/codelab-genai
```
Выполните эти команды, чтобы зафиксировать новую версию вашего приложения в локальном репозитории git:
```
git add .
git commit -m "add latest changes"
```
Отправьте изменения на GitHub:
```
git push
```

После завершения сборки выполните эту команду и посетите развернутое приложение:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

Завершение сборки может занять несколько минут, прежде чем вы увидите изменения.

Историю всех изменений можно посмотреть здесь: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Необязательно) Используйте системные подсказки

На этом шаге предполагается, что вы уже добавили файлы .prompt на предыдущем шаге.

Вернитесь к терминалу Cloud Shell в нижней части экрана.
Убедитесь, что вы все еще находитесь в правильном каталоге:
```
cd ~/codelab-genai
```
Откройте файл animal-facts.prompt в редакторе Cloud Shell:
```
cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
```

Отредактируйте файл animal-facts.prompt и вставьте в него следующий код:

---
model: vertexai/gemini-1.5-flash
config:
    temperature: 0.9
input:
    schema:
        animal: string
---

role "system"
The user should have submitted an animal.
If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts.
Give the user 10 fun facts about the animal the user provided.
All responses should be valid HTML without markdown backticks.

role "user"
{{animal}}

Убедитесь, что вы все еще находитесь в правильном каталоге в Cloud Shell:
```
cd ~/codelab-genai
```
Выполните эти команды, чтобы зафиксировать новую версию вашего приложения в локальном репозитории git:
```
git add .
git commit -m "add latest changes"
```
Отправьте изменения на GitHub:
```
git push
```

После завершения сборки выполните эту команду и посетите развернутое приложение:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

Завершение сборки может занять несколько минут, прежде чем вы увидите изменения.

Историю всех изменений можно посмотреть здесь: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

14. Поздравления

В этой лабораторной работе вы написали веб-приложение и настроили Cloud Run для автоматического развертывания приложения при внесении изменений в его исходный код. Затем вы внесли изменения в приложение и развернули его снова.

Если вам понравилась эта лабораторная работа, вы можете попробовать выполнить ее еще раз на другом языке программирования или фреймворке:

Вот несколько вариантов продолжения обучения:

Документация Genkit: Начало работы
Практическая работа по добавлению наблюдаемости в ваше приложение Node.js: Практические методы обеспечения наблюдаемости для приложений генеративного ИИ на Javascript
Практическая работа по добавлению интерфейса к вашему приложению с помощью Next.js: автоматическое развертывание веб-приложения Next.js с генеративным ИИ из системы управления версиями в облаке
Практическая работа по использованию вызова функций: Как использовать вызов функций Gemini с помощью Cloud Run
Практическая работа по использованию ИИ для обработки видеоконтента: как использовать API Cloud Run Jobs Video Intelligence для покадровой обработки видео