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 Angular – dựa trên Angular
- Nuxt.js – dựa trên Vue.js
- Next.js – dựa trên React
- Remix – dựa trên React
- SvelteKit – dựa trên Svelte
- SolidStart – dựa trên Solid.js
- Chụp ảnh thiên văn
- Qwik
Kiến thức bạn sẽ học được
- Cách tự động triển khai các khung JavaScript mà Cloud Build hỗ trợ
- Cách triển khai các 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 trên Cloud Run
- Bạn có thể xác nhận điều này nếu trước đây đã triển khai một 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ừ mã nguồn để bắt đầu.
2. Kích hoạt Cloud Shell
- Chuyển đến cửa sổ dòng lệnh 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ả về Cloud Shell. Nếu 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 để đặt dự án
gcloud:gcloud config set project <PROJECT_ID>
gcloud config set project js-frameworks
3. Bật API
Để có thể bắt đầu sử dụng lớp học lập trình này, bạn cần bật một số API. Lớp học lập trình này yêu cầu bạn 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 từng lượt triển khai. Lệnh này sẽ đặt khu vực mặc định thành us-central1 để bạn không cần đặt cho từng khu vực.
gcloud config set run/region us-central1
5. Định cấu hình git
Theo mặc định, một số thư viện dự kiến sẽ dùng git để quản lý phiên bản. Nếu đã định cấu hình git trên thiết bị của mình (ví dụ: bạn đang chạy phòng thí nghiệm này cục bộ), thì bạn không cần 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 Angular (Angular)
- 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 lựa chọn 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 lựa chọn mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Angular trên thiết 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 lựa chọn 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 lựa chọn mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Nuxt.js trên thiết bị
cd .. rm -rf nuxt-app - Xoá dịch vụ Nuxt.js Cloud Run
gcloud run services delete nuxt-appEnterđể tiếp tục.
8. Next.js (React)
- 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 lựa chọn 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 chế độ mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Next.js trên thiết bị
cd .. rm -rf next-app - Xoá dịch vụ Next.js Cloud Run
gcloud run services delete next-appEnterđể tiếp tục.
9. Remix (React)
- Chuyển đến thư mục mà bạn muốn tạo ứng dụng Angular
cd ~
- Tạo ứng dụng Remix
npx create-remix remix-app
Enterđể chấp nhận 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 lựa chọn mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án phối lại trên thiết 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 không sử dụng Cloud Shell hoặc chỉ triển khai một ứng dụng, bạn không bắt buộc phải thực hiện bước này
Cloud Shell cung cấp một thư mục chính có dung lượng 5 GB và chạy trên Google Cloud.
Để triển khai cả 8 khung này bằng Cloud Shell, bạn cần tạo không gian cho các ứng dụng còn lại.
Việc xoá các dự án trên Cloud Shell sẽ không xoá các dịch vụ Cloud Run mà bạn đã triển khai.
Để xoá các ứng dụng mà 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 ứng dụng SvelteKit
npx create-svelte svelte-app
Enterđể chấp nhận 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 lựa chọn mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án SvelteKit trên thiết bị
cd .. rm -rf svelte-app - Xoá dịch vụ SvelteKit Cloud Run
gcloud run services delete svelte-appEnterđể tiếp tục.
12. SolidStart (Solid)
- 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 lựa chọn 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 chế độ mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án SolidStart trên máy tính
cd .. rm -rf solid-app - Xoá dịch vụ SolidStart Cloud Run
gcloud run services delete solid-appEnterđể tiếp tục.
13. Chụp ảnh thiên văn
- 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 lựa chọn 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 lựa chọn mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Astro trên thiết 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 ứng dụng Qwik
npx create-qwik
Enterđể chấp nhận các lựa chọn mặc định. - Chuyển đến thư mục dự án mới mà bạn đã tạo
cd qwik-app
- Thêm trình 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 lựa chọn mặc định.
Truy cập vào ứng dụng của bạn
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 đã triển khai.
Dọn dẹp không bắt buộc
- Xoá dự án Qwik trên thiết 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 này!
Bạn nên xem tài liệu về Hướng dẫn nhanh: Triển khai lên Cloud Run từ kho lưu trữ git để các bản dựng trong tương lai có thể tự động triển khai mỗi khi bạn đẩy lên tính năng quản lý phiên bản.
Nội dung đã đề cập
- Cách tự động triển khai các khung JavaScript mà Cloud Build hỗ trợ
- SSR Angular – dựa trên Angular
- Nuxt.js – dựa trên Vue.js
- Next.js – dựa trên React
- Remix – dựa trên React
- SvelteKit – dựa trên Svelte
- SolidStart – dựa trên Solid.js
- Cách triển khai các khung JavaScript yêu cầu cấu hình
- Chụp ảnh thiên văn
- Qwik
16. Dọn dẹp
Để tránh bị tính phí ngoài ý muốn (ví dụ: nếu dịch vụ Cloud Run này được gọi nhiều lần hơn hạn mức gọi Cloud Run hằng tháng của bạn trong cấp miễn phí), bạn có thể xoá công việc Cloud Run hoặc xoá dự án mà bạn đã tạo ở Bước 1.
Để xoá các dịch vụ Cloud Run, hãy truy cập vào Cloud Console của Cloud Run 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 bạn đã tạo ở Bước 2 rồi chọn Xoá. Nếu xoá dự án, bạn sẽ cần thay đổi dự án trong Cloud SDK. Bạn có thể xem danh sách tất cả các dự án có sẵn bằng cách chạy gcloud projects list.