วิธีทำให้เฟรมเวิร์ก JavaScript ทั้งหมดใช้งานได้ใน Cloud Run

1. บทนำ

ภาพรวม

ใน Codelab นี้ คุณจะได้ติดตั้งใช้งานแอปพลิเคชัน JavaScript 8 รายการใน Cloud Run

  • SSR ของ Angular - อิงตาม Angular
  • Nuxt.js - อิงตาม Vue.js
  • Next.js - อิงตาม React
  • Remix - อิงตาม React
  • SvelteKit - อิงตาม Svelte
  • SolidStart - อิงตาม Solid.js
  • โหมดถ่ายภาพดวงดาว
  • Qwik

ภาพหน้าจอแอปพลิเคชัน Angularภาพหน้าจอแอปพลิเคชัน Nuxt.jsภาพหน้าจอแอปพลิเคชัน Next.jsภาพหน้าจอของแอปพลิเคชันรีมิกซ์ภาพหน้าจอแอปพลิเคชัน SvelteKitภาพหน้าจอแอปพลิเคชัน SolidStartภาพหน้าจอแอปพลิเคชัน Astroภาพหน้าจอแอปพลิเคชัน Qwik

สิ่งที่คุณจะได้เรียนรู้

  • วิธีทําให้เฟรมเวิร์ก JavaScript ที่ Cloud Build รองรับใช้งานได้โดยอัตโนมัติ
  • วิธีติดตั้งใช้งานเฟรมเวิร์ก JavaScript ที่ต้องมีการกำหนดค่า

ข้อกำหนดเบื้องต้น

2. เปิดใช้งาน Cloud Shell

  1. ไปที่เทอร์มินัล Cloud Shell: https://shell.cloud.google.com/?show=terminal หากนี่เป็นครั้งแรกที่คุณเริ่มใช้ Cloud Shell คุณจะเห็นหน้าจอระดับกลางที่อธิบายว่า Cloud Shell คืออะไร หากเห็นหน้าจอระดับกลาง ให้คลิกต่อไป การจัดสรรและเชื่อมต่อกับ Cloud Shell จะใช้เวลาเพียงไม่กี่นาที
  2. เรียกใช้คำสั่งต่อไปนี้ใน Cloud Shell เพื่อตั้งค่าโปรเจ็กต์ gcloud
    gcloud config set project <PROJECT_ID>
    แทนที่ <PROJECT_ID> ด้วยรหัสโปรเจ็กต์ ตัวอย่าง
    gcloud config set project js-frameworks
    หากระบบแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์

3. เปิดใช้ API

ก่อนที่จะเริ่มใช้ Codelab นี้ได้ คุณจะต้องเปิดใช้ API หลายรายการ Codelab นี้กำหนดให้ใช้ API ต่อไปนี้ คุณเปิดใช้ API เหล่านั้นได้โดยการเรียกใช้คำสั่งต่อไปนี้

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

จากนั้นคุณจะตั้งค่าตัวแปรสภาพแวดล้อมที่จะใช้ตลอดทั้งโค้ดแล็บนี้ได้

4. กำหนดค่าภูมิภาคเริ่มต้น

คุณตั้งค่าภูมิภาคแยกกันสำหรับการติดตั้งใช้งานแต่ละรายการได้ คำสั่งนี้จะตั้งค่าภูมิภาคเริ่มต้นเป็น us-central1 เพื่อให้คุณไม่ต้องตั้งค่าสำหรับแต่ละรายการ

gcloud config set run/region us-central1

5. กำหนดค่า Git

ไลบรารีบางแห่งคาดหวังให้ใช้ git สำหรับการควบคุมเวอร์ชันโดยค่าเริ่มต้น หากคุณได้กำหนดค่า git ในเครื่องแล้ว (เช่น คุณกำลังเรียกใช้ Lab นี้ในเครื่อง) คุณไม่จำเป็นต้องทำตามขั้นตอนเหล่านี้

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)

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน Angular ที่ใช้การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) 
    npx @angular/cli new angular-app --ssr
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd angular-app
  4. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://angular-app-xxxxxxxxxx-uc.a.run.app

ภาพหน้าจอแอปพลิเคชัน Angular

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ Angular ในเครื่อง 
    cd ..
rm -rf angular-app
  2. ลบบริการ Angular Cloud Run 
    gcloud run services delete angular-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

7. Nuxt.js (Vue.js)

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน Nuxt.js 
    npx nuxi init nuxt-app
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd nuxt-app
  4. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอแอปพลิเคชัน Nuxt.js

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ Nuxt.js ในเครื่อง 
    cd ..
rm -rf nuxt-app
  2. ลบบริการ Nuxt.js Cloud Run 
    gcloud run services delete nuxt-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

8. Next.js (React)

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน Next.js 
    npx create-next-app next-app
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd next-app
  4. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://next-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอแอปพลิเคชัน Next.js

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ Next.js ในเครื่อง 
    cd ..
rm -rf next-app
  2. ลบบริการ Next.js Cloud Run 
    gcloud run services delete next-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

9. รีมิกซ์ (React)

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชันรีมิกซ์ 
    npx create-remix remix-app
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd remix-app
  4. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://remix-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอของแอปพลิเคชันรีมิกซ์

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์รีมิกซ์ในเครื่อง 
    cd ..
rm -rf remix-app
  2. ลบบริการ Remix Cloud Run 
    gcloud run services delete remix-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

10. การล้างข้อมูลใน Cloud Shell

หากไม่ได้ใช้ Cloud Shell หรือติดตั้งใช้งานแอปพลิเคชันเดียว ขั้นตอนนี้ไม่บังคับ

Cloud Shell มีไดเรกทอรีหลักขนาด 5 GB แบบถาวรและทำงานใน Google Cloud

หากต้องการติดตั้งใช้งานเฟรมเวิร์กทั้ง 8 รายการด้วย Cloud Shell คุณจะต้องสร้างพื้นที่สำหรับแอปพลิเคชันที่เหลือ

การนำโปรเจ็กต์ใน Cloud Shell ออกจะไม่ลบบริการ Cloud Run ที่คุณได้ติดตั้งใช้งาน

หากต้องการล้างแอปพลิเคชันที่คุณสร้างไว้แล้ว ให้เรียกใช้คำสั่งต่อไปนี้

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน SvelteKit 
    npx create-svelte svelte-app
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd svelte-app
  4. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://svelte-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอแอปพลิเคชัน SvelteKit

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ SvelteKit ในเครื่อง 
    cd ..
rm -rf svelte-app
  2. ลบบริการ SvelteKit Cloud Run 
    gcloud run services delete svelte-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

12. SolidStart (Solid)

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน SolidStart 
    npx create-solid solid-app
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd solid-app
  4. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://solid-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอแอปพลิเคชัน SolidStart

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ SolidStart ในเครื่อง 
    cd ..
rm -rf solid-app
  2. ลบบริการ SolidStart Cloud Run 
    gcloud run services delete solid-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

13. โหมดถ่ายภาพดวงดาว

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน Astro 
    npx create-astro astro-app
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd astro-app
  4. เพิ่มอะแดปเตอร์ Astro สำหรับ Node.js 
    npx astro add node
  5. อัปเดตสคริปต์ start ใน package.json
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://astro-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอแอปพลิเคชัน Astro

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ Astro ในเครื่อง 
    cd ..
rm -rf astro-app
  2. ลบบริการ Astro Cloud Run 
    gcloud run services delete astro-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

14. Qwik

  1. ไปที่ไดเรกทอรีที่คุณต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน Qwik 
    npx create-qwik
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น
  3. ไปที่โฟลเดอร์โปรเจ็กต์ใหม่ที่คุณสร้างขึ้น 
    cd qwik-app
  4. เพิ่มอะแดปเตอร์ Qwik สำหรับ Cloud Run 
    npm run qwik add cloud-run
  5. ทำให้แอปพลิเคชันใช้งานได้ 
    gcloud run deploy --allow-unauthenticated
    เมื่อระบบแจ้งให้ระบุค่ากำหนด ให้กดปุ่ม Enter เพื่อยอมรับค่าเริ่มต้น

ไปที่แอปพลิเคชัน

การติดตั้งใช้งานจะใช้เวลาสักครู่ เมื่อดำเนินการเสร็จแล้ว Cloud Run จะแสดง URL เช่น

https://qwik-app-xxxxxxxxxx-uc.a.run.app

เปิด URL ที่ระบุในแท็บใหม่ของเบราว์เซอร์เพื่อดูแอปพลิเคชันที่ติดตั้งใช้งาน

ภาพหน้าจอแอปพลิเคชัน Qwik

การล้างข้อมูลที่ไม่บังคับ

  1. ลบโปรเจ็กต์ Qwik ในเครื่อง 
    cd ..
rm -rf qwik-app
  2. ลบบริการ Qwik Cloud Run 
    gcloud run services delete qwik-app
    เมื่อระบบถามว่าคุณต้องการดำเนินการต่อไหม ให้กดปุ่ม Enter เพื่อดำเนินการต่อ

15. ยินดีด้วย

ขอแสดงความยินดีที่ทำ Codelab นี้เสร็จสมบูรณ์

เราขอแนะนำให้อ่านเอกสารเกี่ยวกับเริ่มต้นอย่างรวดเร็ว: การติดตั้งใช้งานใน Cloud Run จากที่เก็บ Git เพื่อให้บิลด์ในอนาคตสามารถติดตั้งใช้งานได้โดยอัตโนมัติทุกครั้งที่มีการพุชไปยังระบบควบคุมเวอร์ชัน

สิ่งที่เราพูดถึง

  • วิธีทำให้เฟรมเวิร์ก JavaScript ที่ Cloud Build รองรับใช้งานได้โดยอัตโนมัติ
    • SSR ของ Angular - อิงตาม Angular
    • Nuxt.js - อิงตาม Vue.js
    • Next.js - อิงตาม React
    • Remix - อิงตาม React
    • SvelteKit - อิงตาม Svelte
    • SolidStart - อิงตาม Solid.js
  • วิธีติดตั้งใช้งานเฟรมเวิร์ก JavaScript ที่ต้องมีการกำหนดค่า
    • โหมดถ่ายภาพดวงดาว
    • Qwik

16. ล้างข้อมูล

หากต้องการหลีกเลี่ยงการเรียกเก็บเงินโดยไม่ตั้งใจ (เช่น หากบริการ Cloud Run นี้ถูกเรียกใช้โดยไม่ตั้งใจมากกว่าการจัดสรรการเรียกใช้ Cloud Run รายเดือนในระดับฟรี) คุณสามารถลบงาน Cloud Run หรือลบโปรเจ็กต์ที่สร้างในขั้นตอนที่ 1 ได้

หากต้องการลบบริการ Cloud Run ให้ไปที่ Cloud Console ของ Cloud Run ที่ https://console.cloud.google.com/run/ แล้วลบบริการ Cloud Run

หากเลือกที่จะลบทั้งโปรเจ็กต์ ให้ไปที่ https://console.cloud.google.com/cloud-resource-manager เลือกโปรเจ็กต์ที่สร้างในขั้นตอนที่ 2 แล้วเลือก "ลบ" หากลบโปรเจ็กต์ คุณจะต้องเปลี่ยนโปรเจ็กต์ใน Cloud SDK คุณดูรายการโปรเจ็กต์ทั้งหมดที่พร้อมใช้งานได้โดยเรียกใช้ gcloud projects list