1. Giới thiệu
Tổng quan
Trong lớp học lập trình này, hãy triển khai 8 ứng dụng JavaScript vào Cloud Run:
- SSR góc – dựa trên Angular
- Nuxt.js – dựa trên Vue.js
- Next.js – dựa trên React
- Phối lại – dựa trên React
- SvelteKit – dựa trên Svelte
- SolidStart – dựa trên Solid.js
- Astro
- Qwik
Kiến thức bạn sẽ học được
- Cách triển khai khung JavaScript mà Cloud Build hỗ trợ tự động
- Cách triển khai khung JavaScript yêu cầu cấu hình
Điều kiện tiên quyết
- Bạn đã đăng nhập vào thiết bị đầu cuối Cloud Shell.
- Bạn có một dự án trên Google Cloud đã bật tính năng thanh toán và có quyền triển khai Cloud Run
- Bạn có thể xác nhận điều này nếu trước đây bạn đã triển khai dịch vụ Cloud Run. Ví dụ: bạn có thể làm theo hướng dẫn triển khai dịch vụ web Node.js từ phần bắt đầu nhanh của mã nguồn để bắt đầu.
2. Kích hoạt Cloud Shell
- Chuyển đến thiết bị đầu cuối của Cloud Shell: https://shell.cloud.google.com/?show=terminalNếu đây là lần đầu tiên bạn khởi động Cloud Shell, bạn sẽ thấy một màn hình trung gian mô tả chức năng của Cloud Shell. Nếu bạn nhìn thấy màn hình trung gian, hãy nhấp vào Tiếp tục.Quá trình cấp phép và kết nối với Cloud Shell chỉ mất vài phút.
- Chạy lệnh sau trong Cloud Shell để thiết lập dự án
gcloudcủa bạn:gcloud config set project <PROJECT_ID>
gcloud config set project js-frameworks
3. Bật API
Trước khi có thể bắt đầu sử dụng lớp học lập trình này, bạn sẽ cần bật một số API. Lớp học lập trình này yêu cầu sử dụng các API sau. Bạn có thể bật các API đó bằng cách chạy lệnh sau:
gcloud services enable \
cloudbuild.googleapis.com \
artifactregistry.googleapis.com \
run.googleapis.com
Sau đó, bạn có thể thiết lập các biến môi trường sẽ được dùng trong suốt lớp học lập trình này.
4. Định cấu hình khu vực mặc định
Bạn có thể đặt riêng khu vực cho mỗi lần triển khai. Lệnh này sẽ thiết lập khu vực mặc định thành us-central1 để bạn không cần phải thiết lập cho từng khu vực.
gcloud config set run/region us-central1
5. Định cấu hình git
Một số thư viện dự kiến rằng git sẽ được dùng để quản lý phiên bản theo mặc định. Nếu đã định cấu hình git trên máy của mình (ví dụ: bạn đang chạy phòng thí nghiệm này trên máy), thì bạn không cần phải thực hiện các bước này.
git config --global user.email "you@example.com" git config --global user.name "Your Name" git config --global init.defaultBranch main
6. SSR góc (Góc)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo một ứng dụng Angular sử dụng tính năng Kết xuất phía máy chủ (SSR)
npx @angular/cli new angular-app --ssr
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd angular-app
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://angular-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Angular cục bộ
cd .. rm -rf angular-app - Xoá dịch vụ Angular Cloud Run
gcloud run services delete angular-appEnterđể tiếp tục.
7. Nuxt.js (Vue.js)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo ứng dụng Nuxt.js
npx nuxi init nuxt-app
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd nuxt-app
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://nuxt-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xóa dự án Nuxt.js cục bộ
cd .. rm -rf nuxt-app - Xóa dịch vụ Nuxt.js Cloud Run
gcloud run services delete nuxt-appEnterđể tiếp tục.
8. Next.js (Phản ứng)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo ứng dụng Next.js
npx create-next-app next-app
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd next-app
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://next-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Next.js cục bộ
cd .. rm -rf next-app - Xóa dịch vụ Next.js Cloud Run
gcloud run services delete next-appEnterđể tiếp tục.
9. Phối lại (Phản ứng)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo ứng dụng Phối lại
npx create-remix remix-app
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd remix-app
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://remix-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Phối lại cục bộ
cd .. rm -rf remix-app - Xoá dịch vụ Remix Cloud Run
gcloud run services delete remix-appEnterđể tiếp tục.
10. Dọn dẹp Cloud Shell
Nếu bạn không sử dụng Cloud Shell hoặc chỉ đang triển khai một ứng dụng, thì bước này là không bắt buộc
Cloud Shell cung cấp một thư mục gốc có dung lượng ổn định 5 GB và chạy trong Google Cloud.
Để triển khai cả 8 khung bằng Cloud Shell, bạn sẽ cần tạo không gian cho các ứng dụng còn lại.
Khi bạn xoá các dự án trên Cloud Shell, các dịch vụ Cloud Run mà bạn đã triển khai sẽ không bị xoá.
Để xóa các ứng dụng bạn đã tạo, hãy chạy các lệnh sau:
cd ~ rm -rf angular-app/ rm -rf nuxt-app/ rm -rf next-app/ rm -rf remix-app/
11. SvelteKit (Svelte)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo một ứng dụng SvelteKit
npx create-svelte svelte-app
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd svelte-app
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://svelte-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án SvelteKit cục bộ
cd .. rm -rf svelte-app - Xoá dịch vụ SvelteKit Cloud Run
gcloud run services delete svelte-appEnterđể tiếp tục.
12. Khởi động cứng (Khởi động cứng)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo ứng dụng SolidStart
npx create-solid solid-app
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd solid-app
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://solid-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá cục bộ dự án SolidStart
cd .. rm -rf solid-app - Xoá dịch vụ SolidStart Cloud Run
gcloud run services delete solid-appEnterđể tiếp tục.
13. Astro
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo một ứng dụng Astro
npx create-astro astro-app
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd astro-app
- Thêm bộ chuyển đổi Astro cho Node.js
npx astro add node
- Cập nhật tập lệnh
starttrongpackage.jsonnpm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://astro-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Astro cục bộ
cd .. rm -rf astro-app - Xoá dịch vụ Astro Cloud Run
gcloud run services delete astro-appEnterđể tiếp tục.
14. Qwik
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo một ứng dụng Qwik
npx create-qwik
Enterđể chấp nhận các chế độ mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd qwik-app
- Thêm bộ chuyển đổi Qwik cho Cloud Run
npm run qwik add cloud-run
- Triển khai ứng dụng
gcloud run deploy --allow-unauthenticated
Enterđể chấp nhận các chế độ mặc định.
Truy cập vào đơn đăng ký
Quá trình triển khai sẽ mất vài phút. Khi hoàn tất, Cloud Run sẽ trả về một URL như:
https://qwik-app-xxxxxxxxxx-uc.a.run.app
Mở URL được cung cấp trong một thẻ trình duyệt mới để xem ứng dụng mà bạn đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Qwik cục bộ
cd .. rm -rf qwik-app - Xoá dịch vụ Qwik Cloud Run
gcloud run services delete qwik-appEnterđể tiếp tục.
15. Xin chúc mừng!
Chúc mừng bạn đã hoàn thành lớp học lập trình!
Bạn nên tham khảo tài liệu về nội dung Bắt đầu nhanh: Triển khai cho Cloud Run từ kho lưu trữ git để các bản dựng sau này có thể tự động triển khai mỗi khi bạn đẩy mạnh quản lý phiên bản.
Nội dung đã đề cập
- Cách triển khai khung JavaScript mà Cloud Build hỗ trợ tự động
- SSR góc – dựa trên Angular
- Nuxt.js – dựa trên Vue.js
- Next.js – dựa trên React
- Phối lại – dựa trên React
- SvelteKit – dựa trên Svelte
- SolidStart – dựa trên Solid.js
- Cách triển khai khung JavaScript yêu cầu cấu hình
- Astro
- Qwik
16. Dọn dẹp
Để tránh các khoản phí vô tình (ví dụ: nếu dịch vụ Cloud Run này vô tình bị gọi nhiều lần hơn mức phân bổ lệnh gọi Cloud Run hằng tháng của bạn ở cấp miễn phí), bạn có thể xoá công việc trên Cloud Run hoặc xoá dự án bạn đã tạo ở Bước 1.
Để xoá các dịch vụ của Cloud Run, hãy truy cập vào Cloud Run Cloud Console tại https://console.cloud.google.com/run/ rồi xoá các dịch vụ Cloud Run.
Nếu chọn xoá toàn bộ dự án, bạn có thể truy cập vào https://console.cloud.google.com/cloud-resource-manager, chọn dự án mà bạn đã tạo ở Bước 2 rồi chọn Xoá. Nếu xoá dự án, bạn sẽ phải thay đổi các dự án trong Cloud SDK của mình. Bạn có thể xem danh sách tất cả dự án hiện có bằng cách chạy gcloud projects list.