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

1. Обзор

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

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

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

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

• Добавьте генеративный ИИ в свое приложение с помощью Vertex AI

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

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

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

1. Войдите в Google Cloud Console .
2. Включите биллинг в Cloud Console.
   • Завершение этой лабораторной работы должно стоить менее 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.

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

1. Перейдите в редактор Cloud Shell.
2. Если терминал не отображается в нижней части экрана, откройте его:
   • Нажмите на гамбургер-меню
   • Нажмите Терминал
   • Нажмите «Новый терминал».
3. В терминале настройте свой проект с помощью этой команды:
   • Формат:

     gcloud config set project [PROJECT_ID]
     

   • Пример:

     gcloud config set project lab-project-id-example
     

   • Если вы не можете вспомнить идентификатор своего проекта:
     • Вы можете перечислить все идентификаторы ваших проектов с помощью:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Если будет предложено авторизоваться, нажмите «Авторизовать» , чтобы продолжить.
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 "[e-mail]"
   

2. Установите свое глобальное имя пользователя git:

   git config --global user.name "Your Name"
   

3. Установите для глобальной ветки git по умолчанию значение main :

   git config --global init.defaultBranch main
   

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

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

1. Перейдите в домашний каталог:

   cd ~
   

2. Создайте новое приложение codelab-genai Next.js:

   npx create-next-app@latest codelab-genai \
       --ts \
       --eslint \
       --tailwind \
       --no-src-dir \
       --app \
       --no-import-alias
   

3. Если вас попросят установить create-next-app , нажмите Enter , чтобы продолжить:

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

4. Перейдите в каталог codelab-genai :

   cd codelab-genai
   

5. Откройте файл page.tsx в редакторе Cloud Shell:

   cloudshell edit app/page.tsx
   

   Теперь файл должен появиться в верхней части экрана. Здесь вы можете редактировать файл page.tsx .
6. Удалите существующий код. Скопируйте следующий код и вставьте его в открывшийся файл page.tsx :

   import React from "react";
   
   export default function Home() {
   return (
       <main>
           Hello World!
       </main>
   );
   }
   

   Через несколько секунд редактор 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 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. Завершите вход
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 . У вас есть два варианта продолжить изучение этого руководства:
   • Удалите существующий репозиторий GitHub.
   • Создайте репозиторий с другим именем и не забудьте изменить его с помощью следующих команд.
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/app/page.tsx \n\n"

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

1. Оставьте вкладку «Редактор Cloud Shell» открытой. К этой вкладке мы вернемся позже.
2. В новой вкладке перейдите на страницу Cloud Run.
3. Выберите правильный проект Google Cloud в консоли.
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 с помощью сборочных пакетов 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. Если терминал не отображается в нижней части экрана, откройте его:
   • Нажмите на гамбургер-меню
   • Нажмите Терминал
   • Нажмите «Новый терминал».
3. В терминале настройте свой проект с помощью этой команды:
   • Формат:

     gcloud config set project [PROJECT_ID]
     

   • Пример:

     gcloud config set project lab-project-id-example
     

   • Если вы не можете вспомнить идентификатор своего проекта:
     • Вы можете перечислить все идентификаторы ваших проектов с помощью:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Если будет предложено авторизоваться, нажмите «Авторизовать» , чтобы продолжить.
5. Вы должны увидеть это сообщение:

   Updated property [core/project].
   

   Если вы видите WARNING и вас спрашивают Do you want to continue (Y/N)? , то, вероятно, вы неправильно ввели идентификатор проекта. Нажмите N , нажмите Enter и попробуйте еще раз запустить команду gcloud config set project .

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

1. Вернитесь к терминалу Cloud Shell в нижней части экрана.
2. Убедитесь, что вы все еще находитесь в правильном каталоге:

   cd ~/codelab-genai
   

3. Установите Node.js Vertex AI SDK:

   npm install @google-cloud/vertexai
   

4. Установите Node.js Google Auth SDK:

   npm install google-auth-library
   

5. Создайте app/actions.ts в терминале.

   touch app/actions.ts
   

6. Откройте actions.ts в редакторе Cloud Shell.

   cloudshell edit app/actions.ts
   

7. Скопируйте следующий код и вставьте его в открывшийся файл actions.ts :

   'use server'
   
   import { VertexAI } from '@google-cloud/vertexai';
   import { GoogleAuth } from 'google-auth-library';
   const auth = new GoogleAuth();
   
   export async function getFunFactsAction(animal: string) {
       const project = await auth.getProjectId();
   
       const vertex = new VertexAI({ project: project });
       const generativeModel = vertex.getGenerativeModel({
           model: 'gemini-1.5-flash'
       });
   
       const prompt = `Give me 10 fun facts about ${animal || 'dog'}. 
               Return as json as an array in the format ['fact 1', 'fact 2']
               Remove backticks and other markdown formatting.`;
       const resp = await generativeModel.generateContent(prompt);
   
       if (!resp.response.candidates) {
           throw new Error('Did not receive response candidates.')
       }
   
       console.log({ text: resp.response.candidates[0].content.parts[0].text })
   
       const factArray = JSON.parse(resp.response.candidates[0].content.parts[0].text || '');
       return factArray;
   };
   

8. Откройте page.tsx в редакторе Cloud Shell.

   cloudshell edit ~/codelab-genai/app/page.tsx
   

9. Замените код в файле page.tsx на:

   'use client'
   
   import React, { useState } from "react";
   import { getFunFactsAction } from "./actions";
   
   export default function Home() {
       const [animal, setAnimal] = useState('');
       const [funFacts, setFunFacts] = useState<string[]>([]);
       async function getNewFunFacts() {
           const funFacts = await getFunFactsAction(animal);
           setFunFacts(funFacts);
       }
       return (
           <main>
               <h1 className="text-xl">Animal Fun Facts!</h1>
               <label className="text-lg p-2 m-2">Animal</label>
               <input
                   placeholder="dog"
                   value={animal}
                   onChange={(e) => setAnimal(e.target.value)}
                   className="text-black border-2 p-2 m-2 rounded"
               />
               <button
                   onClick={getNewFunFacts}
                   className="font-bold border-2 p-2 m-2 rounded hover:bg-white hover:text-black"
               >
                   Get New Fun Facts
               </button>
               <ul className="list-disc list-inside">
                   {funFacts.map(function (thing) {
                       return <li key={thing}>{thing}</li>
                   })}
               </ul>
           </main>
       );
   }
   

12. Перераспределение

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. (Необязательно) Проверьте использование Vertex AI.

Как и в случае с другими сервисами Google Cloud, вы можете проверять операции Vertex AI . Журналы аудита помогут вам ответить на вопросы: «Кто, что, где и когда сделал?». Журналы административного аудита для Vertex AI включены по умолчанию. Для аудита запросов на создание контента вам необходимо включить журналы аудита доступа к данным :

Журналы аудита данных могут повлечь за собой дополнительные расходы.

1. В консоли Google Cloud перейдите на страницу журналов аудита :
   Перейти к журналам аудита
   Если вы используете строку поиска, чтобы найти эту страницу, то выберите результат, подзаголовок которого — IAM & Admin .
2. Убедитесь, что существующий проект Google Cloud — это тот, в котором вы создаете приложение Cloud Run.
3. В таблице конфигурации журналов аудита доступа к данным выберите Vertex AI API в столбце «Служба».
4. На вкладке « Типы журналов » выберите типы журналов аудита доступа к данным Admin read и Data read .
5. Нажмите Сохранить .

После его включения вы сможете видеть журналы аудита для каждого вызова приложения. Чтобы просмотреть журналы аудита с подробностями вызова, выполните следующие действия:

1. Вернитесь к развернутому приложению и обновите страницу, чтобы активировать журнал.
2. В консоли Google Cloud перейдите на страницу Log Explorer :
   Перейти в обозреватель журналов
   
3. В окне запроса введите:

   LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
   protoPayload.serviceName="aiplatform.googleapis.com"
   

4. Нажмите Выполнить запрос .

Журналы аудита фиксируют использование Vertex AI API, но не позволяют просматривать данные, связанные с рабочей нагрузкой, такие как запросы или подробные сведения об ответах.

14. (Необязательно) Повысьте наблюдаемость вашей рабочей нагрузки ИИ.

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

1. Снова откройте actions.ts в редакторе Cloud Shell.

   cloudshell edit ~/codelab-genai/app/actions.ts
   

2. После вызова await generativeModel.generateContent(prompt) (строка 19) добавьте следующую строку:

       console.log(JSON.stringify({
           severity: 'DEBUG',
           message: 'Content is generated',
           prompt: prompt,
           response: resp.response,
       }));
   

   Этот код записывает в stdout информацию о сгенерированном контенте, используя формат структурированного журнала . Агент ведения журналов в Cloud Run записывает выходные данные, выводимые на stdout , и записывает этот формат в Cloud Logging.
3. Снова откройте Cloud Shell и введите следующую команду, чтобы убедиться, что вы находитесь в правильном каталоге:

   cd ~/codelab-genai
   

4. Зафиксируйте изменения:

   git commit -am "observe generated content"
   

5. Отправьте изменения на GitHub, чтобы инициировать повторное развертывание измененной версии:

   git push
   

После развертывания новой версии вы можете просмотреть отладочную информацию о вызовах Vertex AI.

Чтобы просмотреть журналы приложения, выполните следующие действия:

1. В консоли Google Cloud перейдите на страницу Log Explorer :
   Перейти в обозреватель журналов
   
2. В окне запроса введите:

   LOG_ID("run.googleapis.com%2Fstdout")
   severity=DEBUG
   

3. Нажмите Выполнить запрос .

В результате запроса отображаются журналы с подсказками и ответами Vertex AI, включая «рейтинги безопасности», которые можно использовать для мониторинга мер безопасности.

Будьте осторожны при регистрации подсказок, поскольку они могут содержать конфиденциальную информацию, не предназначенную для наблюдения. Возможно, вы захотите замаскировать или иным образом скрыть эту информацию. Дополнительные сведения см. в документации по DLP .

15. (Необязательно) Очистка

Хотя Cloud Run не взимает плату, когда служба не используется, с вас все равно может взиматься плата за хранение образа контейнера в реестре артефактов. Вы можете удалить свой облачный проект, чтобы избежать расходов. При удалении облачного проекта прекращается выставление счетов за все ресурсы, используемые в этом проекте.

Если хотите, удалите проект:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Вы также можете удалить ненужные ресурсы с диска CloudShell. Ты можешь:

1. Удалите каталог проекта codelab:

   rm -rf ~/codelab-genai
   

2. Предупреждение! Это действие невозможно отменить! Если вы хотите удалить все в Cloud Shell, чтобы освободить место, вы можете удалить весь домашний каталог . Будьте осторожны, чтобы все, что вы хотите сохранить, сохранялось где-то еще.

   sudo rm -rf $HOME
   

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

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

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

• Питон
• Node.js
• Идти
• Ява
• Угловой
• Next.js

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

• Документы: используйте Firebase GenKit в качестве гибкой абстракции модели, которая позволяет легко интегрировать любой API модели и использовать модели, поддерживаемые сообществом.
• Codelab: как развернуть чат-приложение на базе Gemini в Cloud Run
• Как использовать вызов функций Gemini с Cloud Run
• Как использовать Cloud Run Jobs Video Intelligence API для поэтапной обработки видео
• Семинар по запросу: Google Kubernetes Engine Onboard