การพัฒนา InnerLoop โดยใช้เวิร์กสเตชันระบบคลาวด์กับ NodeJS

1. ภาพรวม

แล็บนี้จะสาธิตฟีเจอร์และความสามารถที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพเวิร์กโฟลว์การพัฒนาสำหรับวิศวกรซอฟต์แวร์ที่ได้รับมอบหมายให้พัฒนาแอปพลิเคชัน NodeJS ในสภาพแวดล้อมที่มีคอนเทนเนอร์ การพัฒนาคอนเทนเนอร์โดยทั่วไปกำหนดให้ผู้ใช้ต้องเข้าใจรายละเอียดของคอนเทนเนอร์และกระบวนการบิลด์คอนเทนเนอร์ นอกจากนี้ โดยปกติแล้ว นักพัฒนาแอปจะต้องหยุดโฟลว์การทำงาน ย้ายออกจาก IDE เพื่อทดสอบและแก้ไขข้อบกพร่องของแอปพลิเคชันในสภาพแวดล้อมระยะไกล เครื่องมือและเทคโนโลยีที่กล่าวถึงในบทแนะนำนี้ช่วยให้นักพัฒนาแอปทำงานกับแอปพลิเคชันที่ใช้คอนเทนเนอร์ได้อย่างมีประสิทธิภาพโดยไม่ต้องออกจาก IDE

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

ในแล็บนี้ คุณจะได้เรียนรู้วิธีการพัฒนาด้วยคอนเทนเนอร์ใน Google Cloud ซึ่งรวมถึง

  • การสร้างแอปพลิเคชัน Nodejs เริ่มต้น
  • การกำหนดค่าแอปพลิเคชัน Nodejs สำหรับการพัฒนาคอนเทนเนอร์
  • การเขียนโค้ดบริการ REST แบบ CRUD อย่างง่าย
  • การติดตั้งใช้งานใน GKE
  • การแก้ไขข้อบกพร่องของสถานะข้อผิดพลาด
  • การใช้เบรกพอยท์ / บันทึก
  • การเปลี่ยนแปลงการฮอตดีพลอยกลับไปยัง GKE
  • ไม่บังคับ: การผสานรวม CloudSQL เพื่อการคงอยู่ของข้อมูลส่วนหลัง

58a4cdd3ed7a123a.png

2. การตั้งค่าและข้อกำหนด

การตั้งค่าสภาพแวดล้อมแบบเรียนรู้ด้วยตนเอง

  1. ลงชื่อเข้าใช้ คอนโซล Google Cloud แล้วสร้างโปรเจ็กต์ใหม่หรือใช้โปรเจ็กต์ที่มีอยู่ซ้ำ หากยังไม่มีบัญชี Gmail หรือ Google Workspace คุณต้องสร้างบัญชี

b35bf95b8bf3d5d8.pnga99b7ace416376c4.pngbd84a6d3004737c5.png

  • ชื่อโปรเจ็กต์คือชื่อที่แสดงสำหรับผู้เข้าร่วมโปรเจ็กต์นี้ ซึ่งเป็นสตริงอักขระที่ Google APIs ไม่ได้ใช้ โดยคุณจะอัปเดตได้ทุกเมื่อ
  • รหัสโปรเจ็กต์จะไม่ซ้ำกันในโปรเจ็กต์ Google Cloud ทั้งหมดและเปลี่ยนแปลงไม่ได้ (เปลี่ยนไม่ได้หลังจากตั้งค่าแล้ว) Cloud Console จะสร้างสตริงที่ไม่ซ้ำกันโดยอัตโนมัติ ซึ่งโดยปกติแล้วคุณไม่จำเป็นต้องสนใจว่าสตริงนั้นคืออะไร ใน Codelab ส่วนใหญ่ คุณจะต้องอ้างอิงรหัสโปรเจ็กต์ (โดยปกติจะระบุเป็น PROJECT_ID) หากไม่ชอบรหัสที่สร้างขึ้น คุณก็สร้างรหัสแบบสุ่มอีกรหัสหนึ่งได้ หรือคุณจะลองใช้ชื่อของคุณเองเพื่อดูว่ามีชื่อนั้นหรือไม่ก็ได้ คุณจะเปลี่ยนแปลงรหัสนี้หลังจากขั้นตอนนี้ไม่ได้ และรหัสจะยังคงอยู่ตลอดระยะเวลาของโปรเจ็กต์
  • โปรดทราบว่ายังมีค่าที่ 3 ซึ่งคือหมายเลขโปรเจ็กต์ที่ API บางตัวใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าทั้ง 3 นี้ได้ในเอกสารประกอบ
  1. จากนั้นคุณจะต้องเปิดใช้การเรียกเก็บเงินใน Cloud Console เพื่อใช้ทรัพยากร/API ของ Cloud การทำตาม Codelab นี้ไม่ควรมีค่าใช้จ่ายมากนัก หรืออาจไม่มีเลย หากต้องการปิดทรัพยากรเพื่อไม่ให้มีการเรียกเก็บเงินนอกเหนือจากบทแนะนำนี้ คุณสามารถลบทรัพยากรที่สร้างขึ้นหรือลบทั้งโปรเจ็กต์ได้ ผู้ใช้ Google Cloud รายใหม่มีสิทธิ์เข้าร่วมโปรแกรมช่วงทดลองใช้ฟรีมูลค่า$300 USD

เริ่มโปรแกรมแก้ไข Cloud Shell

แล็บนี้ออกแบบและทดสอบเพื่อใช้กับ Google Cloud Shell Editor วิธีเข้าถึงเอดิเตอร์

  1. เข้าถึงโปรเจ็กต์ Google ที่ https://console.cloud.google.com
  2. คลิกไอคอนโปรแกรมแก้ไข Cloud Shell ที่มุมขวาบน

8560cc8d45e8c112.png

  1. แผงใหม่จะเปิดขึ้นที่ด้านล่างของหน้าต่าง
  2. คลิกปุ่ม "เปิดเครื่องมือแก้ไข"

9e504cb98a6a8005.png

  1. เครื่องมือแก้ไขจะเปิดขึ้นพร้อมกับ Explorer ทางด้านขวาและเครื่องมือแก้ไขในพื้นที่ส่วนกลาง
  2. นอกจากนี้ ควรมีแผงเทอร์มินัลที่ด้านล่างของหน้าจอด้วย
  3. หากเทอร์มินัลไม่ได้เปิดอยู่ ให้ใช้ชุดค่าผสมของปุ่ม `ctrl+`` เพื่อเปิดหน้าต่างเทอร์มินัลใหม่

ตั้งค่า gcloud

ใน Cloud Shell ให้ตั้งค่ารหัสโปรเจ็กต์และภูมิภาคที่คุณต้องการทำให้แอปพลิเคชันใช้งานได้ บันทึกเป็นตัวแปร PROJECT_ID และ REGION

export PROJECT_ID=$(gcloud config get-value project)
export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')

จัดสรรโครงสร้างพื้นฐานที่ใช้ในแล็บนี้

ในแล็บนี้ คุณจะได้ติดตั้งใช้งานโค้ดใน GKE และเข้าถึงข้อมูลที่จัดเก็บไว้ในฐานข้อมูล Cloud SQL สคริปต์การตั้งค่าด้านล่างจะเตรียมโครงสร้างพื้นฐานนี้ให้คุณ

  1. ดาวน์โหลดสคริปต์การตั้งค่าและทำให้สคริปต์ใช้งานได้
wget https://raw.githubusercontent.com/GoogleCloudPlatform/container-developer-workshop/main/labs/nodejs/setup_with_cw.sh
chmod +x setup_with_cw.sh
  1. เปิดไฟล์ setup_with_cw.sh แล้วแก้ไขค่าของรหัสผ่านที่ตั้งค่าเป็น CHANGEME ในปัจจุบัน
  2. เรียกใช้สคริปต์การตั้งค่าเพื่อสร้างคลัสเตอร์ GKE และฐานข้อมูล Cloud SQL ที่คุณจะใช้ใน Lab นี้
./setup_with_cw.sh &

คลัสเตอร์ Cloud Workstations

  1. เปิด Cloud Workstations ใน Cloud Console รอให้คลัสเตอร์อยู่ในสถานะ READY

305e1a3d63ac7ff6.png

สร้างการกำหนดค่าเวิร์กสเตชัน

  1. หากเซสชัน Cloud Shell ถูกตัดการเชื่อมต่อ ให้คลิก "เชื่อมต่ออีกครั้ง" แล้วเรียกใช้คำสั่ง gcloud CLI เพื่อตั้งค่ารหัสโปรเจ็กต์ แทนที่รหัสโปรเจ็กต์ตัวอย่างด้านล่างด้วยรหัสโปรเจ็กต์ Qwiklabs ของคุณก่อนเรียกใช้คำสั่ง
gcloud config set project qwiklabs-gcp-project-id
  1. ดาวน์โหลดและเรียกใช้สคริปต์ด้านล่างในเทอร์มินัลเพื่อสร้างการกำหนดค่า Cloud Workstations
wget https://raw.githubusercontent.com/GoogleCloudPlatform/container-developer-workshop/main/labs/nodejs/workstation_config_setup.sh
chmod +x workstation_config_setup.sh
./workstation_config_setup.sh
  1. ตรวจสอบผลลัพธ์ในส่วนการกำหนดค่า โดยจะใช้เวลา 2 นาทีในการเปลี่ยนไปเป็นสถานะพร้อม

c8f0b8662fdb827e.png

  1. เปิด Cloud Workstations ในคอนโซลแล้วสร้างอินสแตนซ์ใหม่

a53adeeac81a78c8.png

  1. เปลี่ยนชื่อเป็น my-workstation แล้วเลือกการกำหนดค่าที่มีอยู่: codeoss-js

675d83f30c1319df.png

  1. ตรวจสอบผลลัพธ์ในส่วนเวิร์กสเตชัน

bf67586e6695852.png

เปิดใช้เวิร์กสเตชัน

  1. เริ่มและเปิดตัวเวิร์กสเตชัน ระบบจะใช้เวลา 2-3 นาทีในการเริ่มเวิร์กสเตชัน

a9ad54f4b4b668e9.png

  1. อนุญาตคุกกี้ของบุคคลที่สามโดยคลิกไอคอนในแถบที่อยู่ 1b8923e2943f9bc4.png

fcf9405b6957b7d7.png

  1. คลิก "เว็บไซต์ไม่ทำงานใช่ไหม"

36a84c0e2e3b85b.png

  1. คลิก "อนุญาตคุกกี้"

2259694328628fba.png

  1. เมื่อเปิดตัวเวิร์กสเตชันแล้ว คุณจะเห็น IDE ของ Code OSS ปรากฏขึ้น คลิก "ทำเครื่องหมายว่าเสร็จแล้ว" ในหน้าเริ่มต้นใช้งานใน IDE ของเวิร์กสเตชัน

94874fba9b74cc22.png

3. การสร้างแอปพลิเคชันเริ่มต้น Nodejs ใหม่

ในส่วนนี้ คุณจะได้สร้างแอปพลิเคชัน Nodejs ใหม่

  1. เปิดเทอร์มินัลใหม่

c31d48f2e4938c38.png

  1. ใน Cloud Shell ให้สร้างไดเรกทอรีใหม่ชื่อ mynodejsapp
mkdir mynodejsapp

คลิกปุ่มอนุญาตหากเห็นข้อความนี้ เพื่อให้คุณคัดลอกและวางลงในเวิร์กสเตชันได้

58149777e5cc350a.png

  1. เปลี่ยนไปใช้ไดเรกทอรีนี้แล้วเปิดเป็นพื้นที่ทำงาน ซึ่งจะโหลดเอดิเตอร์ซ้ำโดยสร้างการกำหนดค่าพื้นที่ทำงานในโฟลเดอร์ที่สร้างขึ้นใหม่
cd mynodejsapp && code-oss-cloud-workstations -r --folder-uri="$PWD"
  1. เปิดเทอร์มินัลใหม่ ติดตั้ง Node และ NPM โดยใช้ NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
        
        # This loads nvm bash_completion
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  

nvm install stable

nvm alias default stable

4. สร้างแอปพลิเคชันเงื่อนไขเริ่มต้นใหม่

  1. เริ่มต้นแอปพลิเคชัน

สร้างไฟล์ package.json โดยเรียกใช้คำสั่งต่อไปนี้

npm init
    Choose the `entry point: (index.js) src/index.js` and leave default values for the rest of the parameters. This will create the `package.json` file with following contents
{
  "name": "mynodejsapp",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
  1. เพิ่มจุดแรกเข้า

เปิดและแก้ไขไฟล์ package.json ใน IDE เพื่อรวมคำสั่งเริ่มต้นในสคริปต์ "start": "node src/index.js", หลังจากทำการเปลี่ยนแปลงแล้ว สคริปต์ควรมีลักษณะเหมือนข้อมูลโค้ดด้านล่าง

"scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  1. เพิ่มทรัพยากร Dependency ของ Express

โค้ดที่เราจะเพิ่มยังใช้ express ด้วย ดังนั้นเรามาเพิ่มทรัพยากร Dependency นั้นลงในไฟล์ package.json นี้กัน ดังนั้นหลังจากทำการเปลี่ยนแปลงทั้งหมดแล้ว ไฟล์ package.json ควรมีลักษณะดังที่แสดงด้านล่าง

{
 "name": "mynodejsapp",
 "version": "1.0.0",
 "description": "",
 "main": "src/index.js",
 "scripts": {
   "start": "node src/index.js",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "express": "^4.17.3"
 }
}
  1. สร้างไฟล์ index.js

สร้างไดเรกทอรีต้นทางชื่อ src โดยเลือกโฟลเดอร์ใหม่ในมุมมอง Explorer

eb507d48f283ce46.png

สร้างไฟล์ src/index.js

3e3e6e6062e501fc.png

โดยใช้โค้ดต่อไปนี้

const express = require('express');
const app = express();
const PORT = 8080;

app.get('/', (req, res) => {
    var message="Greetings from Node";
    res.send({ message: message });
  });

app.listen(PORT, () => {
  console.log(`Server running at: http://localhost:${PORT}/`);

});

โปรดทราบว่าตั้งค่า PORT เป็น 8080

สร้างไฟล์ Manifest

Skaffold มีเครื่องมือแบบผสานรวมที่จะช่วยลดความซับซ้อนในการพัฒนาคอนเทนเนอร์ ในขั้นตอนนี้ คุณจะเริ่มต้น Skaffold ซึ่งจะสร้างไฟล์ YAML ของ Kubernetes ฐานโดยอัตโนมัติ เรียกใช้คำสั่งด้านล่างเพื่อเริ่มกระบวนการ

เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

skaffold init --generate-manifests

เมื่อมีข้อความแจ้ง ให้ทำดังนี้

  • ป้อน 8080 สำหรับพอร์ต
  • ป้อน y เพื่อบันทึกการกำหนดค่า

ระบบจะเพิ่มไฟล์ 2 ไฟล์ลงในพื้นที่ทำงาน ได้แก่ skaffold.yaml และ deployment.yaml

อัปเดตชื่อแอป

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

  1. เปลี่ยนรายการในการกำหนดค่า Skaffold
  • เปิด skaffold.yaml
  • เลือกชื่อรูปภาพที่ตั้งเป็น package-json-image ในปัจจุบัน
  • คลิกขวาแล้วเลือก "เปลี่ยนทุกรายการ"
  • พิมพ์ชื่อใหม่เป็นภาษาmynodejsapp
  1. เปลี่ยนรายการในการกำหนดค่า Kubernetes
  • เปิดไฟล์ deployment.yaml
  • เลือกชื่อรูปภาพที่ตั้งเป็น package-json-image ในปัจจุบัน
  • คลิกขวาแล้วเลือก "เปลี่ยนทุกรายการ"
  • พิมพ์ชื่อใหม่เป็นภาษาmynodejsapp

โปรดทราบว่าในskaffold.yaml ไฟล์ ส่วน build จะใช้ buildpacks เพื่อจัดคอนเทนเนอร์แอปพลิเคชัน โค้ดนี้ไม่มี Dockerfile และนักพัฒนาแอปไม่จำเป็นต้องมีความรู้เกี่ยวกับ Docker เพื่อทำแอปพลิเคชันนี้ให้เป็นคอนเทนเนอร์

นอกจากนี้ การกำหนดค่า skaffold นี้ยังเปิดใช้การซิงค์ด่วนโดยอัตโนมัติระหว่างเอดิเตอร์กับคอนเทนเนอร์ที่ทำงานอยู่ด้วย ไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติมเพื่อเปิดใช้การซิงค์ด่วน

5. การเดินผ่านกระบวนการพัฒนา

ในส่วนนี้ คุณจะได้ทำตามขั้นตอน 2-3 ขั้นตอนโดยใช้ปลั๊กอิน Cloud Code เพื่อเรียนรู้กระบวนการพื้นฐาน รวมถึงตรวจสอบการกำหนดค่าและการตั้งค่าของแอปพลิเคชันเริ่มต้น

Cloud Code ผสานรวมกับ Skaffold เพื่อเพิ่มประสิทธิภาพกระบวนการพัฒนา เมื่อคุณทําการติดตั้งใช้งานใน GKE ในขั้นตอนต่อไปนี้ Cloud Code และ Skaffold จะสร้างอิมเมจคอนเทนเนอร์ พุชไปยัง Container Registry แล้วจึงทําการติดตั้งใช้งานแอปพลิเคชันใน GKE โดยอัตโนมัติ ซึ่งจะเกิดขึ้นเบื้องหลังโดยซ่อนรายละเอียดจากขั้นตอนการทำงานของนักพัฒนาแอป นอกจากนี้ Cloud Code ยังช่วยเพิ่มประสิทธิภาพกระบวนการพัฒนาด้วยการมอบความสามารถในการแก้ไขข้อบกพร่องและการซิงค์ด่วนแบบเดิมให้กับการพัฒนาที่อิงตามคอนเทนเนอร์

ลงชื่อเข้าใช้ Google Cloud

  1. คลิกไอคอน Cloud Code แล้วเลือก "ลงชื่อเข้าใช้ Google Cloud"

1769afd39be372ff.png

  1. คลิก "ไปที่การลงชื่อเข้าใช้"

923bb1c8f63160f9.png

  1. ตรวจสอบเอาต์พุตในเทอร์มินัลและเปิดลิงก์

517fdd579c34aa21.png

  1. เข้าสู่ระบบด้วยข้อมูลเข้าสู่ระบบของนักเรียน Qwiklabs

db99b345f7a8e72c.png

  1. เลือก "อนุญาต"

a5376553c430ac84.png

  1. คัดลอกรหัสยืนยันแล้วกลับไปที่แท็บเวิร์กสเตชัน

6719421277b92eac.png

  1. วางรหัสยืนยันแล้วกด Enter

e9847cfe3fa8a2ce.png

เพิ่มคลัสเตอร์ Kubernetes

  1. เพิ่มคลัสเตอร์

62a3b97bdbb427e5.png

  1. เลือก Google Kubernetes Engine

9577de423568bbaa.png

  1. เลือกโปรเจ็กต์

c5202fcbeebcd41c.png

  1. เลือก "mycluster" ที่สร้างขึ้นในการตั้งค่าเริ่มต้น

33863e94d1c5045f.png

  1. ตอนนี้คลัสเตอร์จะปรากฏในรายการคลัสเตอร์ Kubernetes ในส่วน Cloud Code ไปยังส่วนต่างๆ และสำรวจคลัสเตอร์จากที่นี่

7e5f50662d4eea3c.png

ตั้งค่ารหัสโปรเจ็กต์ปัจจุบันโดยใช้ gcloud CLI

  1. คัดลอกรหัสโปรเจ็กต์สำหรับ Lab นี้จากหน้า Qwiklabs

fcff2d10007ec5bc.png

  1. จากเทอร์มินัล ให้เรียกใช้คำสั่ง gcloud CLI เพื่อตั้งค่ารหัสโปรเจ็กต์ แทนที่รหัสโปรเจ็กต์ตัวอย่างก่อนเรียกใช้คำสั่ง แทนที่รหัสโปรเจ็กต์ก่อนเรียกใช้คำสั่งด้านล่าง
gcloud config set project qwiklabs-gcp-project-id

ทําให้ใช้งานได้ใน Kubernetes

  1. เลือก Cloud Code  ในบานหน้าต่างที่ด้านล่างของ Cloud Shell Editor

c5dd5a749136407b.png

  1. ในแผงที่ปรากฏที่ด้านบนใต้ DEVELOPMENT SESSIONS ให้เลือกเรียกใช้ใน Kubernetes หากได้รับข้อความแจ้ง ให้เลือก "ใช่" เพื่อใช้บริบท Kubernetes ปัจจุบัน

7da53b9480e8eb0d.png

  1. เมื่อเรียกใช้คำสั่งเป็นครั้งแรก ข้อความแจ้งจะปรากฏที่ด้านบนของหน้าจอเพื่อถามว่าคุณต้องการใช้บริบท Kubernetes ปัจจุบันหรือไม่ ให้เลือก "ใช่" เพื่อยอมรับและใช้บริบทปัจจุบัน

a6e58a7f0d117391.png

  1. จากนั้นระบบจะแสดงข้อความแจ้งเพื่อถามว่าควรใช้รีจิสทรีคอนเทนเนอร์ใด กด Enter เพื่อยอมรับค่าเริ่มต้นที่ระบุ

13236a26c8dbe84f.png

  1. เลือกแท็บเอาต์พุตในบานหน้าต่างด้านล่าง แล้วเลือก Kubernetes: เรียกใช้/แก้ไขข้อบกพร่อง ในเมนูแบบเลื่อนลงเพื่อดูความคืบหน้าและการแจ้งเตือน

606ff9cdebc03dff.png

  1. เลือก "Kubernetes: เรียกใช้/แก้ไขข้อบกพร่อง - โดยละเอียด" ในเมนูแบบเลื่อนลงของช่องทางทางด้านขวาเพื่อดูรายละเอียดเพิ่มเติมและบันทึกที่สตรีมแบบสดจากคอนเทนเนอร์

ab45d2574f4f2478.png

  1. กลับไปที่มุมมองแบบง่ายโดยเลือก "Kubernetes: เรียกใช้/แก้ไขข้อบกพร่อง" จากเมนูแบบเลื่อนลง
  2. เมื่อบิลด์และทดสอบเสร็จแล้ว แท็บเอาต์พุตจะแสดงข้อความ Resource deployment/mynodejsapp status completed successfully และ URL ที่ระบุคือ "Forwarded URL from service demo-app: http://localhost:8080"
  3. ในเทอร์มินัล Cloud Code ให้วางเมาส์เหนือ URL ในเอาต์พุต (http://localhost:8080) จากนั้นเลือก "ติดตามลิงก์" ในเคล็ดลับเครื่องมือที่ปรากฏขึ้น

คำตอบจะเป็นดังนี้

{"message":"Greetings from Node"}

Hot Reload

  1. นำทางไปยัง src/index.js แก้ไขรหัสข้อความทักทายถึง 'Hello from Node'

สังเกตได้ทันทีว่าในหน้าต่าง Output มุมมอง Kubernetes: Run/Debug ผู้ดูจะซิงค์ไฟล์ที่อัปเดตกับคอนเทนเนอร์ใน Kubernetes

Update initiated
File sync started for 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
File sync succeeded for 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Update succeeded
  1. หากเปลี่ยนไปใช้Kubernetes: Run/Debug - Detailedมุมมอง คุณจะเห็นว่าระบบจดจำการเปลี่ยนแปลงไฟล์และรีสตาร์ทโหนด
files modified: [src/index.js]
Copying files:map[src/index.js:[/workspace/src/index.js]]togcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Syncing 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Watching for changes...
[mynodejsapp]
[mynodejsapp]> mynodejsapp@1.0.0 start /workspace
[mynodejsapp]> node src/index.js
[mynodejsapp]
[mynodejsapp]Server running at: http://localhost:8080/
  1. โปรดรีเฟรชเบราว์เซอร์เพื่อดูผลลัพธ์ที่อัปเดต

การแก้ไขข้อบกพร่อง

  1. ไปที่มุมมองการแก้ไขข้อบกพร่องและหยุดเธรดปัจจุบัน 647213126d7a4c7b.png
  2. คลิก Cloud Code ในเมนูด้านล่าง แล้วเลือก Debug on Kubernetes เพื่อเรียกใช้แอปพลิเคชันในโหมด debug

dbd0c6cfd9e9d0e9.png

  • ในKubernetes Run/Debug - DetailedมุมมองของOutputหน้าต่าง ให้สังเกตว่า Skaffold จะนำแอปพลิเคชันนี้ไปใช้งานในโหมดแก้ไขข้อบกพร่อง
  • การสร้างและติดตั้งใช้งานแอปพลิเคชันจะใช้เวลา 2-3 นาที คุณจะเห็นว่าดีบักเกอร์แนบมาในครั้งนี้
Port forwarding pod/mynodejsapp-6bbcf847cd-vqr6v in namespace default, remote port 9229 -> http://127.0.0.1:9229
[mynodejsapp]Debugger attached.
  1. แถบสถานะด้านล่างจะเปลี่ยนสีจากสีน้ำเงินเป็นสีส้ม ซึ่งบ่งบอกว่าอยู่ในโหมดแก้ไขข้อบกพร่อง

d1224f12cd659995.png

  1. ในมุมมอง Kubernetes Run/Debug ให้สังเกตว่ามีการเริ่มคอนเทนเนอร์ที่แก้ไขข้อบกพร่องได้
**************URLs*****************
Forwarded URL from service mynodejsapp-service: http://localhost:8080
Debuggable container started pod/mynodejsapp-deployment-6bc7598798-xl9kj:mynodejsapp (default)
Update succeeded
***********************************

ใช้เบรกพอยท์

  1. เปิด src/index.js
  2. ค้นหาสถานะที่ระบุว่า var message="Hello from Node";
  3. เพิ่มเบรกพอยต์ในบรรทัดนั้นโดยคลิกพื้นที่ว่างทางด้านซ้ายของหมายเลขบรรทัด ตัวบ่งชี้สีแดงจะแสดงขึ้นเพื่อระบุว่ามีการตั้งค่าเบรกพอยต์
  4. โหลดเบราว์เซอร์ซ้ำและสังเกตว่าดีบักเกอร์จะหยุดกระบวนการที่เบรกพอยต์และช่วยให้คุณตรวจสอบตัวแปรและสถานะของแอปพลิเคชันที่ทำงานจากระยะไกลใน GKE ได้
  5. คลิกส่วนตัวแปรลงไปจนกว่าจะพบตัวแปร "message"
  6. เรียกใช้บรรทัดโดยกด Step over 7cfdee4fd6ef5c3a.png
  7. สังเกตการเปลี่ยนแปลงค่าปัจจุบันของตัวแปร "message" เป็น "Hello from Node"
  8. ดับเบิลคลิกชื่อตัวแปร "target" และในป๊อปอัป ให้เปลี่ยนค่าเป็นค่าอื่น เช่น "Hi from Node"
  9. คลิกปุ่ม "ดำเนินการต่อ" ในแผงควบคุมการแก้ไขข้อบกพร่อง
  10. ตรวจสอบการตอบกลับในเบราว์เซอร์ ซึ่งตอนนี้จะแสดงค่าที่อัปเดตที่คุณเพิ่งป้อน
  11. หยุดโหมด "แก้ไขข้อบกพร่อง" โดยกดปุ่มหยุด 647213126d7a4c7b.png และนำจุดพักออกโดยคลิกจุดพักอีกครั้ง

6. การพัฒนาบริการ REST แบบ CRUD อย่างง่าย

ตอนนี้แอปพลิเคชันของคุณได้รับการกำหนดค่าอย่างสมบูรณ์สำหรับการพัฒนาแบบคอนเทนเนอร์แล้ว และคุณได้ทำตามเวิร์กโฟลว์การพัฒนาพื้นฐานด้วย Cloud Code แล้ว ในส่วนต่อไปนี้ คุณจะได้ฝึกฝนสิ่งที่ได้เรียนรู้โดยการเพิ่มปลายทางบริการ REST ที่เชื่อมต่อกับฐานข้อมูลที่มีการจัดการใน Google Cloud

กำหนดค่าการอ้างอิง

โค้ดของแอปพลิเคชันใช้ฐานข้อมูลเพื่อจัดเก็บข้อมูลบริการ REST ตรวจสอบว่าทรัพยากร Dependency พร้อมใช้งานโดยเพิ่มรายการต่อไปนี้ในไฟล์ package.json

  1. เพิ่ม Dependency อีก 2 รายการ pg และ sequelize ลงในไฟล์ package.json เพื่อสร้างแอปพลิเคชัน CRUD ของ Postgres การโพสต์การเปลี่ยนแปลงในส่วนการขึ้นต่อกันจะมีลักษณะดังนี้
    "dependencies": {
    "express": "^4.17.3",
    "pg": "^8.8.0",
    "sequelize": "^6.25.7"
  }

เขียนโค้ดบริการ REST

  1. เพิ่มโค้ดของแอปพลิเคชัน CRUD ลงในแอปพลิเคชันนี้
wget -O app.zip https://github.com/GoogleCloudPlatform/container-developer-workshop/raw/main/labs/nodejs/app.zip

unzip app.zip

รหัสนี้มี

  • โฟลเดอร์ models ที่มีโมเดลเอนทิตีสำหรับ item
  • โฟลเดอร์ controllers ที่มีโค้ดที่ดำเนินการ CRUD
  • โฟลเดอร์ routes ที่กำหนดเส้นทางรูปแบบ URL ที่เฉพาะเจาะจงไปยังการเรียกที่แตกต่างกัน
  • โฟลเดอร์ config ที่มีรายละเอียดการเชื่อมต่อฐานข้อมูล
  1. โปรดทราบว่าการกำหนดค่าฐานข้อมูลในไฟล์ db.config.js หมายถึงตัวแปรสภาพแวดล้อมที่ต้องระบุเพื่อเชื่อมต่อกับฐานข้อมูล นอกจากนี้ คุณยังต้องแยกวิเคราะห์คำขอขาเข้าเพื่อการเข้ารหัส URL ด้วย
  2. เพิ่มข้อมูลโค้ดต่อไปนี้ใน src/index.js เพื่อให้เชื่อมต่อกับโค้ด CRUD จากไฟล์ JavaScript หลักได้ทันทีก่อนส่วนสุดท้ายที่เริ่มต้นด้วย app.listen(PORT, () => {
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(
 bodyParser.urlencoded({
   extended: true,
 })
)
const db = require("../app/models");
db.sequelize.sync();
require("../app/routes/item.routes")(app);
  1. แก้ไขการติดตั้งใช้งานในไฟล์ deployment.yaml เพื่อเพิ่มตัวแปรสภาพแวดล้อมเพื่อระบุข้อมูลการเชื่อมต่อฐานข้อมูล

อัปเดตรายการข้อกำหนดที่ส่วนท้ายของไฟล์ให้ตรงกับคำจำกัดความต่อไปนี้

    spec:
      containers:
      - name: mynodejsapp
        image: mynodejsapp
        env:
        - name: DB_HOST
          value: ${DB_INSTANCE_IP}        
        - name: DB_PORT
          value: "5432"  
        - name: DB_USER
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: username
        - name: DB_PASS
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: password
        - name: DB_NAME
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: database
  1. แทนที่ค่า DB_HOST ด้วยที่อยู่ของฐานข้อมูล
export DB_INSTANCE_IP=$(gcloud sql instances describe mytest-instance \
    --format=json | jq \
    --raw-output ".ipAddresses[].ipAddress")

envsubst < deployment.yaml > deployment.new && mv deployment.new deployment.yaml

ทำให้แอปพลิเคชันใช้งานได้และตรวจสอบ

  1. ในแผงที่ด้านล่างของ Cloud Shell Editor ให้เลือก Cloud Code จากนั้นเลือก Debug on Kubernetes ที่ด้านบนของหน้าจอ
  2. เมื่อการสร้างและการทดสอบเสร็จสมบูรณ์ แท็บเอาต์พุตจะแสดงข้อความ Resource deployment/mynodejsapp status completed successfully และ URL ที่ระบุคือ "Forwarded URL from service mynodejsapp: http://localhost:8080"
  3. เพิ่มรายการ 2-3 รายการ

เรียกใช้คำสั่งด้านล่างจากเทอร์มินัล Cloud Shell

URL=localhost:8080
curl -X POST $URL/items -d '{"itemName":"Body Spray", "itemPrice":3.2}' -H "Content-Type: application/json"
curl -X POST $URL/items -d '{"itemName":"Nail Cutter", "itemPrice":2.5}' -H "Content-Type: application/json"
  1. ทดสอบ GET โดยเรียกใช้ $URL/items ในเบราว์เซอร์ นอกจากนี้ คุณยังเรียกใช้ curl จากบรรทัดคำสั่งได้ด้วย
curl -X GET $URL/items
  1. ทดสอบการลบ: ตอนนี้ลองลบรายการโดยเรียกใช้คำสั่งด้านล่าง เปลี่ยนค่าของรหัสสินค้าหากจำเป็น
curl -X DELETE $URL/items/1
    This throws an error message
{"message":"Could not delete Item with id=[object Object]"}

ระบุและแก้ไขปัญหา

  1. แอปพลิเคชันกำลังทำงานในโหมดแก้ไขข้อบกพร่อง ดังนั้นให้ใช้เบรกพอยต์เพื่อค้นหาปัญหา มาดูเคล็ดลับบางส่วนกัน
  • เราทราบว่ามีบางอย่างผิดปกติกับคำสั่ง DELETE เนื่องจากไม่ได้แสดงผลลัพธ์ที่ต้องการ ดังนั้นคุณจึงตั้งค่าเบรกพอยต์ในเมธอด itemcontroller.js->exports.delete
  • เรียกใช้การดำเนินการทีละขั้นตอนและดูตัวแปรในแต่ละขั้นตอนเพื่อสังเกตค่าของตัวแปรภายในในหน้าต่างด้านซ้าย
  • หากต้องการสังเกตค่าที่เฉพาะเจาะจง เช่น request.params ให้เพิ่มตัวแปรนี้ลงในหน้าต่าง Watch
  1. โปรดทราบว่าค่าที่กำหนดให้กับ id คือ undefined เปลี่ยนรหัสเพื่อแก้ไขปัญหา

ข้อมูลโค้ดที่แก้ไขแล้วจะมีลักษณะดังนี้

// Delete a Item with the specified id in the request
exports.delete = (req, res) => {
    const id = req.params.id;
  1. เมื่อรีสตาร์ทแอปพลิเคชันแล้ว ให้ทดสอบอีกครั้งโดยลองลบ
  2. หยุดเซสชันการแก้ไขข้อบกพร่องโดยคลิกสี่เหลี่ยมสีแดงในแถบเครื่องมือการแก้ไขข้อบกพร่อง 647213126d7a4c7b.png

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

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

วิธีล้างข้อมูลหลังจากทำแล็บเสร็จแล้ว

  1. ลบไฟล์ที่ใช้ในห้องทดลอง
cd ~ && rm -rf mynodejsapp && rm -f setup.sh
  1. ลบโปรเจ็กต์เพื่อนำโครงสร้างพื้นฐานและทรัพยากรที่เกี่ยวข้องทั้งหมดออก