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

1. Обзор

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

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

Что вы узнаете

  • Напишите веб-приложение с помощью редактора Cloud Shell.
  • Сохраняйте код своего приложения на GitHub.
  • Автоматически разверните ваше приложение в Cloud Run.
  • Добавьте генеративный ИИ в свое приложение с помощью Genkit.
  • Управляйте подсказками для студентов магистратуры с помощью библиотеки dotprompt.

2. Предварительные требования

  1. Если у вас еще нет учетной записи Google, вам необходимо ее создать .
    • Используйте личный аккаунт вместо рабочего или учебного. Рабочие и учебные аккаунты могут иметь ограничения, которые не позволят вам включить API, необходимые для этой лабораторной работы.
  2. Если у вас еще нет учетной записи GitHub, вам необходимо ее создать.

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

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

4. Откройте редактор Cloud Shell.

  1. Перейдите в редактор Cloud Shell.
  2. Если терминал не отображается в нижней части экрана, откройте его:
    • Нажмите на значок гамбургера. значок меню "гамбургер"
    • Нажмите «Терминал»
    • Нажмите «Новый терминал» Откройте новый терминал в редакторе Cloud Shell.
  3. В терминале настройте свой проект с помощью этой команды:
    • Формат: 
      gcloud config set project [PROJECT_ID]
    • Пример: 
      gcloud config set project lab-project-id-example
    • Если вы не помните идентификатор своего проекта:
      • Вы можете вывести список всех идентификаторов ваших проектов с помощью: 
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Установите идентификатор проекта в терминале редактора Cloud Shell.
  4. Если появится запрос на авторизацию, нажмите «Авторизовать» , чтобы продолжить. Нажмите, чтобы авторизовать Cloud Shell.
  5. Вы должны увидеть следующее сообщение:
    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

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

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

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

  1. Перейдите в домашний каталог: 
    cd ~
  2. Создайте каталог codelab-genai : 
    mkdir codelab-genai
  3. Перейдите в каталог codelab-genai : 
    cd codelab-genai
  4. Создайте файл index.js : 
    touch index.js
  5. Создайте файл package.json : 
    npm init es6 -y
  6. Добавьте express в качестве зависимости. 
    npm install express
  7. Добавьте файл .gitignore , чтобы предотвратить фиксацию изменений node_modules 
    echo node_modules/ >> .gitignore
  8. Откройте файл index.js в редакторе Cloud Shell:
    cloudshell edit index.js
    Теперь в верхней части экрана должен появиться пустой файл. Здесь вы можете редактировать файл index.js . Покажите, что код размещается в верхней части экрана.
  9. Скопируйте следующий код и вставьте его в открытый файл 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 автоматически сохранит ваш код. Этот код отвечает на HTTP-запросы нашим приветствием "Hello world!".

Исходный код вашего приложения готов и может быть сохранен в системе контроля версий.

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

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

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

  1. Убедитесь, что вы находитесь в правильной директории: 
    cd ~/codelab-genai
  2. Добавьте все файлы из текущего каталога в этот коммит: 
    git add .
  3. Создайте первый коммит: 
    git commit -m "add http server"
  4. Отправьте свой коммит в 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. Настройте автоматическое развертывание.

  1. Оставьте вкладку «Редактор Cloud Shell» открытой. Мы вернемся к этой вкладке позже.
  2. В новой вкладке перейдите на страницу Cloud Run .
  3. Выберите нужный проект Google Cloud в консоли. Выпадающее меню проекта Google Cloud Console
  4. Нажмите ПОДКЛЮЧИТЬ РЕПОЗИТОРИЙ
  5. Нажмите «НАСТРОЙКА С ПОМОЩЬЮ CLOUD BUILD».
    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 через buildpacks от Google Cloud.
      • Остальные поля ( Build context directory , Entrypoint и Function target ) оставьте без изменений.
    8. Нажмите «Сохранить».
  6. Прокрутите вниз до раздела «Аутентификация» .
  7. Нажмите «Разрешить неаутентифицированные вызовы».
  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, вы можете пропустить эти шаги.

  1. Перейдите в редактор Cloud Shell.
  2. Если терминал не отображается в нижней части экрана, откройте его:
    • Нажмите на значок гамбургера. значок меню "гамбургер"
    • Нажмите «Терминал»
    • Нажмите «Новый терминал» Откройте новый терминал в редакторе Cloud Shell.
  3. В терминале настройте свой проект с помощью этой команды:
    • Формат: 
      gcloud config set project [PROJECT_ID]
    • Пример: 
      gcloud config set project lab-project-id-example
    • Если вы не помните идентификатор своего проекта:
      • Вы можете вывести список всех идентификаторов ваших проектов с помощью: 
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Установите идентификатор проекта в терминале редактора Cloud Shell.
  4. Если появится запрос на авторизацию, нажмите «Авторизовать» , чтобы продолжить. Нажмите, чтобы авторизовать Cloud Shell.
  5. Вы должны увидеть следующее сообщение:
    Updated property [core/project].
    Если вы видите WARNING и вас спрашивают Do you want to continue (Y/N)? , то, скорее всего, вы неправильно ввели идентификатор проекта. Нажмите N , затем Enter и попробуйте снова выполнить команду gcloud config set project .

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

  1. Вернитесь к терминалу Cloud Shell в нижней части экрана.
  2. Убедитесь, что вы по-прежнему находитесь в правильной директории: 
    cd ~/codelab-genai
  3. Установите SDK Node.js Genkit: 
    npm install @genkit-ai/ai
  4. Установите SDK Node.js Genkit для Vertex AI: 
    npm install @genkit-ai/vertexai
  5. Откройте файл index.js в редакторе Cloud Shell. 
    cloudshell edit ~/codelab-genai/index.js
  6. Замените код в файле 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}`);
});
  1. Убедитесь, что вы по-прежнему находитесь в правильной директории в Cloud Shell: 
    cd ~/codelab-genai
  2. Выполните следующие команды, чтобы добавить новую версию вашего приложения в локальный репозиторий Git: 
    git add .
git commit -m "add latest changes"
  3. Отправьте изменения в GitHub: 
    git push
  4. После завершения сборки выполните эту команду и откройте развернутое приложение: 
    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

  1. Вернитесь к терминалу Cloud Shell в нижней части экрана.
  2. Убедитесь, что вы по-прежнему находитесь в правильной директории: 
    cd ~/codelab-genai
  3. Создайте папку prompts , чтобы хранить в ней ваши подсказки: 
    mkdir prompts
  4. Создайте файл animal-facts.prompt , чтобы сформировать свой первый запрос: 
    touch prompts/animal-facts.prompt
  5. Откройте файл animal-facts.prompt в редакторе Cloud Shell: 
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  6. Отредактируйте файл 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.
  7. Откройте файл index.js в редакторе Cloud Shell: 
    cloudshell edit ~/codelab-genai/index.js
  8. Замените код в файле 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}`);
});
  1. Убедитесь, что вы по-прежнему находитесь в правильной директории в Cloud Shell: 
    cd ~/codelab-genai
  2. Выполните следующие команды, чтобы добавить новую версию вашего приложения в локальный репозиторий Git: 
    git add .
git commit -m "add latest changes"
  3. Отправьте изменения в GitHub: 
    git push
  4. После завершения сборки выполните эту команду и откройте развернутое приложение: 
    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 на предыдущем шаге.

  1. Вернитесь к терминалу Cloud Shell в нижней части экрана.
  2. Убедитесь, что вы по-прежнему находитесь в правильной директории: 
    cd ~/codelab-genai
  3. Откройте файл animal-facts.prompt в редакторе Cloud Shell: 
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  4. Отредактируйте файл 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}}
  1. Убедитесь, что вы по-прежнему находитесь в правильной директории в Cloud Shell: 
    cd ~/codelab-genai
  2. Выполните следующие команды, чтобы добавить новую версию вашего приложения в локальный репозиторий Git: 
    git add .
git commit -m "add latest changes"
  3. Отправьте изменения в GitHub: 
    git push
  4. После завершения сборки выполните эту команду и откройте развернутое приложение: 
    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 для автоматического развертывания приложения при внесении изменений в исходный код. Затем вы модифицировали приложение и развернули его снова.

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

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