weeix

เชื่อม K3s เข้ากับ OpenStack Block Storage (Cinder) เพื่อสร้าง Persistent Volume

Thu, 17 Jul 2025 21:16:00 +0700

จากบล็อกก่อนหน้านี้ที่ผู้เขียนได้แนะนำการเชื่อม K3s เข้ากับ OpenStack Load Balancer ไปแล้ว ในบทความนี้จะมาลงลึกกันต่อกับการเชื่อม K3s เข้ากับ Block Storage (Cinder) ของ OpenStack เพื่อให้สามารถสร้างและจัดการพื้นที่จัดเก็บข้อมูล (Persistent Volume) ได้โดยอัตโนมัติ

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

ก่อนจะเริ่มดำเนินการ ผู้อ่านควรเตรียมสิ่งต่อไปนี้ให้พร้อม:

มี K3s Cluster ที่ทำงานอยู่และสามารถเข้าถึงได้
มีสิทธิ์การเข้าถึงโปรเจกต์บน OpenStack พร้อม Username และ Password
ติดตั้ง kubectl บนเครื่องที่ใช้สั่งการ เพื่อควบคุม Kubernetes Cluster
(แนะนำ) ติดตั้ง openstack-client เพื่อความสะดวกในการตรวจสอบค่าคอนฟิกต่าง ๆ

คำเตือน (อีกครั้ง)

ก่อนจะไปต่อ ผู้เขียนขอย้ำอีกครั้งว่า โดยทั่วไปแล้วการใช้งาน Kubernetes ควรเลือกใช้บริการ Managed Kubernetes จาก Cloud Provider จะดีที่สุด เพราะสะดวกและมีความเสถียรสูงกว่าการติดตั้งและตั้งค่าคลัสเตอร์ด้วยตัวเอง ยกเว้นกรณีต่อไปนี้

Cloud Provider ที่ใช้อยู่ไม่มีบริการ Managed Kubernetes
มีทีมงานที่เชี่ยวชาญด้าน Kubernetes โดยเฉพาะ
ใช้สำหรับสร้างระบบทดสอบ (Testing) หรือระบบที่ไม่ค่อยมีความสำคัญ (Non-critical)
ต้องการติดตั้งเพื่อศึกษาหาความรู้

เป้าหมาย

เป้าหมายของบทความนี้คือ ทำให้ K3s สามารถจัดการ Block Storage ของ OpenStack (ที่มีชื่อบริการว่า Cinder) ได้โดยตรง ผลลัพธ์ที่ต้องการคือ เมื่อผู้ใช้สร้าง PersistentVolumeClaim (PVC) ใน K3s ระบบจะต้องไปสร้าง Block Storage Volume บน OpenStack ให้โดยอัตโนมัติ และเมื่อมีการขยายขนาดของ PVC ระบบก็จะต้องไปขยายขนาดของ Block Storage ด้วยเช่นกัน

ทำไมต้องเชื่อม Kubernetes กับ Block Storage ของ Cloud?

หากไม่ทำการเชื่อมต่อนี้ เวลาที่ต้องการใช้งาน Persistent Volume บน K3s เราจะถูกจำกัดให้ใช้ได้แค่ local volume หรือ Local Path Provisioner ซึ่งเป็น Storage Provisioner พื้นฐานที่ติดตั้งมาพร้อมกับ K3s อยู่แล้ว

ปัญหาหลักของ Local Path Provisioner คือข้อมูลจะถูกเก็บไว้บนพื้นที่ของโนด (Node) ที่ Pod ถูกสร้างขึ้นมาเท่านั้น ซึ่งหมายความว่าข้อมูลจะผูกติดอยู่กับโนดนั้น ๆ หากโนดดังกล่าวเกิดล่มหรือมีปัญหา ข้อมูลที่เก็บอยู่ก็จะไม่สามารถใช้งานได้จนกว่าจะกู้โนดนั้นกลับมาได้สำเร็จ วิธีนี้จึงทำให้เกิด Single Point of Failure (SPoF)

จริง ๆ ก็มีทางแก้ปัญหานี้โดยไม่ทำให้เกิด SPoF เช่น การติดตั้ง Software-Defined Storage อย่าง Rook-Ceph เพื่อสร้าง Storage Cluster ของตัวเองขึ้นมา แต่วิธีนี้ก็มาพร้อมกับความซับซ้อนในการติดตั้งและดูแลรักษา แถมยังเปลืองค่าใช้จ่ายด้าน Block Storage เพิ่มขึ้นอีก ถึงแม้จะใช้เทคนิค erasure code เพื่อลดการใช้พื้นที่แล้วก็ตาม

นอกจากนี้ยังอาจเป็นการเพิ่ม Overhead ถึงสองต่อ เพราะ Cloud Provider ที่ใช้ OpenStack เป็นพื้นฐานส่วนใหญ่มักจะใช้ Ceph เป็น Backend Storage อยู่แล้ว การที่เราติดตั้ง Rook-Ceph บนนั้นอีกชั้นจึงไม่ต่างอะไรกับการใช้ “Ceph ซ้อน Ceph” ซึ่งไม่ใช่วิธีที่มีประสิทธิภาพนัก

ดังนั้น การเชื่อม Kubernetes เข้ากับ Block Storage ของ OpenStack โดยตรงจึงเป็นทางออกที่เรียบง่ายและมีประสิทธิภาพสูงสุดสำหรับกรณีนี้

ขั้นตอนการติดตั้งและตั้งค่า

เพื่อทำให้ K3s คุยกับ Cinder ได้ เราจะติดตั้ง Cinder CSI Driver โดยผู้เขียนจะอ้างอิงวิธีการติดตั้งจากเอกสารทางการของ cloud-provider-openstack ซึ่งมีขั้นตอนดังต่อไปนี้

หมายเหตุ: หากมี Secret cloud-config ที่ทำไว้ตอนเชื่อม K3s เข้ากับ OpenStack Load Balancer อยู่แล้ว ให้ข้ามไป ขั้นตอนที่ 3 ได้เลย

ขั้นตอนที่ 1: สร้างไฟล์ตั้งค่า cloud.conf

สร้างไฟล์ cloud.conf ที่มีข้อมูลสำหรับเชื่อมต่อ OpenStack ตามตัวอย่างด้านล่าง

[Global]
auth-url=https://keystone.example.com/v3
username=your_username
password=your_password
region=TH-BKK
tenant-id=9f6dbf311397409a92cbbc761c7f8865
domain-id=c6b00adf4ed04fc5a958121fadb0e401

โดยระบุค่าต่าง ๆ ให้ถูกต้อง ดังนี้

auth-url: URL ของ Keystone API v3 (ดูได้จากไฟล์ OpenStack RC หรือหน้า Dashboard)
username และ password: ชื่อผู้ใช้และรหัสผ่านสำหรับเข้าสู่ระบบคลาวด์
region: ชื่อ Region ของ OpenStack ที่ต้องการใช้งาน
tenant-id หรือ tenant-name: ชื่อหรือ ID ของโปรเจกต์
domain-id หรือ domain-name: ชื่อหรือ ID ของโดเมนที่ผู้ให้บริการคลาวด์กำหนด

ขั้นตอนที่ 2: สร้าง Secret ใน Kubernetes

เมื่อได้ไฟล์ cloud.conf มาแล้ว เราจะนำไฟล์นี้ไปสร้างเป็น Secret ใน Kubernetes เพื่อให้ Cinder CSI Driver นำไปใช้งานได้

sudo kubectl create secret generic cloud-config --from-file=cloud.conf -n kube-system

ขั้นตอนที่ 3: ติดตั้ง Cinder CSI Driver Manifests

เลือก Branch/Tag ของ cloud-provider-openstack ให้ตรงกับเวอร์ชัน Kubernetes ที่ใช้ ตัวอย่างนี้สำหรับ Kubernetes v1.32.x จากนั้นใช้คำสั่ง kubectl apply กับไฟล์ manifest ทั้งหมด ยกเว้น csi-secret-cinderplugin.yaml

sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/cinder-csi-plugin/cinder-csi-controllerplugin-rbac.yaml
sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/cinder-csi-plugin/cinder-csi-controllerplugin.yaml
sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/cinder-csi-plugin/cinder-csi-nodeplugin-rbac.yaml
sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/cinder-csi-plugin/cinder-csi-nodeplugin.yaml
sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/cinder-csi-plugin/csi-cinder-driver.yaml

ขั้นตอนที่ 4: สร้าง StorageClass

ขั้นตอนสุดท้ายคือการสร้าง StorageClass เพื่อให้ K3s รู้ว่าจะต้องใช้ Provisioner ตัวไหนในการสร้าง Volume และตั้งค่าให้สามารถขยายขนาดได้ในภายหลัง

สร้างไฟล์ sc.yaml ด้วยเนื้อหาดังนี้:

apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
  name: cinder-sc
provisioner: cinder.csi.openstack.org
allowVolumeExpansion: true

จากนั้นสั่ง apply:

sudo kubectl apply -f sc.yaml

เพียงเท่านี้ K3s Cluster ของเราก็พร้อมที่จะสร้าง Persistent Volume ผ่าน OpenStack Cinder แล้ว

ขั้นตอนที่ 5: ทดสอบการทำงาน

เราจะทดสอบโดยการสร้าง Pod busybox และเขียนไฟล์ลงไปใน Volume เพื่อพิสูจน์ว่าข้อมูลยังคงอยู่แม้ Pod จะถูกสร้างขึ้นมาใหม่

สร้างไฟล์ pvc-busybox.yaml:

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: busybox-pvc
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 1Gi
  storageClassName: cinder-sc

สร้างไฟล์ pod-busybox.yaml:

apiVersion: v1
kind: Pod
metadata:
  name: busybox-pod
spec:
  containers:
    - name: busybox
      image: busybox
      command: ["sleep", "3600"]
      volumeMounts:
        - mountPath: /data
          name: busybox-storage
  volumes:
    - name: busybox-storage
      persistentVolumeClaim:
        claimName: busybox-pvc

apply ทั้ง 2 ไฟล์:

sudo kubectl apply -f pvc-busybox.yaml
sudo kubectl apply -f pod-busybox.yaml

ถ้าเข้าไปดูใน Dashboard ในตอนนี้ จะเห็นว่ามี Volume ขนาด 1Gi ถูกสร้างขึ้นมา

รอจน Pod อยู่ในสถานะ Running จากนั้นเขียนไฟล์ hello.txt ลงไปใน Volume:

sudo kubectl exec -it busybox-pod -- sh -c 'echo "Hello from Persistent Volume" > /data/hello.txt'

ตรวจสอบว่าไฟล์ถูกสร้างสำเร็จ:

sudo kubectl exec busybox-pod -- cat /data/hello.txt
# ผลลัพธ์ที่คาดหวัง: Hello from Persistent Volume

จำลองสถานการณ์ Pod ล่ม โดยลบ Pod ทิ้ง:

sudo kubectl delete pod busybox-pod

จากนั้นจึง apply ไฟล์ pod-busybox.yaml เพื่อสร้าง Pod ขึ้นใหม่:

sudo kubectl apply -f pod-busybox.yaml

ตรวจสอบว่าข้อมูลยังคงอยู่ โดยรอจน Pod ใหม่อยู่ในสถานะ Running แล้วเข้าไปอ่านไฟล์เดิม:

sudo kubectl exec busybox-pod -- cat /data/hello.txt
# ผลลัพธ์ที่คาดหวัง: Hello from Persistent Volume

ถ้าเห็นข้อความเดิมหมายความว่าการเชื่อมต่อทำงานได้อย่างสมบูรณ์!

ขั้นตอนที่ 6: ทดสอบการขยายขนาด Volume

เนื่องจากเราตั้งค่า allowVolumeExpansion: true ไว้ใน StorageClass เราจึงสามารถขยายขนาด Volume ได้โดยตรงผ่าน Kubernetes

เริ่มจากการแก้ไขไฟล์ pvc-busybox.yaml โดยเปลี่ยนขนาด storage จาก 1Gi เป็น 2Gi:

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: busybox-pvc
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 2Gi # <-- เปลี่ยนจาก 1Gi
  storageClassName: cinder-sc

จากนั้น apply การเปลี่ยนแปลง:

sudo kubectl apply -f pvc-busybox.yaml

หากเข้าไปดูใน Dashboard จะเห็นว่า Volume ถูกขยายเป็น 2Gi แล้ว

ลองตรวจสอบขนาดใหม่จากภายใน Pod:

sudo kubectl exec -it busybox-pod -- df -h /data

จะเห็นว่าขนาดของ Filesystem ที่ Mount อยู่ที่ /data ได้เพิ่มขึ้นเป็นประมาณ 2GB แล้ว

สรุป

การเชื่อมต่อ K3s เข้ากับ OpenStack Block Storage (Cinder) โดยตรงผ่าน CSI Driver เป็นวิธีที่ช่วยให้เราสามารถจัดการ Persistent Volume ได้อย่างมีประสิทธิภาพ ทนทานต่อความผิดพลาด และเป็นอัตโนมัติ ทำให้การบริหารจัดการ Storage สำหรับแอปพลิเคชันบน Kubernetes ของเราเป็นไปอย่างราบรื่นและเหมาะสมกับสถาปัตยกรรมแบบคลาวด์อย่างแท้จริง

เชื่อม K3s กับ OpenStack Load Balancer: คู่มือฉบับลุยจริง เจ็บจริง

Tue, 15 Jul 2025 21:49:00 +0700

บทความนี้จะมาแชร์ประสบการณ์การเชื่อมต่อ K3s ซึ่งเป็น Kubernetes distribution ขนาดเล็ก เข้ากับ Load Balancer ของ Public Cloud ที่พัฒนาต่อยอดมาจาก OpenStack

เรื่องของเรื่องคือผู้เขียนไปได้ไปเครดิตฟรีจาก Public Cloud เจ้าหนึ่งมาใช้งาน แล้วก็เกิดความคิดที่อยากจะลองติดตั้งคลัสเตอร์ Kubernetes ดู โดยที่เลือก K3s เป็นเพราะติดตั้งง่ายดี ใช้คำสั่งแค่บรรทัดเดียวก็พร้อมใช้งานแล้ว

curl -sfL https://get.k3s.io | sh -

ง่ายขนาดนี้ก็ไปลุยกันเลย แต่ก่อนหน้านั้น…

คำเตือน! ก่อนจะลงมือทำตาม

การติดตั้งคลัสเตอร์ Kubernetes ด้วยตัวเองบน Cloud (หรือจะบนเครื่องแม่ข่ายก็เหมือนกัน) มีความซับซ้อนและต้องดูแลรักษาในระยะยาว ผู้เขียนจึงอยากแนะนำว่าควรใช้บริการ Managed Kubernetes (เช่น EKS, AKS, GKE) ของ Cloud Provider นั้น ๆ จะดีที่สุด เพราะสะดวกและมีเสถียรภาพสูงกว่ามาก

อย่างไรก็ตาม การติดตั้งด้วยตัวเองก็ยังเป็นทางเลือกที่น่าสนใจในกรณีต่อไปนี้:

Cloud Provider ที่คุณใช้ ไม่มี บริการ Managed Kubernetes
องค์กรของคุณมีทีมงานที่เชี่ยวชาญด้าน Kubernetes และพร้อมที่จะดูแลรักษาระบบเอง
คุณต้องการสร้างคลัสเตอร์สำหรับ ระบบทดสอบ (Testing/Development) หรือระบบที่ไม่สำคัญมากนัก
คุณต้องการติดตั้งเพื่อศึกษาหาความรู้ และทำความเข้าใจการทำงานของ Kubernetes ให้ลึกซึ้งยิ่งขึ้น

หากเข้าข่ายข้อใดข้อหนึ่งข้างต้น… ไปต่อกันเลย!

เป้าหมายของเราคืออะไร?

เป้าหมายหลักของภารกิจนี้คือการทำให้คลัสเตอร์ Kubernetes ของเราสามารถ “คุย” กับระบบของ OpenStack เพื่อจัดการ Load Balancer ได้โดยอัตโนมัติ พูดง่าย ๆ คือ เมื่อเราสร้าง Service ใน Kubernetes โดยระบุชนิดเป็น type: LoadBalancer เราต้องการให้เกิดสิ่งต่อไปนี้:

มีการสร้าง Load Balancer ขึ้นใน OpenStack โดยอัตโนมัติ
Load Balancer นั้นถูกตั้งค่าให้กระจาย Traffic ไปยังโนดทั้งหมดในคลัสเตอร์ของเราอย่างถูกต้อง

ทำไมต้องใช้ Load Balancer ของ Cloud Provider?

ถ้าไม่ทำแบบนี้ได้ไหม? ได้สิ ยังมีอีกหลายวิธี เช่น:

ใช้ ServiceLB ที่มากับ K3s: โดยเมื่อสร้าง Service แล้ว ServiceLB จะเปิดพอร์ตที่เราเลือกบนทุกโนดในคลัสเตอร์ ทำให้เราสามารถใช้เทคนิค DNS Round Robin สร้าง A Record ชี้มายังไอพีของทุกโนดได้ แต่กรณีที่มีโนดล่ม อาจจะทำให้ Service ของเราเข้าได้บ้าง ไม่ได้บ้าง แม้ว่าผู้ให้บริการ DNS บางรายจะมีเทคนิคในการนำไอพีที่ใช้งานไม่ได้ออกจากรอบหมุนเวียนของ Round Robin แต่กว่าจะส่งผลก็ต้องรอให้ DNS Cache หมดอายุก่อนอยู่ดี
สร้าง VM ติดตั้ง HAProxy/Nginx เอง: เราสามารถสร้าง VM แยกขึ้นมาแล้วติดตั้ง Reverse Proxy เช่น HAProxy หรือ Nginx แล้วตั้งค่าให้ชี้ Traffic ไปยัง NodePort ของ Service ด้วยตัวเอง วิธีนี้ทนทานขึ้น แต่ก็ตามมาด้วยความยุ่งยากในการบริหารจัดการที่ต้องทำด้วยมือทั้งหมด

จะเห็นว่าการใช้ Load Balancer ของ Cloud Provider โดยตรงผ่าน Cloud Controller Manager นั้นเป็นวิธีที่ทนทานและเป็นอัตโนมัติที่สุด เรียกได้ว่าเป็นมาตรฐานของ Kubernetes ที่ทำงานบน Cloud เลยก็ว่าได้

ขั้นตอนการติดตั้งและตั้งค่า

มาถึงส่วนที่ทุกคนรอคอย มาดูขั้นตอนกันเลย

ขั้นตอนที่ 1: ปรับแต่ง k3s ให้พร้อมคุยกับภายนอก

สิ่งแรกที่ต้องทำคือบอกให้ K3s รู้ว่าเราจะใช้ Cloud Controller จากภายนอกนะ โดยต้องปิด Cloud Controller และ Load Balancer เริ่มต้นของมันออกไปก่อน ถ้าต้องการใช้ Traefik อาจจะเก็บไว้ก็ได้ แต่ผู้เขียนชอบใช้ NGINX Ingress มากกว่า ก็เลยจะปิด Traefik ด้วย

หากคุณติดตั้ง K3s ไปแล้ว ให้แก้ไขไฟล์ Service ของ k3s โดยตรง:

# แก้ไขไฟล์ /etc/systemd/system/k3s.service
# หรือ /etc/systemd/system/k3s-agent.service สำหรับ Worker Node

# เพิ่ม argument ท้ายบรรทัด ExecStart
ExecStart=/usr/local/bin/k3s server \
    # ... (argument อื่น ๆ) ... \
    '--disable=cloud-controller' \
    '--disable=servicelb' \
    '--disable=traefik' \
    '--cloud-provider=external'

จากนั้น Reload Daemon และ Restart Service:

sudo systemctl daemon-reload
sudo systemctl restart k3s

ทำซ้ำแบบนี้กับทุก ๆ โนด

แต่ถ้ากำลังจะติดตั้ง K3s ใหม่ สามารถระบุค่าเหล่านี้ผ่าน Environment Variable ได้เลย ซึ่งจะสะดวกกว่ามาก:

curl -sfL https://get.k3s.io | INSTALL_K3S_EXEC="--disable-cloud-controller --disable=servicelb --disable=traefik --kubelet-arg=cloud-provider=external" sh -

หลังจาก Restart หรือติดตั้งใหม่แล้ว จะพบว่าสามารถใช้คำสั่ง kubectl ได้ตามปกติ แต่ Pod ทั้งหมดจะมีสถานะเป็น Pending เนื่องจากโนดมี taint node.cloudprovider.kubernetes.io/uninitialized=true:NoSchedule

ขั้นตอนที่ 2: สร้างไฟล์ตั้งค่า cloud.conf

ไฟล์นี้ใช้สำหรับบอก Cloud Controller Manager ว่าจะเชื่อมต่อกับ OpenStack API ได้อย่างไร โดยต้องระบุ URL, Username, Password, Project (Tenant) ID และข้อมูลอื่น ๆ ที่จำเป็น สามารถดูตัวอย่างไฟล์ได้จาก Official Repository ของ Cloud Provider OpenStack และแก้ไขให้ตรงกับ Public Cloud ที่เราใช้

ตัวอย่าง cloud.conf:

[Global]
auth-url=https://keystone.example.com/v3
username=your_username   
password=your_password
region=TH-BKK   
tenant-id=9f6dbf311397409a92cbbc761c7f8865
domain-id=c6b00adf4ed04fc5a958121fadb0e401

[LoadBalancer]
subnet-id=8b219e59-d293-4ce6-b364-1c9c7eb1a34e
floating-network-id=2aa7a98d-ae38-4844-82d6-9ab5c2460b69
# Uncomment if your cloud provider doesn't set the default value
#flavor-id=fcbb978d-da0b-4ba6-8200-fd9228e6598e
#availability-zone=TH-BKK
# Uncomment if your cloud provider doesn't support creating LBs via API
#internal-lb=true

ข้อมูลต่าง ๆ ที่จำเป็นสามารถดูได้โดยใช้คำสั่ง OpenStack Client เช่น

openstack versions show
openstack project list
openstack project show
openstack subnet list
openstack network list
openstack loadbalancer availabilityzone list
openstack loadbalancer flavor list

ขั้นตอนที่ 3: สร้าง Secret ใน Kubernetes

เมื่อได้ไฟล์ cloud.conf มาแล้ว เราจะนำไฟล์นี้ไปสร้างเป็น Secret ใน Kubernetes เพื่อให้ Cloud Controller Manager นำไปใช้งานได้

sudo kubectl create secret -n kube-system generic cloud-config --from-file=cloud.conf

สำคัญ: secret จะต้องชื่อ cloud-config และมีไฟล์ cloud.conf อยู่ด้านใน

ขั้นตอนที่ 4: ติดตั้ง OpenStack Cloud Controller Manager

เราสามารถติดตั้งได้จาก Manifest หรือ Helm Chart ใน Official Repository ซึ่งในที่นี้จะใช้ Manifest เพราะผู้เขียนขี้เกียจติดตั้ง Helm:

sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/controller-manager/cloud-controller-manager-roles.yaml
sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/controller-manager/cloud-controller-manager-role-bindings.yaml
sudo kubectl apply -f https://raw.githubusercontent.com/kubernetes/cloud-provider-openstack/refs/tags/v1.32.0/manifests/controller-manager/openstack-cloud-controller-manager-ds.yaml

หมายเหตุ 1: แก้ไขเวอร์ชันให้ใกล้เคียงกับเวอร์ชันของ Kubernetes ที่เราใช้ ในที่นี้ผู้เขียนใช้ Kubernetes 1.32.6 จึงใช้ v1.32.0 โดยสามารถดูเวอร์ชันที่มีได้จากหน้า release ของ Official Repository

หมายเหตุ 2: ds ในชื่อไฟล์ย่อมาจาก DaemonSet ซึ่งหมายความว่า Controller Manager จะถูกติดตั้งลงบนโนดควบคุม (master node) ทุก ๆ โนด

ขั้นตอนที่ 5: แก้ไข DaemonSet ให้รู้จัก k3s

อัพเดต: เห็นว่ามี Pull Request ที่แก้ nodeSelector ให้เลือก node-role.kubernetes.io/control-plane=true แล้ว ถ้าใครใช้ openstack-cloud-controller-manager รุ่นใหม่ ๆ อาจจะไม่ต้องทำตามขั้นตอนนี้แล้วก็ได้

หลังจากติดตั้งในขั้นตอนที่แล้ว คุณอาจจะพบว่า… ไม่มี Pod ของ openstack-cloud-controller-manager ถูกสร้างขึ้นมาเลย!

ปัญหานี้เกิดจาก Manifest ของ DaemonSet ที่มีการระบุ nodeSelector ให้ Pod ทำงานบนโนดที่มี Label node-role.kubernetes.io/master ที่มีค่าเป็น ค่าว่าง ("") เท่านั้น

แต่ K3s กำหนด Label ให้โนดควบคุมเป็น node-role.kubernetes.io/control-plane=true ทำให้ Selector ไม่ตรงกัน เราจึงต้องแก้ไข DaemonSet ด้วยคำสั่ง patch (หรือใครสะดวกใช้คำสั่ง edit ก็ได้เหมือนกัน)

sudo kubectl patch daemonset openstack-cloud-controller-manager -n kube-system --type='json' -p='[{"op": "replace", "path": "/spec/template/spec/nodeSelector/node-role.kubernetes.io~1control-plane", "value": "true"}]'

คำอธิบาย: ~1 ใน path คือการ escape เครื่องหมาย / ใน JSON Patch เรากำลังบอกให้ Kubernetes เปลี่ยน Selector ไปมองหา Label node-role.kubernetes.io/control-plane ที่มีค่าเป็น true แทน

หลังจากรันคำสั่งนี้แล้วไม่นาน Pod ของ Controller Manager ก็ควรจะถูกสร้างและอยู่ในสถานะ Running โดยเราสามารถตรวจสอบสถานะของ Pod ได้ด้วยคำสั่ง:

sudo kubectl get pods -n kube-system -l k8s-app=openstack-cloud-controller-manager -w

เมื่อ Pod ทำงานเรียบร้อยแล้ว taint node.cloudprovider.kubernetes.io/uninitialized บนโนดก็จะหายไป และ Pod อื่น ๆ ที่เคยมีสถานะ Pending ก็จะเริ่มทำงานได้ตามปกติ

ขั้นตอนที่ 6: ตรวจสอบ Security Groups

เพื่อให้ Load Balancer ของ OpenStack สามารถส่ง Traffic เข้ามายัง Node ใน Cluster ได้ เราต้องแน่ใจว่า Security Group ของโนดทุกตัวได้เปิด Port ในช่วง NodePort (ปกติจะอยู่ในช่วงพอร์ต 30000-32767) สำหรับ TCP Traffic ที่มาจาก CIDR (Subnet) ของ Load Balancer

ขั้นตอนที่ 7: ทดสอบการทำงาน

ถึงเวลาทดสอบแล้ว! เราจะลองสร้าง Deployment ง่าย ๆ และเปิดให้เข้าถึงได้ผ่าน Service ชนิด LoadBalancer

สร้าง Deployment ของ Nginx: sudo kubectl create deployment nginx --image=nginx
เปิด Service เป็นชนิด LoadBalancer: sudo kubectl expose deployment nginx --port=80 --type=LoadBalancer
รอดูผลลัพธ์: sudo kubectl get service nginx -w

รอสักครู่… ถ้าทุกอย่างถูกต้อง คุณจะเห็นว่าช่อง EXTERNAL-IP ของ Service nginx จะมี IP Address ปรากฏขึ้นมา ซึ่ง IP นี้คือ IP ของ Load Balancer ที่ถูกสร้างขึ้นใน OpenStack นั่นเอง! แต่ถ้าไม่เจอก็ไม่เป็นไร ลองอ่านหัวข้อด้านล่างดู

ข้อจำกัดที่พบบน Cloud Provider และวิธีแก้ปัญหาเฉพาะหน้า

ถึงแม้จะทำตามขั้นตอนมาทั้งหมด แต่ผู้เขียนก็ยังเจอปัญหาเฉพาะตัวของ Cloud Provider ที่ใช้งานอยู่ (Nipa Cloud) ซึ่งอาจจะเป็นประโยชน์กับคนที่เจอสถานการณ์คล้าย ๆ กัน

ต้องระบุ Flavor และ Availability Zone: Load Balancer ที่ถูกสร้างขึ้นมาไม่ทำงาน หากไม่ระบุ flavor-id และ availability-zone ไปใน cloud.conf หรือใน Annotation ของ Service ไม่แน่ใจว่าเป็นเพราะทาง Cloud ลืมตั้งค่า Default ไว้หรือเปล่า
ไม่สามารถสร้าง Floating IP ได้ เพราะ Description ยาวเกินไป: Cloud Provider จำกัดความยาวของฟิลด์ description ของ Floating IP ไว้ที่ 20 ตัวอักษร แต่ openstack-cloud-controller-manager จะพยายามสร้าง Floating IP โดยระบุ description ที่มีความยาวไม่ต่ำกว่า 67 ตัวอักษร ทำให้เกิดข้อผิดพลาด HTTP 400 Bad Request วนลูปไม่รู้จบใน Log ของ Controller Manager (ทาง Provider รับทราบปัญหานี้แล้ว แต่ยังไม่มีกรอบเวลาแก้ไขที่ชัดเจน)
Attach IP แล้ว Traffic ไม่เข้า: หากลอง Attach Floating IP ผ่าน API หรือ OpenStack Client ด้วยตัวเอง Controller Manager จะหยุดพยายามสร้าง IP และคำสั่ง kubectl get service ก็จะแสดง External IP ถูกต้อง แต่… Traffic ไม่สามารถเข้าได้!

จากข้อจำกัดข้างต้น (ซึ่งอาจจะเป็นความอ่อนประสบการณ์ของผู้เขียนเองก็ได้) จึงใช้วิธีแก้ปัญหาเฉพาะหน้าไปก่อน คือ เพิ่มการตั้งค่า internal-lb=true เข้าไปในไฟล์ cloud.conf เพื่อบอกให้ Controller Manager สร้างแค่ Load Balancer แต่ไม่ต้องพยายามสร้าง Floating IP เมื่อสร้าง Load Balancer เสร็จแล้วก็เข้าไปที่หน้า Web UI ของ Cloud Provider เพื่อ Attach Floating IP ให้กับ Load Balancer ที่ถูกสร้างขึ้นมาด้วยมือ

วิธีนี้ทำให้สามารถสร้าง Load Balancer ได้แบบ (กึ่ง) อัตโนมัติ เพราะต้องเข้าไปจัดการส่วนที่เหลือใน Web UI ด้วยตนเอง

บทสรุป

การเชื่อมต่อ K3s เข้ากับ OpenStack Load Balancer เป็นประสบการณ์ที่ท้าทายแต่ก็ทำให้เข้าใจสถาปัตยกรรมเบื้องหลังของ Kubernetes บน Cloud มากขึ้น แม้จะต้องเจอกับปัญหาที่ได้กล่าวไปข้างต้นก็ตาม

สุดท้ายนี้ ขอย้ำคำเตือนเดิมอีกครั้งว่า หากไม่จำเป็นจริง ๆ การใช้บริการ Managed Kubernetes ของ Cloud Provider ยังคงเป็นทางเลือกที่ดีและง่ายที่สุด แต่ถ้าคุณเป็นสายลุย ชอบเรียนรู้ และไม่กลัวปัญหา ก็จัดเลย

เขียนโปรแกรมช่วยกรอกฟอร์มบนเว็บจากข้อมูลในไฟล์ Excel โดยใช้ Python และ Playwright

Sat, 15 Jul 2023 21:40:00 +0700

เคยต้องมานั่งกรอกฟอร์มบนเว็บซ้ำ ๆ ทั้งที่มีไฟล์ CSV หรือ Excel อยู่แล้วไหมครับ แล้วเว็บที่เรากรอกก็ดันไม่มีปุ่มให้นำเข้าข้อมูลจากไฟล์ที่มีอยู่แล้วอีก ทำให้ต้องมานั่งพิมพ์เองทีละรายการเป็นสิบรอบร้อยรอบ แทนที่จะได้เอาเวลาไป~~แอบงีบ~~ทำอย่างอื่นที่มีประโยชน์กว่า บทความนี้เลยจะมาแนะนำวิธีเขียนโปรแกรมช่วยกรอกฟอร์มบนเว็บจากข้อมูลในไฟล์ Excel โดยใช้ภาษา Python และไรบรารี Playwright ครับ

กลุ่มเป้าหมายหลักของบทความนี้คือคนที่พอจะมีประสบการณ์เขียน Python มาบ้าง สำหรับคนที่เพิ่งเริ่มฝึกเขียน ถ้าเข้าใจเกี่ยวกับ ตัวแปร ฟังก์ชัน การวนซ้ำ การติดตั้ง/เรียกใช้ไลบรารี และ ข้อความสั่ง with แล้ว ก็น่าจะอ่านเข้าใจได้ (หรือเปล่านะ)

Playwright คืออะไร

Playwright เป็นไรบรารีที่เอาไว้สำหรับทดสอบการทำงานของเว็บแอปพลิเคชัน (web testing) และทำกระบวนการบนเว็บให้เป็นอัตโนมัติ (web automation) จากเดิมที่เราต้องเปิดเว็บบราวเซอร์แล้ว เข้าเว็บนั้น พิมพ์ช่องนี้ กดปุ่มโน้น ฯลฯ ก็เปลี่ยนมาเขียนโปรแกรมที่ใช้เว็บบราวเซอร์ทำสิ่งต่าง ๆ แทนเราครับ

เมื่อไหร่ที่ควรจะใช้ Playwright

ต้องบอกไว้ก่อนว่าควรจะเอา Playwright ไว้เป็นทางเลือกสุดท้ายนะครับ เพราะจะมีข้อจำกัดแบบเดียวกับการทำ web scraping เลย (การดึงข้อมูลจากเว็บไซต์ให้ออกมาอยู่ในรูปแบบที่เรากำหนด) เช่น

เปราะบาง ถ้าเว็บที่เราใช้งานมีการเปลี่ยนข้อความ สมมุติแต่เดิมปุ่มชื่อ “บันทึก” แล้วถูกเปลี่ยนเป็น “ส่งข้อมูล” โปรแกรมเราก็อาจจะใช้งานไม่ได้แล้ว
ช้า ถ้าเทียบกับ API หรือฟังก์ชันสำหรับเพิ่มข้อมูลจากไฟล์ CSV/Excel แล้ว ย่อมช้ากว่าแน่นอนเพราะเป็นการจำลองการคลิก/พิมพ์ผ่านเว็บบราวเซอร์
มีโอกาสถูกปิดกั้น ถ้าเจ้าของเว็บไซต์ไม่ต้องการให้เราเข้าไปกรอกข้อมูลอัตโนมัติ เขาสามารถใช้เครื่องมือ เช่น Captcha เพื่อป้องกันไม่ให้โปรแกรมเราเข้าไปกรอกได้

ดังนั้นก่อนที่จะใช้ Playwright เราควรจะแน่ใจก่อนว่า

ข้อมูลที่เราจะกรอกมีจำนวนมาก หรือต้องกรอกบ่อย ๆ
เว็บที่เรากรอกไม่มีฟังก์ชันให้เพิ่มข้อมูลจากไฟล์ CSV/Excel
เว็บที่เรากรอกไม่มี API ให้ใช้งาน
เว็บที่เรากรอกไม่ได้ห้ามการใช้งานซอฟต์แวร์อัตโนมัติ

สิ่งที่ต้องเตรียม

ไฟล์ CSV หรือ Excel ข้อมูลที่จะกรอกเข้าไปในฟอร์ม
ฟอร์มบนเว็บที่เราต้องการให้โปรแกรมช่วยกรอก
ดาวน์โหลดและติดตั้งโปรแกรม Python

ติดตั้ง Playwright

ก่อนจะติดตั้ง Playwright เราควรสร้าง virtual environment ขึ้นมาสำหรับ project นี้โดยเฉพาะ ซึ่งสามารถเลือกใช้ venv, pipenv, poetry, หรือ pdm ได้ตามความถนัด หรือถ้าใครคิดว่านี่จะเป็น project แรก และ project สุดท้ายในชีวิต แล้วก็ไม่กังวลว่าไรบรารีจะตีกันในอนาคต อาจจะลงสดเลยก็ได้ โดยใช้คำสั่ง

pip install playwright

พอติดตั้งเสร็จแล้ว เราจะสามารถใช้คำสั่ง playwright ได้ ให้เราใช้คำสั่งนี้เพื่อติดตั้งเว็บบราวเซอร์ที่จะใช้ในบทความนี้ครับ

playwright install

โดยคำสั่งด้านบน จะติดตั้งเว็บบราวเซอร์ทั้งหมด 3 ตัว คือ Chromium (ญาติของ Google Chrome), Firefox, และ WebKit ซึ่งถ้าใครรู้สึกว่ามันมากไปก็เลือกเฉพาะตัวที่เราจะใช้ก็ได้ครับ เช่น ถ้าจะติดตั้งแค่ Chromium ก็ใช้คำสั่ง

playwright install chromium

ใช้ Codegen แปลงการกรอกข้อมูลให้เป็นโค้ด

Playwright มีเครื่องมือที่ชื่อว่า Codegen ไว้อำนวยความสะดวกให้เราไม่ต้องเขียนโค้ดเองทั้งหมด โดยจะเปิดเว็บบราวเซอร์ กับหน้าต่าง Playwright Inspector ขึ้นมา เวลาที่เราทำอะไรก็ตามในเว็บบราวเซอร์นี้ เช่น เปิดเว็บ คลิก พิมพ์ ฯลฯ Codegen ก็จะแปลงการกระทำเหล่านั้นเป็นโค้ดในหน้าต่าง Playwright Inspector ให้โดยอัตโนมัติ

สามารถเริ่มต้นใช้งาน Codegen ได้ด้วยคำสั่ง

playwright codegen

จะเป็นการเปิดเว็บบราวเซอร์ Chromium กับหน้าต่าง Playwright Inspector ขึ้นมา ถ้าในขั้นตอนการติดตั้ง Playwright เราไม่ได้ติดตั้ง Chromium ไว้ จะต้องระบุเว็บบราวเซอร์ที่เราจะใช้ด้วย เช่น

playwright codegen -b firefox

จากนั้น เราก็เปิดฟอร์มบนเว็บ เข้าสู่ระบบให้เรียบร้อย แล้วกรอกข้อมูลตามปกติ 1 รอบ ตัวอย่างตามวิดีโอด้านล่าง

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

พอกรอกเสร็จ จะเห็นได้ว่ามีโค้ดเพิ่มขึ้นมาในหน้า Playwright Inspector ซึ่งเราสามารถคัดลอกไปใช้งานต่อได้ ตัวอย่างโค้ดที่ได้จะออกมาประมาณนี้

from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("http://192.168.56.101:8000/auth/login")
    page.get_by_placeholder("Email").click()
    page.get_by_placeholder("Email").fill("admin@admin.com")
    page.get_by_placeholder("Password").click()
    page.get_by_placeholder("Password").fill("password")
    page.get_by_role("button", name="Sign In").click()
    page.get_by_role("button", name=" Toggle navigation").click()
    page.get_by_role("link", name=" Products ").click()
    page.get_by_role("link", name=" Add Product").click()
    page.get_by_placeholder("Enter product name").click()
    page.get_by_placeholder("Enter product name").fill("เสื้อยืดลายดอก")
    page.get_by_placeholder("Enter sku").click()
    page.get_by_placeholder("Enter sku").fill("TS-002-01")
    page.get_by_placeholder("Enter price").click()
    page.get_by_placeholder("Enter price").fill("15")
    page.get_by_placeholder("Enter Qty").click()
    page.get_by_placeholder("Enter Qty").fill("20")
    page.frame_locator("iframe").get_by_text("Enter description").click()
    page.frame_locator("iframe").locator("body").fill("เสื้อยืดลายดอก ใส่แล้วเฟี้ยว")
    page.get_by_role("combobox").first.click()
    page.get_by_role("treeitem", name="ย้วยจัง").click()
    page.get_by_role("form").get_by_role("list").nth(2).click()
    page.get_by_role("treeitem", name="เสื้อยืด").click()
    page.get_by_role("button", name="Save Changes").click()
    page.get_by_role("link", name="Add Product", exact=True).click()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

ถ้ารันโค้ดนี้เลย สิ่งที่จะเกิดขึ้นคือ โปรแกรมจะเปิดเว็บบราวเซอร์ขึ้นมา แล้วกรอกข้อมูลตามเราเป๊ะ ๆ (แต่เร็วกว่า) แต่เป้าหมายเราคือการกรอกข้อมูลจากไฟล์ CSV/Excel ไม่ใช่กรอกข้อมูลเดิมซ้ำ เพราะฉะนั้นเราต้องแก้ไขโค้ดเล็กน้อยเพื่อให้โปรแกรมทำงานตามที่เราต้องการ

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

เขียนโค้ดสำหรับอ่านไฟล์ CSV/Excel

ในหัวข้อนี้เราจะมาเขียนโค้ดสำหรับอ่านไฟล์ CSV/Excel เพื่อเตรียมนำเข้าไปประกอบร่างกับโค้ดที่เขียนด้วย Codegen

ตัวอย่างข้อมูลของผมเป็นไฟล์ Excel ชื่อ example.xlsx ที่มีหน้าตาแบบนี้

ไม่ว่าจะเป็น CSV หรือ Excel ก็ต้องจัดรูปแบบให้แถวแรกเป็นชื่อคอลัมน์ และแถวที่เหลือเป็นข้อมูลเหมือนภาพด้านบนนะครับ ห้าม merge คอลัมน์เด็ดขาด ไม่งั้นเละแน่นอน

ก่อนอื่นก็เริ่มจากการติดตั้งไรบรารี openpyxl เพื่อใช้ในการอ่านไฟล์นามสกุล xlsx โดยใช้คำสั่งด้านล่าง (ถ้าเป็นไฟล์ CSV ก็ไม่ต้องติดตั้งไรบรารีใด ๆ เพิ่มเติม เพราะใน Python มีโมดูล csv มาให้ใช้อยู่แล้ว)

pip install openpyxl

เราสามารถให้ generative AI อย่าง ChatGPT, Google Bard, Bing Chat, ฯลฯ ช่วยเขียนโค้ดในส่วนนี้ได้ด้วยนะ อย่างผมใช้ Bing Chat ก็จะพิมพ์บอกเขาว่า

เขียนโค้ดภาษา Python โดยใช้ไรบรารี openpyxl เพื่ออ่านไฟล์ example.xlsx ที่มี 5 คอลัมน์ ได้แก่ name, sku, price, quantity, description มาเก็บไว้ในตัวแปร จากนั้นจึงแสดงผลออกทางหน้าจอ

ซึ่ง Bing Chat ก็ส่งโค้ดกลับมาประมาณนี้

from openpyxl import load_workbook

workbook = load_workbook(filename="example.xlsx")
sheet = workbook.active

for row in sheet.iter_rows(min_row=2, values_only=True):
    name, sku, price, quantity, description = row
    print(name, sku, price, quantity, description)

ถ้านำมารันได้เลย จะได้ผลลัพธ์ดังนี้

เสื้อยืดลายดอก TS-002-01 15 20 เสื้อยืดลายดอก ใส่แล้วเฟี้ยว
เสื้อยืดลายจุด TS-002-02 15 20 เสื้อยืดลายจุด ใส่แล้วเฟี้ยว
เสื้อยืดลายพราง TS-002-03 18 10 เสื้อยืดลายพราง ใส่แล้วเฟี้ยว
เสื้อยืดลายทาง TS-002-04 15 15 เสื้อยืดลายทาง ใส่แล้วเฟี้ยว
...

ให้เรานำโค้ดที่ได้ไปรวมร่างกับโค้ดในหัวข้อ “ใช้ Codegen แปลงการกรอกข้อมูลให้เป็นโค้ด” โดย

ย้ายบรรทัดนำเข้าไรบรารี เช่น from openpyxl import load_workbook ไปอยู่ด้านบนด้วยกัน
ย้ายตัวแปรที่เกิดจากการโหลดไฟล์ CSV/Excel ทั้งหมด เช่น workbook และ sheet ไปไว้ในฟังก์ชัน run
ย้ายโค้ดวนซ้ำ for ไปใส่ในฟังก์ชัน run หลังจากบรรทัดที่เปิดไปถึงหน้าสำหรับกรอกข้อมูลแล้ว จากนั้นเพิ่มระยะแท็ปให้บรรทัดที่เหลือในฟังก์ชันเข้าไปอยู่ในโค้ดวนซ้ำ
แทนที่ข้อความที่เรากรอกตอนใช้ Codegen เป็นตัวแปรที่ถูกต้อง เช่น เปลี่ยน "เสื้อยืดลายดอก" ให้เป็น str(name) เป็นต้น (.fill() รองรับเฉพาะตัวแปรที่เป็นข้อความ เราจึงต้องใช้ฟังก์ชัน str() ครอบตัวแปร)

ถ้าอ่านคำอธิบายด้านบนแล้วงง ดูจากตัวอย่างโค้ดด้านล่างก็ได้

 from playwright.sync_api import Playwright, sync_playwright, expect
+from openpyxl import load_workbook
 
 
 def run(playwright: Playwright) -> None:
+    workbook = load_workbook(filename="example.xlsx")
+    sheet = workbook.active
     browser = playwright.chromium.launch(headless=False)
     context = browser.new_context()
     page = context.new_page()
 def run(playwright: Playwright) -> None:
     page.get_by_role("button", name=" Toggle navigation").click()
     page.get_by_role("link", name=" Products ").click()
     page.get_by_role("link", name=" Add Product").click()
-    page.get_by_placeholder("Enter product name").click()
-    page.get_by_placeholder("Enter product name").fill("เสื้อยืดลายดอก")
-    page.get_by_placeholder("Enter sku").click()
-    page.get_by_placeholder("Enter sku").fill("TS-002-01")
-    page.get_by_placeholder("Enter price").click()
-    page.get_by_placeholder("Enter price").fill("15")
-    page.get_by_placeholder("Enter Qty").click()
-    page.get_by_placeholder("Enter Qty").fill("20")
-    page.frame_locator("iframe").get_by_text("Enter description").click()
-    page.frame_locator("iframe").locator("body").fill("เสื้อยืดลายดอก ใส่แล้วเฟี้ยว")
-    page.get_by_role("button", name="Save Changes").click()
-    page.get_by_role("link", name="Add Product", exact=True).click()
+    for row in sheet.iter_rows(min_row=2, values_only=True):
+        name, sku, price, quantity, description = row
+        print(name, sku, price, quantity, description)
+        page.get_by_placeholder("Enter product name").click()
+        page.get_by_placeholder("Enter product name").fill(str(name))
+        page.get_by_placeholder("Enter sku").click()
+        page.get_by_placeholder("Enter sku").fill(str(sku))
+        page.get_by_placeholder("Enter price").click()
+        page.get_by_placeholder("Enter price").fill(str(price))
+        page.get_by_placeholder("Enter Qty").click()
+        page.get_by_placeholder("Enter Qty").fill(str(quantity))
+        page.frame_locator("iframe").get_by_text("Enter description").click()
+        page.frame_locator("iframe").locator("body").fill(str(description))
+        page.get_by_role("button", name="Save Changes").click()
+        page.get_by_role("link", name="Add Product", exact=True).click()
 
     # ---------------------
     context.close()

จากนั้นจึงลองรันโค้ดดู ถ้าไม่มีอะไรผิดพลาด โปรแกรมก็จะใช้ข้อมูลจากไฟล์ Excel ไปกรอกฟอร์มบนเว็บให้เราจนครบ

การนำไปใช้งานจริง

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

หลีกเลี่ยงการฝังชื่อผู้ใช้และรหัสผ่านไว้ในโค้ด ให้เขากรอกผ่าน prompt หรือหน้า UI แทน
ทำให้ผู้ใช้งานสามารถเลือกไฟล์ CSV/Excel ได้ผ่าน argument ใน command line หรือหน้า UI
แจ้งผู้ใช้ในกรณีที่บันทึกข้อมูลไม่สำเร็จ เช่น รหัสซ้ำ หรืออีเมลถูกใช้ไปแล้ว เป็นต้น
ให้เว็บบราวเซอร์ทำงานในพื้นหลัง โดยเปลี่ยนจาก headless=False เป็น headless=True

สรุป

บทความนี้ได้ชี้ให้เห็นถึงปัญหาเกี่ยวกับการที่ต้องกรอกฟอร์มบนเว็บซ้ำ ๆ พร้อมทั้งแนะนำการเขียนโปรแกรมช่วยกรอกฟอร์มบนเว็บโดยใช้ Python และไรบรารี Playwright ซึ่งจะเป็นประโยชน์กับผู้ที่ต้องกรอกข้อมูลมาก ๆ เป็นประจำบนฟอร์มในหน้าเว็บที่ไม่มี API และไม่สามารถนำเข้าข้อมูลจากไฟล์ CSV/Excel ที่มีอยู่ได้ ภายในบทความมีการแนะนำการใช้งาน Codegen และ generative AI อย่าง ChatGPT, Google Bard, Bing Chat, ฯลฯ เพื่อช่วยให้เขียนโค้ดได้สะดวกยิ่งขึ้น ไม่ต้องเปิดคู่มือบ่อย ๆ และปิดท้ายด้วยข้อแนะนำในการปรับปรุงโปรแกรมเพื่อให้มีความปลอดภัยและง่ายต่อการใช้งาน

Jekyll ต่างจาก WordPress ยังไง น่าใช้ไหม

Mon, 12 Jun 2023 22:47:00 +0700

Jekyll เป็น static site generator (SSG) ที่เขียนขึ้นมาด้วยภาษา Ruby มีไว้สร้างเว็บ ซึ่งก็เหมือน WordPress ที่มีไว้สร้างเว็บเหมือนกัน แล้วซอฟต์แวร์ 2 ตัวนี้แตกต่างกันยังไงนะ

จากที่เคยดูแล WordPress ที่ทำงาน แล้วกลับมาใช้ Jekyll ทำเว็บส่วนตัว ผมคิดว่ามีข้อแตกต่างหลัก ๆ ที่เอามาเปรียบเทียบได้ดังนี้ครับ

หลักการทำงาน

สำหรับ WordPress เราจะเอาเขาไปติดตั้งในที่ที่มี web server, PHP, และ MySQL (อยู่เครื่องแม่ข่ายเดียวกันหรือแยกเครื่องกันก็ได้) ตั้งค่านิดหน่อย แล้วก็เริ่มเขียนบทความได้เลย WordPress จะเอาบทความไปเก็บไว้ในฐานข้อมูล MySQL ให้ พอมีคนเข้ามาอ่านบทความ WordPress ก็จะไปอ่านข้อมูลจากฐานข้อมูลมาแสดง (ยกเว้นว่ามีการตั้งค่าให้ใช้แคช ซึ่งจะไม่พูดถึงในบทความนี้)

ในส่วนของ Jekyll เราจะเขียนบทความหรือหน้าเว็บโดยสร้างไฟล์ที่เขียนด้วยภาษา Markdown เสร็จแล้วค่อยสั่งให้ Jekyll แปลงไฟล์เหล่านั้นให้เป็นหน้าเว็บ พอแปลงเสร็จเราก็จะเอาหน้าเว็บไปวางไว้บน web server (สังเกตว่าเครื่องแม่ข่ายไม่จำเป็นต้องมี PHP และ MySQL เหมือน WordPress)

การใช้งาน

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

กลับมาที่ Jekyll … เอาตรง ๆ เลย ผมว่าใช้งานยากอยู่นะครับ แต่สำหรับคนที่ ถนัด command line, ชอบใช้ Markdown, ชื่นชอบ Git, และมีความสุขกับการแก้ไขปัญหา อาจจะรู้สึกว่าง่ายก็ได้ แต่ผมใช้มาซักพักแล้วก็ยังรู้สึกว่ายากอยู่ดี ลองนึกภาพตามนะครับ

เวลาจะเพิ่มบทความใหม่ ต้องสร้างไฟล์ Markdown ในโฟลเดอร์ _posts โดยตั้งชื่อไฟล์ในรูปแบบ ปปปป-ดด-วว-slug.md หากต้องการระบุ ชื่อเรื่อง หมวดหมู่ แท็ก และ/หรือ รูปประจำเรื่อง ต้องไปเขียนใส่ในสิ่งที่เรียกว่า front matter ที่ด้านบทสุดของไฟล์
พอเขียนบทความเสร็จแล้วจะเผยแพร่ ต้องใช้คำสั่ง jekyll build เพื่อสร้างเว็บ โดยเว็บจะถูกสร้างขึ้นในโฟลเดอร์ _site สำหรับให้เราอัปโหลดขึ้นไปวางบน web server หรือถ้าใช้ GitHub Pages ก็จะง่ายกว่านั้นหน่อย คือเปิดเว็บ/แอป GitHub แล้วสร้างไฟล์ขึ้นมาได้เลย พอเรากด commit ปุ๊บ GitHub Pages ก็จะทำที่เหลือต่อให้เราเองโดยอัตโนมัติ
หากจะแทรกรูปในบทความ ก่อนอื่นต้องนำไฟล์รูปไปวางในโฟลเดอร์ assets/img จากนั้นจึงคัดลอกที่อยู่ไฟล์ไปวางในตำแหน่งที่จะเราแทรกรูป โดยใช้รูปแบบ Markdown ดังนี้ ![คำอธิบายรูป](/assets/img/path/to/your/image.jpg)

ส่วนตัวแล้วคิดว่า Jekyll น่าจะเหมาะกับโปรแกรมเมอร์หรือคนที่พอจะเคยเขียนโค้ดมาบ้างครับ

การปรับแต่งรูปลักษณ์

ใน WordPress เราสามารถปรับแต่งรูปลักษณ์ได้โดยการเปลี่ยนธีม ซึ่งกดดาวน์โหลดติดตั้งจาก WordPress ได้เลย มีให้เลือกหลายพันธีม ส่วน Jekyll จะมีวิธีติดตั้งธีมหลัก ๆ อยู่ประมาณ 3 วิธี ขึ้นอยู่กับธีมที่เราจะใช้ ดังนี้

ติดตั้ง gem ของปลั๊กอินที่จะใช้ แล้วไประบุ theme: <ชื่อธีม> ในไฟล์ _config.yml (ถ้าใช้ GitHub Pages จะติดตั้ง gem เพิ่มไม่ได้ แต่จะมีธีมให้เลือกใช้อยู่จำนวนนึง อย่างตอนที่เขียนบทความนี้ก็มี 13 ธีม ดูได้จากหน้า Supported themes)
ติดตั้งปลั๊กอิน jekyll-remote-theme (ถ้าใช้ GitHub Pages จะมีให้อยู่แล้ว) แล้วไประบุ remote_theme: <ชื่อธีม> ในไฟล์ _config.yml
fork repository ธีมนั้นมาเป็นของเรา

การปรับแต่งเชิงลึก

ปรับแต่งเชิงลึกในที่นี้หมายถึงการแก้ไขโค้ดของโปรแกรมนะครับ

ถ้าใช้ WordPress โดยทั่วไปแล้วมักจะไม่ต้องมานั่งปรับแต่งเชิงลึก เพราะว่าคุณสมบัติค่อนข้างครบถ้วนอยู่แล้ว และถ้าต้องการคุณสมบัติเพิ่มเติมที่ไม่มีใน WordPress เช่น ฟอร์มติดต่อ เว็บบอร์ด ระบบร้านค้า ฯลฯ ก็สามารถเลือกติดตั้งปลั๊กอินจากหน้าของผู้ดูแลเว็บไซต์ได้เลย แต่ถ้าต้องปรับแต่งเชิงลึกจริง ๆ วิธีมาตรฐานคือ การสร้างธีมลูก (ในกรณีที่เราต้องการแก้ไขธีม) หรือการสร้างปลั๊กอิน (ในกรณีที่เราต้องการเพิ่มหรือแก้ไขคุณสมบัติของ WordPress) ซึ่งอาจจะต้องทำความเข้าใจหลักการของ WordPress Hooks และศึกษาฟังก์ชันต่าง ๆ ที่ WordPress มีมาให้เราใช้เพิ่มเติม

ส่วน Jekyll ถ้าเราพอจะมีความรู้เกี่ยวกับ HTML, CSS, และ JavaScript บ้างก็แทบจะเข้าไปแก้ตรง ๆ ได้เลย Jekyll จะใช้ภาษา template ที่ชื่อ Liquid ซึ่งดูแล้วไม่ค่อยยากเลย (ถ้าเทียบกับการต้องไปศึกษากลไกของ WordPress)

ค่าใช้จ่าย

สำหรับ WordPress จำเป็นต้องไปฝากกับผู้บริการ cloud ที่รองรับภาษา PHP และระบบจัดการฐานข้อมูล MySQL ซึ่งจากที่ลองหาดูคร่าว ๆ ที่ถูกที่สุดในขณะที่เขียนบทความนี้ก็คือ 350 บาทต่อปี ซึ่งจะมีเนื้อที่ให้เก็บข้อมูล 100 MB และรับ-ส่งข้อมูลได้เดือนละ 2 GB เหมาะกับเว็บที่มีเนื้อหาน้อย และคิดไว้แล้วว่าจะมีคนเข้าไม่เยอะ หรือถ้าใช้บน WordPress.com ก็จะมีหลายราคาให้เลือก ตั้งแต่ฟรีจนไปถึง 800,000 กว่าบาทต่อปี ซึ่งถ้าเลือกใช้แบบฟรีก็จะมีข้อจำกัดอยู่บ้าง เช่น ต้องแสดงโฆษณาบนหน้าเว็บ ผูกกับชื่อโดเมน (domain name) ไม่ได้ เลือกใช้ธีม/ปลั๊กอินได้อย่างจำกัด เป็นต้น

เรื่องค่าใช้จ่ายนี่เรียกได้ว่าเป็นจุดขายหลักของเว็บที่สร้างด้วย Jekyll เลยก็ว่าได้ ด้วยความที่เป็นแค่ static site ธรรมดา ก็เลยมีบริการฟรีค่อนข้างเยอะ เช่น

หรือในอนาคต ถ้าเกิดว่าบริการข้างต้นไม่ฟรีอีกต่อไป เราก็สามารถรัน Jekyll บนคอมพิวเตอร์ของเราเพื่อสร้างเว็บ แล้วเอาไปฝากกับเว็บโฮสต์ static หรือบริการคลาวด์อย่าง Amazon S3 หรือ Google Cloud Storage ก็ได้ ยังไงค่าใช้จ่ายก็ถูกกว่าเว็บโฮสต์ที่ให้บริการ PHP และ MySQL แน่นอน

สรุป

Jekyll เป็นเครื่องมือที่เอาไว้แปลงไฟล์ Markdown ให้เป็นหน้าเว็บ อาจจะต้องใช้ทักษะเกี่ยวกับ การใช้ command line, Markdown, และ Git ในระดับนึง ไม่เหมือน WordPress ที่คลิก ๆ พิมพ์บทความ แล้วก็ได้หน้าเว็บเลย แต่ก็มีข้อดีคือสามารถนำเว็บที่สร้างด้วย Jekyll ไปวางบนเครื่องแม่ข่ายที่มีเฉพาะ web server ได้ ไม่จำเป็นต้องมีภาษาสำหรับประมวลผลหรือฐานข้อมูล ทำให้มีค่าใช้จ่ายน้อยกว่า

สำหรับคนที่อยากลอง Jekyll สามารถไปอ่านบทความซีรีย์ ทำ Blog ด้วย Jekyll ของคุณเอมได้เลยครับ เขียนไว้ละเอียดมาก อ่านสนุกด้วย

เกี่ยวกับ

Mon, 01 Jan 0001 00:00:00 +0000

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

ค้นหา

Mon, 01 Jan 0001 00:00:00 +0000

หมวดหมู่

Mon, 01 Jan 0001 00:00:00 +0000