1. Ringkasan
Men-deploy aplikasi web untuk pertama kalinya bisa menjadi pengalaman yang menegangkan. Bahkan setelah deployment pertama, jika prosesnya terlalu banyak pekerjaan, Anda dapat menghindari deployment versi baru aplikasi. Dengan deployment berkelanjutan, Anda dapat men-deploy perubahan aplikasi secara otomatis dengan mudah.
Di lab ini, Anda akan menulis aplikasi web dan mengonfigurasi Cloud Run untuk men-deploy aplikasi secara otomatis saat perubahan dilakukan pada kode sumber aplikasi. Kemudian, Anda mengubah aplikasi dan men-deploy-nya lagi.
Yang akan Anda pelajari
- Menulis aplikasi web dengan Cloud Shell Editor
- Menyimpan kode aplikasi di GitHub
- Men-deploy aplikasi Anda ke Cloud Run secara otomatis
- Menambahkan AI generatif ke aplikasi Anda menggunakan Genkit
- Mengelola perintah LLM menggunakan library dotprompt
2. Prasyarat
- Jika belum memiliki Akun Google, Anda harus membuat Akun Google.
- Gunakan akun pribadi, bukan akun kantor atau sekolah. Akun kerja dan sekolah mungkin memiliki batasan yang mencegah Anda mengaktifkan API yang diperlukan untuk lab ini.
- Jika belum memiliki akun GitHub, Anda harus membuat akun GitHub
- Gunakan akun GitHub yang ada jika Anda memilikinya. GitHub cenderung memblokir akun baru sebagai spam.
- Konfigurasikan autentikasi 2 langkah di akun GitHub Anda untuk mengurangi kemungkinan akun Anda ditandai sebagai spam.
3. Penyiapan project
- Login ke Konsol Google Cloud.
- Aktifkan penagihan di Konsol Cloud.
- Menyelesaikan lab ini akan menghabiskan biaya kurang dari $1 USD untuk resource Cloud.
- Anda dapat mengikuti langkah-langkah di akhir lab ini untuk menghapus resource guna menghindari tagihan lebih lanjut.
- Pengguna baru memenuhi syarat untuk Uji Coba Gratis senilai$300 USD.
- Menghadiri acara AI Generatif untuk Developer? Kredit sebesar$1 USD mungkin tersedia.
- Buat project baru atau pilih untuk menggunakan kembali project yang ada.
- Konfirmasi bahwa penagihan diaktifkan di Project saya di Penagihan Cloud
- Jika project baru Anda bertuliskan
Billing is disabled
di kolomBilling account
:- Klik tiga titik di kolom
Actions
- Klik Ubah penagihan
- Pilih akun penagihan yang ingin Anda gunakan
- Klik tiga titik di kolom
- Jika Anda menghadiri acara Gen AI for Devs, akun tersebut kemungkinan akan diberi nama Akun Penagihan Uji Coba Google Cloud Platform
- Jika project baru Anda bertuliskan
4. Membuka Cloud Shell Editor
- Buka Cloud Shell Editor
- Jika terminal tidak muncul di bagian bawah layar, buka:
- Klik menu tiga garis
- Klik Terminal
- Klik New Terminal
- Klik menu tiga garis
- Di terminal, tetapkan project Anda dengan perintah ini:
- Format:
gcloud config set project [PROJECT_ID]
- Contoh:
gcloud config set project lab-project-id-example
- Jika Anda tidak dapat mengingat project ID:
- Anda dapat mencantumkan semua project ID dengan:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Anda dapat mencantumkan semua project ID dengan:
- Format:
- Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan.
- Anda akan melihat pesan ini:
Jika Anda melihatUpdated property [core/project].
WARNING
dan ditanyaDo you want to continue (Y/N)?
, berarti Anda mungkin salah memasukkan project ID. TekanN
, tekanEnter
, lalu coba jalankan kembali perintahgcloud config set project
.
5. Mengaktifkan API
Di terminal, aktifkan API:
gcloud services enable \
run.googleapis.com \
cloudbuild.googleapis.com \
aiplatform.googleapis.com
Pemrosesan perintah ini mungkin memerlukan waktu beberapa menit, tetapi pada akhirnya akan menampilkan pesan berhasil seperti ini:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. Mengonfigurasi Git
- Tetapkan email pengguna git global Anda:
git config --global user.email "you@example.com"
- Tetapkan nama pengguna git global Anda:
git config --global user.name "Your Name"
- Tetapkan cabang default git global Anda ke
main
:git config --global init.defaultBranch main
7. Tuliskan kode Anda
Untuk menulis aplikasi di Node.js:
- Buka direktori utama:
cd ~
- Buat direktori
codelab-genai
:mkdir codelab-genai
- Buka direktori
codelab-genai
:cd codelab-genai
- Buat file
index.js
:touch index.js
- Buat file
package.json
:npm init es6 -y
- Menambahkan
express
sebagai dependensinpm install express
- Menambahkan file
.gitignore
untuk mencegah commitnode_modules
echo node_modules/ >> .gitignore
- Buka file
index.js
di Cloud Shell Editor: File kosong akan muncul di bagian atas layar. Di sinilah Anda dapat mengedit filecloudshell edit index.js
index.js
ini. - Salin kode berikut dan tempelkan ke dalam file
index.js
yang terbuka: Setelah beberapa detik, Editor Cloud Shell akan otomatis menyimpan kode Anda. Kode ini merespons permintaan http dengan sapaan "Halo dunia!".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}`); });
Kode awal untuk aplikasi Anda sudah selesai dan siap disimpan dalam kontrol versi.
8. Membuat repositori
- Kembali ke terminal Cloud Shell di bagian bawah layar.
- Pastikan Anda masih berada di direktori yang benar:
cd ~/codelab-genai
- Melakukan inisialisasi repositori git
git init -b main
- Login ke GitHub CLI
Tekangh auth login
Enter
untuk menerima opsi default dan ikuti petunjuk di alat GitHub CLI, termasuk:- Akun mana yang ingin Anda gunakan untuk login?
GitHub.com
- Apa protokol pilihan Anda untuk operasi Git di host ini?
HTTPS
- Mengautentikasi Git dengan kredensial GitHub Anda?
Y
(Lewati jika opsi ini tidak muncul.) - Bagaimana Anda ingin mengautentikasi GitHub CLI?
Login with a web browser
- Menyalin kode sekali pakai
- Buka https://github.com/login/device
- Tempelkan kode sekali pakai Anda
- Klik Beri otorisasi GitHub
- Selesaikan login Anda
- Akun mana yang ingin Anda gunakan untuk login?
- Pastikan Anda login:
Jika Anda berhasil login, tindakan ini akan menampilkan nama pengguna GitHub Anda.gh api user -q ".login"
- Membuat variabel
GITHUB_USERNAME
GITHUB_USERNAME=$(gh api user -q ".login")
- Pastikan Anda telah membuat variabel lingkungan:
Jika Anda berhasil membuat variabel, tindakan ini akan menampilkan nama pengguna GitHub Anda.echo ${GITHUB_USERNAME}
- Buat repositori GitHub kosong bernama
codelab-genai
: Jika Anda menerima error:gh repo create codelab-genai --private
Kemudian, Anda sudah memiliki repositori bernamaGraphQL: Name already exists on this account (createRepository)
codelab-genai
. Anda memiliki dua opsi untuk melanjutkan tutorial ini:- Menghapus repositori GitHub yang ada
- Buat repositori dengan nama yang berbeda dan jangan lupa untuk mengubahnya dalam perintah berikut.
- Tambahkan repositori
codelab-genai
sebagaiorigin
jarak jauh:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. Membagikan kode
- Pastikan Anda berada di direktori yang benar:
cd ~/codelab-genai
- Tambahkan semua file dalam direktori saat ini ke commit ini:
git add .
- Buat commit pertama:
git commit -m "add http server"
- Kirim commit Anda ke cabang
main
dari repositoriorigin
:git push -u origin main
Anda dapat menjalankan perintah ini dan membuka URL yang dihasilkan untuk melihat kode aplikasi di 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. Menyiapkan deployment otomatis
- Biarkan tab Cloud Shell Editor tetap terbuka. Kita akan kembali ke tab ini nanti.
- Di tab baru, buka halaman Cloud Run
- Pilih Project Google Cloud yang benar di konsol
- Klik HUBUNGKAN REPOSITORI
- Klik SIAPAKAN DENGAN CLOUD BUILD
- Pilih GitHub sebagai Penyedia Repositori
- Jika Anda tidak login ke akun GitHub di browser, login dengan kredensial Anda.
- Klik Autentikasi, lalu klik Lanjutkan.
- Setelah login, Anda akan melihat pesan di halaman Cloud Run yang menyatakan Aplikasi GitHub tidak diinstal di repositori apa pun.
- Klik tombol INSTALL GOOGLE CLOUD BUILD.
- Di halaman Penyiapan Penginstalan, pilih Hanya pilih repositori dan pilih repositori codelab-genai yang Anda buat melalui CLI.
- Klik Instal
- Catatan: Jika Anda memiliki banyak repositori GitHub, proses ini dapat memerlukan waktu beberapa menit untuk dimuat.
- Pilih
your-user-name/codelab-genai
sebagai Repositori- Jika repositori tidak ada, klik link Manage Connected Repositories.
- Biarkan Cabang sebagai
^main$
- Klik Go, Node.js, Python, Java, .NET Core, Ruby, atau PHP melalui buildpack Google Cloud
- Biarkan kolom lain (
Build context directory
,Entrypoint
, danFunction target
) tetap seperti semula.
- Biarkan kolom lain (
- Klik Simpan
- Pilih GitHub sebagai Penyedia Repositori
- Scroll ke bawah ke Autentikasi
- Klik Izinkan pemanggilan yang tidak diautentikasi
- Klik BUAT
Setelah build selesai (yang akan memerlukan waktu beberapa menit), jalankan perintah ini dan buka URL yang dihasilkan untuk melihat aplikasi yang sedang berjalan:
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. Mengubah kode
Kembali ke Cloud Shell Editor
Jika masih membuka Cloud Shell Editor, Anda dapat melewati langkah-langkah ini.
- Buka Cloud Shell Editor
- Jika terminal tidak muncul di bagian bawah layar, buka:
- Klik menu tiga garis
- Klik Terminal
- Klik New Terminal
- Klik menu tiga garis
- Di terminal, tetapkan project Anda dengan perintah ini:
- Format:
gcloud config set project [PROJECT_ID]
- Contoh:
gcloud config set project lab-project-id-example
- Jika Anda tidak dapat mengingat project ID:
- Anda dapat mencantumkan semua project ID dengan:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Anda dapat mencantumkan semua project ID dengan:
- Format:
- Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan.
- Anda akan melihat pesan ini:
Jika Anda melihatUpdated property [core/project].
WARNING
dan ditanyaDo you want to continue (Y/N)?
, berarti Anda mungkin salah memasukkan project ID. TekanN
, tekanEnter
, lalu coba jalankan kembali perintahgcloud config set project
.
Menambahkan Genkit dan Vertex AI ke aplikasi Anda
- Kembali ke terminal Cloud Shell di bagian bawah layar.
- Pastikan Anda masih berada di direktori yang benar:
cd ~/codelab-genai
- Instal Node.js Genkit SDK:
npm install @genkit-ai/ai
- Instal Node.js Genkit SDK untuk Vertex AI:
npm install @genkit-ai/vertexai
- Buka kembali
index.js
di Cloud Shell Editorcloudshell edit ~/codelab-genai/index.js
- Ganti kode di file
index.js
dengan: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}`); });
- Pastikan Anda masih berada di direktori yang benar di Cloud Shell:
cd ~/codelab-genai
- Jalankan perintah ini untuk melakukan versi baru aplikasi ke repositori git lokal Anda:
git add . git commit -m "add latest changes"
- Kirim perubahan ke GitHub:
git push
- Setelah build selesai, jalankan perintah ini dan buka aplikasi yang di-deploy:
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"
Mungkin perlu waktu beberapa menit hingga build selesai sebelum Anda dapat melihat perubahan.
Anda dapat melihat histori semua revisi di sini: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions
12. (Opsional) Menggunakan file .prompt dengan Genkit
- Kembali ke terminal Cloud Shell di bagian bawah layar.
- Pastikan Anda masih berada di direktori yang benar:
cd ~/codelab-genai
- Buat folder
prompts
untuk menyimpan perintah Anda:mkdir prompts
- Buat file
animal-facts.prompt
untuk membuat perintah pertama Anda:touch prompts/animal-facts.prompt
- Buka file
animal-facts.prompt
di Cloud Shell Editor:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- Edit
animal-facts.prompt
dan tempelkan kode berikut ke dalamnya:--- 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.
- Buka file
index.js
di Cloud Shell Editor:cloudshell edit ~/codelab-genai/index.js
- Ganti kode di file
index.js
dengan: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}`); });
- Pastikan Anda masih berada di direktori yang benar di Cloud Shell:
cd ~/codelab-genai
- Jalankan perintah ini untuk melakukan versi baru aplikasi ke repositori git lokal Anda:
git add . git commit -m "add latest changes"
- Kirim perubahan ke GitHub:
git push
- Setelah build selesai, jalankan perintah ini dan buka aplikasi yang di-deploy:
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"
Mungkin perlu waktu beberapa menit hingga build selesai sebelum Anda dapat melihat perubahan.
Anda dapat melihat histori semua revisi di sini: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions
13. (Opsional) Gunakan perintah sistem
Langkah ini mengasumsikan bahwa Anda telah menambahkan file .prompt
di langkah sebelumnya.
- Kembali ke terminal Cloud Shell di bagian bawah layar.
- Pastikan Anda masih berada di direktori yang benar:
cd ~/codelab-genai
- Buka file
animal-facts.prompt
di Cloud Shell Editor:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- Edit
animal-facts.prompt
dan tempelkan kode berikut ke dalamnya:--- 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}}
- Pastikan Anda masih berada di direktori yang benar di Cloud Shell:
cd ~/codelab-genai
- Jalankan perintah ini untuk melakukan versi baru aplikasi ke repositori git lokal Anda:
git add . git commit -m "add latest changes"
- Kirim perubahan ke GitHub:
git push
- Setelah build selesai, jalankan perintah ini dan buka aplikasi yang di-deploy:
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"
Mungkin perlu waktu beberapa menit hingga build selesai sebelum Anda dapat melihat perubahan.
Anda dapat melihat histori semua revisi di sini: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions
14. Selamat
Dalam lab ini, Anda telah menulis aplikasi web dan mengonfigurasi Cloud Run untuk men-deploy aplikasi secara otomatis saat perubahan dilakukan pada kode sumber aplikasi. Kemudian, Anda mengubah aplikasi dan men-deploy-nya lagi.
Jika menyukai lab ini, Anda dapat mencobanya lagi dalam bahasa atau framework coding lain:
Berikut beberapa opsi untuk melanjutkan pembelajaran Anda:
- Dokumen Genkit: Mulai
- Codelab untuk menambahkan visibilitas ke aplikasi Node.js Anda: Teknik visibilitas praktis untuk aplikasi AI Generatif di JavaScript
- Codelab untuk menambahkan frontend ke aplikasi Anda dengan Next.js: Men-deploy Aplikasi Web Next.js AI Generatif secara Otomatis dari Kontrol Versi ke Cloud Run
- Codelab untuk menunjukkan cara menggunakan panggilan fungsi: Cara menggunakan panggilan fungsi Gemini dengan Cloud Run
- Codelab untuk menggunakan AI guna memproses konten video: Cara menggunakan Video Intelligence API Cloud Run Jobs untuk memproses Video adegan demi adegan