เรียกใช้งาน gRPC service ผ่าน web browser กัน

อ่านบทความเรื่อง มาทำ gRPC Service ด้วย Go กัน ดูแล้วน่าสนใจดี
ก็เลยคิดว่า น่าจะลองเรียก gRPC service จากฝั่ง web browser กันหน่อย
นั่นคือการเรียกใช้งานผ่าน gRPC Web นั่นเอง
ดังนั้นมาลองดูกันหน่อย

ก่อนอื่นต้องเข้าใจ gRPC Web

เนื่องจาก gRPC นั้นจะทำการสื่อสารกันบน HTTP 2
แต่การติดต่อสื่อสารบน web browser นั่นจะเป็น HTTP 1 เท่านั้น
สิ่งที่ต้องการคือ ตัวกลาง หรือ Gateway/Proxy นั่นเอง
ทำหน้าที่แปลง request จาก HTTP 1 ไปเป็น HTTP 2 แล้วทำการแปลงกลับ
นี่คือหน้าที่หลักของ gRPC Web นั่นเอง
ที่สำคัญตอนนี้อยู่ในสถานะที่สามารถนำขึ้น production ได้แล้ว
ส่วนตัวที่อยู่ตรงกลางจริง ๆ มันชื่อว่า Envoy

ปล. ตอนนี้  gRPC Web มี library ให้ใช้เพียงภาษา JavaScript เท่านั้น
ส่วนภาษาอื่น ๆ เช่น Python และ Java ต้องรอไปก่อน

โครงสร้างของการทำงานเป็นดังนี้

• ส่วนที่ 1 เป็นระบบ Web app ที่ทำงานบน web browser (Frontend) จะใช้งาน library gRPC web สำหรับส่ง request ไปยัง Gateway/Proxy
• ส่วนที่ 2 Gateway/Proxy เป็นตัวแปลง request จาก HTTP 1 ไปยัง HTTP 2 โดยในส่วนนี้จะมีความสามารถคล้าย ๆ กับ API Gateway นั่นเอง จากภาพใช้ใช้งาน Envoy
• ส่วนที่ 3 เป็น  gRPC service นั่นเอง หรือ service การทำงานของระบบงาน (Backend)

เพื่อไม่ให้เสียเวลามาพัฒนาระบบงาน Ping-Pong กันดีกว่า
ซึ่งจากบทความที่อ้างอิงไปข้างต้นอธิบายแล้ว
ดังนั้นในบทความนี้จะอธิบายในส่วนที่ 1 และ 2 เท่านั้น

ส่วนที่ 1 คือระบบ web app ที่พัฒนาด้วย React

ตามจริงใช้ JavaScript ปกติก็ได้นะ
ในส่วนนี้ไม่มีอะไรมาก เป็นการสร้าง web app ปกติ
แต่สิ่งหนึ่งที่ต้องทำก่อนคือ

การ generate code JavaScript สำหรับการเรียกใช้ gRPC ผ่าน JavaScript

ผ่านคำสั่ง protoc นั่นเอง
แต่ต้องติดตั้ง protoc-gen-grpc-web ก่อนด้วย 
เป็น plugin สำหรับการ generate JavaScript code ของ protoc ดังนี้

[gist id="328d992a416132843b1b52820591cda7" file="ping_pong.proto"]

ผลที่ได้คือ สร้างออกมา 2 ไฟล์คือ

• ping_pong_grpc_web_pb.js
• ping_pong_pb.js

ปล. จะเกิด error ในไฟล์ ping_pong_pb.js เพราะว่า aslant นะ
ดังนั้นแก้ไขด้วยการ disable ด้วยการเพิ่ม /* eslint-disable */ ในไฟล์ ping_pong_pb.js
เพียงเท่านี้ก็แก้ไขได้แล้ว

ต่อมาเขียน code เพื่อเชื่อมต่อไปยัง Envoy

ตรงนี้อยู่ที่การออกแบบว่า ฝั่ง frontend จะเรียกมายัง Envoy ที่เครื่องอะไร port อะไร จากนั้นก็ทำการไปเรียก gRPC อีกต่อ
เป็นเหมือน middleware หรือพวก API gateway นั่นเอง
โดยที่ในตัวอย่างจะเรียกไปที่ Envoy ซึ่ง run ด้วย port 9999
สามารถเขียน code การเชื่อมต่อได้ดังนี้

[gist id="328d992a416132843b1b52820591cda7" file="App.js"]

ส่วนที่ 2 Gateway/proxy ซึ่งใช้งานผ่าน Envoy

โดยตัว Envoy นี้ถูกเรียกจากฝั่ง web browser
ดังนั้นจำเป็นต้องเปิด CORS ด้วย
รวมทั้งระบุว่า ให้ส่ง request มาด้วย HTTP method อะไรได้บ้าง
รวมถึงชื่อใน HTTP Header ที่สนับสนุนอีกด้วย
ตัวอย่างของการ config Envoy เป็นดังนี้

• Port ของ Envoy คือ 9999
• Port ของ gRPC service คือ 9090

[gist id="328d992a416132843b1b52820591cda7" file="envoy.yml"]

ในตัวอย่างจะทำการ run ผ่าน Docker 

จึงต้องสร้าง Dockerfile สำหรับสร้าง image ที่เราต้องการใช้งานตาม config จากไฟล์ข้างต้น

[gist id="328d992a416132843b1b52820591cda7" file="Dockerfile"]

run ด้วยคำสั่ง

[code] $docker build -t gateway . $docker run -d --rm -p 9090:9090 gateway [/code]

ส่วนที่ 3 คือการสร้าง gRPC service

ในส่วนนี้ไม่มีอะไรมาก เขียนด้วยภาษาอะไรก็ได้ 
โดยตัวอย่างที่ใช้คือ NodeJS ดังนี้ ใช้ gRPC library นั่นเอง

[gist id="328d992a416132843b1b52820591cda7" file=“service.js"]

เมื่อทุกอย่างเรียบร้อย ก็ run สิครับ

จะแสดงใน web browser ดังรูป เป็นอันเสร็จสิ้นกรรมวิธี
ของการเรียกใช้งาน gRPC service ผ่าน web browser

ลองดูครับ แนวคิดใหม่ ๆ น่าสนุกดี

ตัวอย่าง code ที่ลองทำดูอยู่ที่ GitHub:Up1

Reference Websites

• https://blog.envoyproxy.io/envoy-and-grpc-web-a-fresh-new-alternative-to-rest-6504ce7eb880
• https://medium.freecodecamp.org/how-to-use-grpc-web-with-react-1c93feb691b5