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

1. ภาพรวม

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

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

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

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

58a4cdd3ed7a123a.png

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

การตั้งค่าสภาพแวดล้อมตามเวลาที่สะดวก

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

b35bf95b8bf3d5d8.png

a99b7ace416376c4.png

bd84a6d3004737c5.png

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

เริ่มผู้แก้ไข Cloudshell

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

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

8560cc8d45e8c112.png

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

9e504cb98a6a8005.png

  1. ตัวแก้ไขจะเปิดขึ้นโดยมีนักสำรวจอยู่ด้านขวา และเอดิเตอร์จะเปิดขึ้นตรงกลาง
  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 และเข้าถึงข้อมูลที่เก็บไว้ในฐานข้อมูล CloudSQL ได้ในห้องทดลองนี้ สคริปต์การตั้งค่าด้านล่างจะเตรียมโครงสร้างพื้นฐานนี้ให้คุณ

  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 และฐานข้อมูล CloudSQL ที่จะใช้ในห้องทดลองนี้
./setup_with_cw.sh &

คลัสเตอร์เวิร์กสเตชันของระบบคลาวด์

  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 นาทีในการเปลี่ยนสถานะเป็น READY

c8f0b8662fdb827e.png

  1. เปิดเวิร์กสเตชันระบบคลาวด์ในคอนโซลและสร้างอินสแตนซ์ใหม่

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

94874fba9b74cc22.png

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

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

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

c31d48f2e4938c38.png

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

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

58149777e5cc350a.png

  1. เปลี่ยนเป็นไดเรกทอรีนี้แล้วเปิดเป็นพื้นที่ทำงาน การดำเนินการนี้จะโหลดเครื่องมือแก้ไขซ้ำโดยสร้างการกำหนดค่าพื้นที่ทำงานในโฟลเดอร์ที่สร้างขึ้นใหม่
cd mynodejsapp && code-oss-cloud-workstations -r --folder-uri="$PWD"
  1. เปิดเทอร์มินัลใหม่อีกครั้ง ติดตั้งโหนดและ 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. เพิ่มการอ้างอิงด่วน

รหัสที่เราจะเพิ่มจะใช้ express ด้วยเช่นกัน ดังนั้นให้เราเพิ่มการอ้างอิงนั้นลงในไฟล์ 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 โดยเลือก "โฟลเดอร์ใหม่" ในมุมมองเครื่องมือสำรวจ

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 เพื่อสร้างคอนเทนเนอร์ให้กับแอปพลิเคชันนี้

นอกจากนี้ ยังเปิดใช้ Hot Sync โดยอัตโนมัติระหว่างตัวแก้ไขและคอนเทนเนอร์ที่กำลังทำงานด้วยการกำหนดค่า Skaffold นี้ ไม่ต้องกำหนดค่าเพิ่มเติมเพื่อเปิดใช้ Hot Sync

5. แนะนำกระบวนการพัฒนา

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

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

ลงชื่อเข้าใช้ 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. คัดลอกรหัสโปรเจ็กต์สำหรับห้องทดลองนี้จากหน้า qwiklabs

fcff2d10007ec5bc.png

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

ทำให้ใช้งานได้กับ Kubernetes

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

c5dd5a749136407b.png

  1. ในแผงที่ปรากฏด้านบนใต้เซสชันการพัฒนา ให้เลือกเรียกใช้บน 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 ที่ส่งต่อมาจากแอปเดโมบริการ: http://localhost:8080"
  3. ในเทอร์มินัล Cloud Code ให้วางเมาส์เหนือ URL ในเอาต์พุต (http://localhost:8080) แล้วเลือก "ติดตามลิงก์" ในเคล็ดลับเครื่องมือที่ปรากฏขึ้น

คำตอบจะมีรายละเอียดดังนี้

{"message":"Greetings from Node"}

โหลดซ้ำแบบ Hot

  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 จะทำให้แอปพลิเคชันนี้ใช้งานได้ในโหมดแก้ไขข้อบกพร่อง
  • ซึ่งจะใช้เวลาสักครู่ในการสร้างแอปพลิเคชันและทำให้ใช้งานได้ คุณจะเห็นโปรแกรมแก้ไขข้อบกพร่องแนบอยู่ในครั้งนี้
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. เรียกใช้บรรทัดโดยกดขั้นตอนเหนือ 7cfdee4fd6ef5c3a.png
  7. สังเกตค่าปัจจุบันของการเปลี่ยนแปลงตัวแปร "message" เป็น "Hello from Node"
  8. ดับเบิลคลิกชื่อตัวแปร "target" และเปลี่ยนค่าเป็นอย่างอื่น เช่น "Hi from Node" ในป๊อปอัป
  9. คลิกปุ่ม ดำเนินการต่อ ในแผงควบคุมการแก้ไขข้อบกพร่อง
  10. ตรวจสอบคำตอบในเบราว์เซอร์ ซึ่งตอนนี้จะแสดงค่าที่อัปเดตที่คุณเพิ่งป้อน
  11. หยุด "แก้ไขข้อบกพร่อง" โดยกดปุ่มหยุด 647213126d7a4c7b.png และนำเบรกพอยท์ออกโดยคลิกที่เบรกพอยท์อีกครั้ง

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

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

กำหนดค่าการขึ้นต่อกัน

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

  1. เพิ่มทรัพยากร Dependency อีก 2 รายการ pg และ sequelize ไปยังไฟล์ package.json เพื่อสร้างแอปพลิเคชัน CRUD Postgres โพสต์การเปลี่ยนแปลงในส่วนทรัพยากร Dependency จะมีลักษณะเช่นนี้
    "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 อยู่ในรายการ "URL ที่ส่งต่อจากบริการ mynodejsapp: http://localhost:8080"
  3. เพิ่มสินค้า 2-3 รายการ

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

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 ให้เพิ่มตัวแปรนี้ลงในหน้าต่าง "ดู"
  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 ใหม่ตั้งแต่ต้นและกำหนดค่าให้ทำงานในโหมดการติดตั้งใช้งานแบบ Hot ด้วยคอนเทนเนอร์ จากนั้นคุณได้ทำให้แอปพลิเคชันใช้งานได้และแก้ไขข้อบกพร่องของแอปพลิเคชันไปยังคลัสเตอร์ GKE ระยะไกลตามกระบวนการของนักพัฒนาซอฟต์แวร์เดียวกันที่พบในสแต็กแอปพลิเคชันแบบดั้งเดิมแล้ว

วิธีทำความสะอาดหลังจบห้องทดลอง

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