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

1. บทนำ

ภาพรวม

ใน Codelab นี้ ให้นำแอปพลิเคชัน JavaScript 8 รายการไปใช้งานใน Cloud Run ดังนี้

  • SSR ของ Angular - อิงตาม Angular
  • Nuxt.js - อิงตาม Vue.js
  • Next.js - อิงตาม React
  • รีมิกซ์ - อิงตามรีแอ็กชัน
  • SvelteKit - อิงจาก Svelte
  • SolidStart - จาก Solid.js
  • Astro
  • 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
  2. เรียกใช้คำสั่งต่อไปนี้ใน Cloud Shell เพื่อตั้งค่าโปรเจ็กต์ gcloud
    gcloud config set project <PROJECT_ID>
    แทนที่ &lt;PROJECT_ID&gt; ด้วยรหัสโปรเจ็กต์ ตัวอย่าง
    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

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

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

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

gcloud config set run/region us-central1

5. กำหนดค่า Git

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

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. Angular SSR (มุมแหลม)

  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. ลบบริการ Cloud Run ของ Nuxt.js 
    gcloud run services delete nuxt-app
    เมื่อมีข้อความแจ้งหากต้องการดำเนินการต่อ ให้กดแป้น Enter เพื่อดำเนินการต่อ

8. Next.js (รีแอ็กชัน)

  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. ลบบริการ Cloud Run ของ Next.js 
    gcloud run services delete next-app
    เมื่อมีข้อความแจ้งหากต้องการดำเนินการต่อ ให้กดแป้น Enter เพื่อดำเนินการต่อ

9. รีมิกซ์ (รีแอค)

  1. ไปที่ไดเรกทอรีที่ต้องการสร้างแอปพลิเคชัน Angular 
    cd ~
  2. สร้างแอปพลิเคชัน Remix 
    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. ลบบริการ Cloud Run ของ Remix 
    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 (สเวลเต)

  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 (ทึบ)

  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. ลบบริการ Cloud Run ของ SolidStart 
    gcloud run services delete solid-app
    เมื่อมีข้อความแจ้งหากต้องการดำเนินการต่อ ให้กดแป้น Enter เพื่อดำเนินการต่อ

13. Astro

  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. ลบบริการ Cloud Run ของ Qwik 
    gcloud run services delete qwik-app
    เมื่อมีข้อความแจ้งหากต้องการดำเนินการต่อ ให้กดแป้น Enter เพื่อดำเนินการต่อ

15. ยินดีด้วย

ขอแสดงความยินดีที่เรียน Codelab จนจบ

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

สรุปประเด็นที่ได้พูดถึง

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

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

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

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

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