1. Tổng quan
Việc triển khai ứng dụng web lần đầu có thể khiến bạn lo lắng. Ngay cả sau lần triển khai đầu tiên, nếu quá trình này quá nhiều việc, bạn có thể tránh triển khai các phiên bản mới của ứng dụng. Với tính năng triển khai liên tục, bạn có thể dễ dàng tự động triển khai các thay đổi đối với ứng dụng của mình.
Trong lớp học lập trình này, bạn sẽ viết một ứng dụng web và định cấu hình Cloud Run để tự động triển khai ứng dụng khi có thay đổi đối với mã nguồn của ứng dụng. Sau đó, bạn sửa đổi ứng dụng và triển khai lại ứng dụng.
Kiến thức bạn sẽ học được
- Viết ứng dụng web bằng Trình chỉnh sửa Cloud Shell
- Lưu trữ mã ứng dụng trong GitHub
- Tự động triển khai ứng dụng của bạn lên Cloud Run
- Thêm AI tạo sinh vào ứng dụng bằng Genkit
- Quản lý lời nhắc LLM bằng thư viện dotprompt
2. Điều kiện tiên quyết
- Nếu chưa có Tài khoản Google, bạn phải tạo Tài khoản Google.
- Sử dụng tài khoản cá nhân thay vì tài khoản công việc hoặc trường học. Tài khoản công việc và tài khoản trường học có thể có các quy định hạn chế khiến bạn không bật được các API cần thiết cho lớp học này.
- Nếu chưa có tài khoản GitHub, bạn phải tạo tài khoản GitHub
- Sử dụng tài khoản GitHub hiện có nếu bạn có. GitHub có nhiều khả năng sẽ chặn tài khoản mới vì cho rằng đó là tài khoản rác.
- Định cấu hình tính năng xác thực hai yếu tố trên tài khoản GitHub để giảm khả năng tài khoản của bạn bị đánh dấu là tài khoản vi phạm.
3. Thiết lập dự án
- Đăng nhập vào Google Cloud Console.
- Bật tính năng thanh toán trong Cloud Console.
- Chi phí để hoàn thành lớp học này sẽ dưới 1 USD cho các tài nguyên trên đám mây.
- Bạn có thể làm theo các bước ở cuối lớp học này để xoá tài nguyên nhằm tránh bị tính thêm phí.
- Người dùng mới đủ điều kiện dùng thử miễn phí 300 USD.
- Bạn sẽ tham dự sự kiện Gen AI for Devs (AI tạo sinh dành cho nhà phát triển)? Bạn có thể nhận được 1 USD tín dụng.
- Tạo dự án mới hoặc chọn sử dụng lại một dự án hiện có.
- Xác nhận rằng bạn đã bật tính năng thanh toán trong phần Dự án của tôi trong Cloud Billing
- Nếu dự án mới của bạn có nội dung
Billing is disabled
trong cộtBilling account
:- Nhấp vào biểu tượng ba dấu chấm trong cột
Actions
- Nhấp vào Thay đổi thông tin thanh toán
- Chọn tài khoản thanh toán mà bạn muốn sử dụng
- Nhấp vào biểu tượng ba dấu chấm trong cột
- Nếu bạn đang tham dự một sự kiện Gen AI for Devs, tài khoản này có thể được đặt tên là Tài khoản thanh toán dùng thử Google Cloud Platform
- Nếu dự án mới của bạn có nội dung
4. Mở Trình chỉnh sửa Cloud Shell
- Chuyển đến Trình chỉnh sửa Cloud Shell
- Nếu cửa sổ dòng lệnh không xuất hiện ở cuối màn hình, hãy mở cửa sổ đó:
- Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang
- Nhấp vào Terminal (Thiết bị đầu cuối)
- Nhấp vào New Terminal (Thiết bị đầu cuối mới)
- Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang
- Trong dòng lệnh, hãy thiết lập dự án bằng lệnh sau:
- Định dạng:
gcloud config set project [PROJECT_ID]
- Ví dụ:
gcloud config set project lab-project-id-example
- Nếu bạn không nhớ mã dự án của mình:
- Bạn có thể liệt kê tất cả mã dự án bằng:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Bạn có thể liệt kê tất cả mã dự án bằng:
- Định dạng:
- Nếu bạn được nhắc uỷ quyền, hãy nhấp vào Uỷ quyền để tiếp tục.
- Bạn sẽ thấy thông báo này:
Nếu bạn thấyUpdated property [core/project].
WARNING
và được hỏiDo you want to continue (Y/N)?
, thì có thể bạn đã nhập không chính xác mã dự án. NhấnN
, nhấnEnter
rồi thử chạy lại lệnhgcloud config set project
.
5. Bật API
Trong dòng lệnh, hãy bật các API:
gcloud services enable \
run.googleapis.com \
cloudbuild.googleapis.com \
aiplatform.googleapis.com
Quá trình thực thi lệnh này có thể mất vài phút, nhưng cuối cùng sẽ tạo ra một thông báo thành công tương tự như sau:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. Định cấu hình Git
- Đặt email người dùng git chung:
git config --global user.email "you@example.com"
- Đặt tên người dùng git chung:
git config --global user.name "Your Name"
- Đặt nhánh mặc định git chung thành
main
:git config --global init.defaultBranch main
7. Viết mã
Cách viết ứng dụng trong Node.js:
- Chuyển đến thư mục gốc:
cd ~
- Tạo thư mục
codelab-genai
:mkdir codelab-genai
- Chuyển đến thư mục
codelab-genai
:cd codelab-genai
- Tạo tệp
index.js
:touch index.js
- Tạo tệp
package.json
:npm init es6 -y
- Thêm
express
làm phần phụ thuộcnpm install express
- Thêm tệp
.gitignore
để ngăn việc cam kếtnode_modules
echo node_modules/ >> .gitignore
- Mở tệp
index.js
trong Trình chỉnh sửa Cloud Shell: Giờ đây, một tệp trống sẽ xuất hiện ở phần trên cùng của màn hình. Đây là nơi bạn có thể chỉnh sửa tệpcloudshell edit index.js
index.js
này. - Sao chép mã sau và dán vào tệp
index.js
đã mở: Sau vài giây, Trình chỉnh sửa Cloud Shell sẽ tự động lưu mã của bạn. Mã này phản hồi các yêu cầu http bằng lời chào "Hello world!" (Xin chào thế giới!).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}`); });
Mã ban đầu cho ứng dụng của bạn đã hoàn tất và sẵn sàng được lưu trữ trong phần kiểm soát phiên bản.
8. Tạo kho lưu trữ
- Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
- Đảm bảo bạn vẫn đang ở đúng thư mục:
cd ~/codelab-genai
- Khởi chạy kho lưu trữ git
git init -b main
- Đăng nhập vào GitHub CLI
Nhấngh auth login
Enter
để chấp nhận các tuỳ chọn mặc định và làm theo hướng dẫn trong công cụ GitHub CLI, bao gồm:- Bạn muốn đăng nhập vào tài khoản nào?
GitHub.com
- Bạn muốn sử dụng giao thức nào cho các thao tác Git trên máy chủ này?
HTTPS
- Xác thực Git bằng thông tin xác thực GitHub của bạn?
Y
(Bỏ qua nếu mục này không xuất hiện.) - Bạn muốn xác thực GitHub CLI theo cách nào?
Login with a web browser
- Sao chép mã một lần
- Mở https://github.com/login/device
- Dán mã một lần
- Nhấp vào Uỷ quyền GitHub
- Hoàn tất quy trình đăng nhập
- Bạn muốn đăng nhập vào tài khoản nào?
- Xác nhận rằng bạn đã đăng nhập:
Nếu bạn đã đăng nhập thành công, thì kết quả sẽ là tên người dùng GitHub của bạn.gh api user -q ".login"
- Tạo biến
GITHUB_USERNAME
GITHUB_USERNAME=$(gh api user -q ".login")
- Xác nhận rằng bạn đã tạo biến môi trường:
Nếu bạn đã tạo thành công biến này, thì biến này sẽ xuất ra tên người dùng GitHub của bạn.echo ${GITHUB_USERNAME}
- Tạo một kho lưu trữ GitHub trống có tên là
codelab-genai
: Nếu bạn nhận được lỗi:gh repo create codelab-genai --private
Sau đó, bạn đã có một kho lưu trữ có tên làGraphQL: Name already exists on this account (createRepository)
codelab-genai
. Bạn có hai lựa chọn để tiếp tục theo dõi hướng dẫn này:- Xoá kho lưu trữ GitHub hiện có
- Tạo một kho lưu trữ có tên khác và nhớ thay đổi tên đó trong các lệnh sau.
- Thêm kho lưu trữ
codelab-genai
làmorigin
từ xa:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. Chia sẻ mã
- Xác nhận bạn đang ở đúng thư mục:
cd ~/codelab-genai
- Thêm tất cả tệp trong thư mục hiện tại vào thay đổi sau:
git add .
- Tạo thay đổi đầu tiên:
git commit -m "add http server"
- Đẩy thay đổi của bạn vào nhánh
main
của kho lưu trữorigin
:git push -u origin main
Bạn có thể chạy lệnh này và truy cập vào URL thu được để xem mã ứng dụng trên 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. Thiết lập tính năng triển khai tự động
- Để thẻ Trình chỉnh sửa Cloud Shell mở. Chúng ta sẽ quay lại thẻ này sau.
- Trong một thẻ mới, hãy truy cập vào trang Cloud Run
- Chọn đúng Dự án Google Cloud trong bảng điều khiển
- Nhấp vào KẾT NỐI KHO LƯU TRỮ
- Nhấp vào THIẾT LẬP BẰNG CLOUD BUILD
- Chọn GitHub làm Nhà cung cấp kho lưu trữ
- Nếu bạn chưa đăng nhập vào tài khoản GitHub trong trình duyệt, hãy đăng nhập bằng thông tin xác thực của bạn.
- Nhấp vào Xác thực, rồi nhấp vào Tiếp tục.
- Sau khi đăng nhập, bạn sẽ thấy thông báo trên trang Cloud Run cho biết Ứng dụng GitHub chưa được cài đặt trên bất kỳ kho lưu trữ nào của bạn.
- Nhấp vào nút INSTALL GOOGLE CLOUD BUILD (CÀI ĐẶT GOOGLE CLOUD BUILD).
- Trên trang Thiết lập cài đặt, hãy chọn Chỉ chọn kho lưu trữ rồi chọn kho lưu trữ codelab-genai mà bạn đã tạo thông qua CLI.
- Nhấp vào Cài đặt
- Lưu ý: Nếu bạn có nhiều kho lưu trữ GitHub, thì quá trình này có thể mất vài phút để tải.
- Chọn
your-user-name/codelab-genai
làm Kho lưu trữ- Nếu kho lưu trữ không xuất hiện, hãy nhấp vào đường liên kết Quản lý kho lưu trữ đã kết nối.
- Giữ nguyên Branch là
^main$
- Nhấp vào Go, Node.js, Python, Java, .NET Core, Ruby hoặc PHP thông qua các gói xây dựng của Google Cloud
- Giữ nguyên các trường khác (
Build context directory
,Entrypoint
vàFunction target
).
- Giữ nguyên các trường khác (
- Nhấp vào Lưu
- Chọn GitHub làm Nhà cung cấp kho lưu trữ
- Di chuyển xuống phần Xác thực
- Nhấp vào Allow unauthenticated invocations (Cho phép các lệnh gọi chưa xác thực)
- Nhấp vào TẠO
Sau khi bản dựng hoàn tất (sẽ mất vài phút), hãy chạy lệnh này và truy cập vào URL thu được để xem ứng dụng đang chạy:
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. Thay đổi mã
Quay lại Trình chỉnh sửa Cloud Shell
Nếu vẫn mở Trình chỉnh sửa Cloud Shell, bạn có thể bỏ qua các bước này.
- Chuyển đến Trình chỉnh sửa Cloud Shell
- Nếu cửa sổ dòng lệnh không xuất hiện ở cuối màn hình, hãy mở cửa sổ đó:
- Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang
- Nhấp vào Terminal (Thiết bị đầu cuối)
- Nhấp vào New Terminal (Thiết bị đầu cuối mới)
- Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang
- Trong dòng lệnh, hãy thiết lập dự án bằng lệnh sau:
- Định dạng:
gcloud config set project [PROJECT_ID]
- Ví dụ:
gcloud config set project lab-project-id-example
- Nếu bạn không nhớ mã dự án của mình:
- Bạn có thể liệt kê tất cả mã dự án bằng:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Bạn có thể liệt kê tất cả mã dự án bằng:
- Định dạng:
- Nếu bạn được nhắc uỷ quyền, hãy nhấp vào Uỷ quyền để tiếp tục.
- Bạn sẽ thấy thông báo này:
Nếu bạn thấyUpdated property [core/project].
WARNING
và được hỏiDo you want to continue (Y/N)?
, thì có thể bạn đã nhập không chính xác mã dự án. NhấnN
, nhấnEnter
rồi thử chạy lại lệnhgcloud config set project
.
Thêm Genkit và Vertex AI vào ứng dụng
- Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
- Đảm bảo bạn vẫn đang ở đúng thư mục:
cd ~/codelab-genai
- Cài đặt SDK Genkit Node.js:
npm install @genkit-ai/ai
- Cài đặt SDK Genkit Node.js cho Vertex AI:
npm install @genkit-ai/vertexai
- Mở lại
index.js
trong Trình chỉnh sửa Cloud Shellcloudshell edit ~/codelab-genai/index.js
- Thay thế mã trong tệp
index.js
bằng: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}`); });
- Đảm bảo bạn vẫn đang ở đúng thư mục trong Cloud Shell:
cd ~/codelab-genai
- Chạy các lệnh sau để cam kết phiên bản mới của ứng dụng vào kho lưu trữ git cục bộ:
git add . git commit -m "add latest changes"
- Đẩy các thay đổi lên GitHub:
git push
- Sau khi bản dựng hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai:
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"
Có thể mất vài phút để quá trình tạo bản dựng hoàn tất thì bạn mới thấy được các thay đổi.
Bạn có thể xem nhật ký của tất cả các bản sửa đổi tại đây: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions
12. (Không bắt buộc) Sử dụng tệp .prompt với Genkit
- Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
- Đảm bảo bạn vẫn đang ở đúng thư mục:
cd ~/codelab-genai
- Tạo thư mục
prompts
để lưu trữ câu lệnh:mkdir prompts
- Tạo tệp
animal-facts.prompt
để tạo câu lệnh đầu tiên:touch prompts/animal-facts.prompt
- Mở tệp
animal-facts.prompt
trong Trình chỉnh sửa Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- Chỉnh sửa
animal-facts.prompt
và dán mã sau vào:--- 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.
- Mở tệp
index.js
trong Trình chỉnh sửa Cloud Shell:cloudshell edit ~/codelab-genai/index.js
- Thay thế mã trong tệp
index.js
bằng: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}`); });
- Đảm bảo bạn vẫn đang ở đúng thư mục trong Cloud Shell:
cd ~/codelab-genai
- Chạy các lệnh sau để cam kết phiên bản mới của ứng dụng vào kho lưu trữ git cục bộ:
git add . git commit -m "add latest changes"
- Đẩy các thay đổi lên GitHub:
git push
- Sau khi bản dựng hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai:
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"
Có thể mất vài phút để quá trình tạo bản dựng hoàn tất thì bạn mới thấy được các thay đổi.
Bạn có thể xem nhật ký của tất cả các bản sửa đổi tại đây: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions
13. (Không bắt buộc) Sử dụng lời nhắc của hệ thống
Bước này giả định bạn đã thêm các tệp .prompt
ở bước trước.
- Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
- Đảm bảo bạn vẫn đang ở đúng thư mục:
cd ~/codelab-genai
- Mở tệp
animal-facts.prompt
trong Trình chỉnh sửa Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- Chỉnh sửa
animal-facts.prompt
và dán mã sau vào:--- 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}}
- Đảm bảo bạn vẫn đang ở đúng thư mục trong Cloud Shell:
cd ~/codelab-genai
- Chạy các lệnh sau để cam kết phiên bản mới của ứng dụng vào kho lưu trữ git cục bộ:
git add . git commit -m "add latest changes"
- Đẩy các thay đổi lên GitHub:
git push
- Sau khi bản dựng hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai:
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"
Có thể mất vài phút để quá trình tạo bản dựng hoàn tất thì bạn mới thấy được các thay đổi.
Bạn có thể xem nhật ký của tất cả các bản sửa đổi tại đây: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions
14. Xin chúc mừng
Trong lớp học lập trình này, bạn đã viết một ứng dụng web và định cấu hình Cloud Run để tự động triển khai ứng dụng khi có thay đổi đối với mã nguồn của ứng dụng. Sau đó, bạn đã sửa đổi ứng dụng và triển khai lại ứng dụng.
Nếu thấy thích thú với lớp học này, bạn có thể thử lại trong một ngôn ngữ lập trình hoặc khung khác:
Dưới đây là một số cách để bạn tiếp tục học tập:
- Tài liệu về Genkit: Bắt đầu
- Lớp học lập trình để thêm khả năng quan sát vào ứng dụng Node.js: Các kỹ thuật quan sát thực tế cho ứng dụng AI tạo sinh trong JavaScript
- Lớp học lập trình để thêm giao diện người dùng vào ứng dụng bằng Next.js: Tự động triển khai ứng dụng web Next.js AI tạo sinh từ tính năng Kiểm soát phiên bản đến Cloud Run
- Lớp học lập trình hướng dẫn cách sử dụng lệnh gọi hàm: Cách sử dụng lệnh gọi hàm Gemini bằng Cloud Run
- Lớp học lập trình về cách sử dụng AI để xử lý nội dung video: Cách sử dụng Cloud Run Jobs Video Intelligence API để xử lý từng cảnh trong video