نشر تطبيق ويب Next.js للذكاء الاصطناعي التوليدي تلقائيًا من نظام التحكّم في الإصدارات إلى Cloud Run

1. نظرة عامة

قد يكون نشر تطبيق ويب للمرة الأولى أمرًا مخيفًا. حتى بعد عملية النشر الأولى، إذا كانت العملية تستغرق وقتًا طويلاً، قد تتجنّب نشر إصدارات جديدة من تطبيقك. باستخدام ميزة النشر المستمر، يمكنك نشر التغييرات في تطبيقك تلقائيًا بسهولة.

في هذه التجربة، ستكتب تطبيق ويب وتضبط Cloud Run لنشر تطبيقك تلقائيًا عند إجراء تغيير على الرمز المصدر لتطبيقك. بعد ذلك، يمكنك تعديل تطبيقك ونشره مرة أخرى.

ما ستتعرّف عليه

  • كتابة تطبيق ويب باستخدام محرِّر Cloud Shell
  • تخزين رمز تطبيقك في GitHub
  • نشر تطبيقك تلقائيًا على Cloud Run
  • إضافة الذكاء الاصطناعي التوليدي إلى تطبيقك باستخدام Vertex AI

2. المتطلبات الأساسية

  1. إذا لم يكن لديك حساب على Google، عليك إنشاء حساب على Google.
    • استخدام حساب شخصي بدلاً من حساب عمل أو حساب تديره مؤسسة تعليمية قد تفرض حسابات العمل والحسابات التي تديرها المؤسسات التعليمية قيودًا تمنعك من تفعيل واجهات برمجة التطبيقات اللازمة لهذا الدرس التطبيقي.
  2. إذا لم يكن لديك حساب على GitHub، عليك إنشاء حساب على GitHub

3- إعداد المشروع

  1. سجِّل الدخول إلى Google Cloud Console.
  2. فعِّل الفوترة في Cloud Console.
  3. أنشئ مشروعًا جديدًا أو اختَر إعادة استخدام مشروع حالي.
  4. تأكَّد من تفعيل الفوترة في مشاريعي في "الفوترة في السحابة الإلكترونية"
    • إذا كان مشروعك الجديد يعرض الرمز Billing is disabled في عمود Billing account:
      1. انقر على النقاط الثلاث في عمود Actions.
      2. انقر على تغيير الفوترة.
      3. اختَر حساب الفوترة الذي تريد استخدامه.
    • إذا كنت تشارك في حدث "الذكاء الاصطناعي العام للمطوّرين"، من المرجّح أن يكون اسم الحساب حساب فوترة الفترة التجريبية في Google Cloud Platform.

4. فتح محرِّر Cloud Shell

  1. انتقِل إلى محرر Cloud Shell.
  2. إذا لم تظهر المحطة الطرفية في أسفل الشاشة، افتح المحطة باتّباع الخطوات التالية:
    • انقر على قائمة الخطوط الثلاثة رمز قائمة الهمبرغر.
    • انقر على Terminal (الوحدة الطرفية).
    • انقر على وحدة تحكّم جديدةفتح وحدة طرفية جديدة في محرِّر 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- تفعيل واجهات برمجة التطبيقات

في الوحدة الطرفية، فعِّل واجهات برمجة التطبيقات:

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- كتابة الرمز

لكتابة تطبيق في 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 باستخدام رسالة الترحيب "مرحبًا بالجميع".

اكتمل الرمز البرمجي الأوّلي لتطبيقك وأصبح جاهزًا للتخزين في نظام التحكّم في الإصدارات.

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. لديك خياران لمواصلة اتّباع هذا الدليل التعليمي:
  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 الصحيح في وحدة التحكّم القائمة المنسدلة لمشاريع Google Cloud Console.
  4. انقر على ربط المستودع.
  5. انقر على الإعداد باستخدام Cloud Build
      .
    1. اختَر GitHub كموفِّر المستودع
        .
      • إذا لم تكن مسجِّلاً الدخول إلى حسابك على GitHub في المتصفّح، سجِّل الدخول باستخدام بيانات الاعتماد.
    2. انقر على مصادقة، ثم انقر على متابعة.
    3. بعد تسجيل الدخول، ستظهر لك رسالة في صفحة Cloud Run تفيد بأنّ لم يتم تثبيت تطبيق GitHub على أي من مستودعاتك.
    4. انقر على الزر INSTALL GOOGLE CLOUD BUILD (تثبيت Google Cloud Build).
      • في صفحة "إعداد عملية التثبيت"، اختَر اختيار مستودعات محدّدة فقط واختَر مستودع codelab-genai الذي أنشأته من خلال وحدة تحكّم سطر الأوامر.
      • انقر على تثبيت.
      • ملاحظة: إذا كان لديك الكثير من مستودعات GitHub، قد يستغرق تحميلها بضع دقائق.
    5. اختَر your-user-name/codelab-genai كـ المستودع
        .
      • إذا لم يكن المستودع متوفّرًا، انقر على الرابط إدارة المستودعات المرتبطة.
    6. ترك Branch على القيمة ^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. إذا لم تظهر المحطة الطرفية في أسفل الشاشة، افتح المحطة باتّباع الخطوات التالية:
    • انقر على قائمة الخطوط الثلاثة رمز قائمة الهمبرغر.
    • انقر على Terminal (الوحدة الطرفية).
    • انقر على وحدة تحكّم جديدةفتح وحدة طرفية جديدة في محرِّر 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 مرة أخرى.

إضافة Vertex AI إلى تطبيقك

  1. ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
  2. تأكَّد من أنّك لا تزال في الدليل الصحيح:
    cd ~/codelab-genai
  3. ثبِّت حزمة تطوير برامج Vertex AI لنظام التشغيل Node.js باتّباع الخطوات التالية:
    npm install @google-cloud/vertexai
  4. ثبِّت حزمة تطوير البرامج (SDK) لـ Google Auth في Node.js:
    npm install google-auth-library
  5. إنشاء app/actions.ts في Terminal
    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، انتقِل إلى صفحة سجلّات التدقيق:

    إذا كنت تستخدم شريط البحث للعثور على هذه الصفحة، اختَر النتيجة التي يكون العنوان الفرعي لها هو إدارة الهوية وإمكانية الوصول والمشرف.
  2. تأكَّد من أنّ مشروع Google Cloud الحالي هو المشروع الذي أنشأت فيه تطبيقك على Cloud Run.
  3. في جدول إعداد سجلّات التدقيق في الوصول إلى البيانات، ابحث عن Vertex AI API من عمود "الخدمة".
  4. في علامة التبويب أنواع السجلّ، اختَر نوعَي سجلّ تدقيق الوصول إلى البيانات Admin read وData read.
  5. انقر على حفظ.

بعد تفعيلها، ستتمكّن من الاطّلاع على سجلّات التدقيق لكلّ عملية استدعاء للتطبيق. للاطّلاع على سجلّات التدقيق التي تتضمّن تفاصيل الاستدعاء، اتّبِع الخطوات التالية:

  1. ارجع إلى تطبيقك المنشور وأعِد تحميل الصفحة لبدء السجلّ.
  2. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة مستكشف السجلّات:

  3. في نافذة الطلب، اكتب:
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. انقر على Run query (تنفيذ طلب البحث).

تسجِّل سجلّات التدقيق استخدام واجهة برمجة التطبيقات 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، انتقِل إلى صفحة مستكشف السجلّات:

  2. في نافذة الطلب، اكتب:
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. انقر على Run query (تنفيذ طلب البحث).

تعرِض نتيجة طلب البحث سجلّات تتضمّن الطلب وردّ Vertex AI، بما في ذلك "تقييمات السلامة" التي يمكن استخدامها لرصد ممارسات السلامة.

15. (اختياري) التنظيف

على الرغم من أنّ Cloud Run لا تحصّل رسومًا عندما تكون الخدمة غير مستخدَمة، قد يستمر تحصيل رسوم منك مقابل تخزين صورة الحاوية في Artifact Registry. يمكنك حذف مشروعك على Cloud لتجنُّب تحمُّل رسوم. يؤدي حذف مشروعك على Cloud إلى إيقاف الفوترة لجميع الموارد المستخدَمة في ذلك المشروع.

إذا أردت حذف المشروع، اتّبِع الخطوات التالية:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

يمكنك أيضًا حذف الموارد غير الضرورية من قرص CloudShell. يمكنك إجراء ما يلي:

  1. احذف دليل مشروع Codelab: 
    rm -rf ~/codelab-genai
  2. تحذير! لا يمكن التراجع عن هذا الإجراء. إذا أردت حذف كل المحتوى على Cloud Shell لإخلاء بعض المساحة، يمكنك حذف الدليل الرئيسي كاملاً. احرص على حفظ كل ما تريد الاحتفاظ به في مكان آخر. 
    sudo rm -rf $HOME

16. تهانينا

في هذه التجربة، كتبت تطبيق ويب وضبطت Cloud Run لنشر تطبيقك تلقائيًا عند إجراء تغيير على الرمز المصدر لتطبيقك. بعد ذلك، عدّلت طلبك ونشرته مرة أخرى.

إذا استمتعت بهذه التجربة، يمكنك تجربتها مرة أخرى بلغة ترميز أو إطار عمل آخرَين:

في ما يلي بعض الخيارات لمواصلة التعلّم: