ตัวอย่าง To-do list application (Node + DynamoDB + Elastic Beanstalk + Fully CI/CD)

ตัวอย่าง application To-do list แบบง่ายๆด้วย Node โดยใช้ Elastic Beanstalk (EB) เป็น Infrastructure และ DynamoDB เป็นฐานข้อมูล ซึ่งทั้งหมดเป็น Fully CI & CD ที่ทําการ automate deploy ระบบเมื่อมี Change

Repository: https://github.com/howtoautomateinth/awesome-aws-workshop/tree/master/Integration/to-do-app

Simple To-do list application

ตัวอย่างที่อยู่ใน Repository ด้านจะประกอบไปด้วย 5 ส่วนหลักดังนี้

1. เราใช้ CloudFormation ในการสร้าง Infrastructure แน่นอนอยู่แล้ว เพื่อความสะดวกในการจัดการหลายๆๆสิ่งเลย ง่ายต่อการควบคุม
2. การทํางานของ To-do list application จะถูกผูก flow ด้วย CodePipeline ซึ่งเมื่อมีการ Change ใดๆใน SourceCode ของ CodeCommit มันจะ Build ด้วย CodeBuild และ CodeDeploy ไปที่ EB ในทันทีเลย สะดวกมาก
3. มันรองรับการทํางานกับ DynamoDB แบบทั้ง Local และ Production ด้วยการใช้ Docker-Compose กับ Configuration file
4. ส่วนของตัว Application เลือกใช้ Node.js — Web Framework เป็น Express และใช้ Template Engine ของ EJS ซึ่งง่ายและขึ้นรูปได้เร็วมาก
5. Theme Website ก็ใช้ Boostrap เจ้าเก่าที่จัดการพวก Layout ให้เราไว้แล้ว เพราะฉะนั้นไม่เสียเวลาเลยในการตีตารางบนหน้าเว็ป

การจัดการกับ CI/CD

ตัวอย่างการใช้ CodePipeline สําหรับการทํา flow ใช้พวก Source จาก CodeCommit, CodeBuild และ CodeDeploy ของ AWS

สามารดู flow ได้จาก Cloudformation อันนี้ https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/Integration/to-do-app/template.yml

ตัวอย่าง Build Spec ที่ใช้ใน Build Action เพื่อทําการ install npm

https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/Integration/to-do-app/buildspec_nodejs.yml

ซึ่งเราสามารถเขียน test แล้วเพิ่ม phases ในขั้นตอนนี้ได้

การจัดการกับ DynamoDB

เนื่องจากตอน Development เราทําบน Local machine ของเราให้ทุกคนใช้ Docker Compose เพื่อสะดวกในการแยก Environment ของตัวเองออกไปเลย

https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/Integration/to-do-app/docker-compose.yml

และที่เหลือก็คือไป update AWS.config ใน code ของเราเพื่อตั้ง endpoint และ region ให้ไปยัง Local หรือ Production นั้นเอง

https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/Integration/to-do-app/index.js

default region ที่ใช้เป็น us-east-1 ถ้าอยากจะเปลี่ยนไป region อื่นก็เปลี่ยนตรงนี้ แล้ว application จะชี้ไปถูกที่เอง สามารถดูตัวอย่างเพิ่มจากด้านล่างได้ด้วย

Summary

การจัดการกับ Elastic Beanstalk

อย่างที่เคยอ่านบทความเก่าๆที่เกี่ยวกับการจัดการ EB มันคือเรื่องของการ Configuration Environment นั้นเอง

ซึ่งเราใช้ Node.js ในการเขียนโปรแกรม เพราะฉะนั้นเราเลยต้องเลือก Stack Solution จากข้างล่างนี้

Elastic Beanstalk supported platforms

https://docs.aws.amazon.com/elasticbeanstalk/latest/platforms/platforms-supported.html#platforms-supported.nodejs

ที้นี้ Platform พวกนี้มีการเปลี่ยนแปลงตลอดเวลา การใช้ Amazon Linux 2 ก็เช่นกัน มันจะมีผลในเรื่องของรูปแบบ Config ที่เปลี่ยนไป

เราจะใช้ Procfile ในการจัดการสร้าง process ให้กับ application ของเรา

web: node index.js

แต่ถ้าเป็นรุ่นเก่าอย่าง Amazon Linux มันจะเป็น Configuration แบบนี้

https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create_deploy_nodejs.container.html

ซึ่งก็แล้วแต่เราเลือกใช้แต่ใช้ Amazon Linux 2 ไปเลยจะสะดวกกว่าในอนาคตที่มีการอัพเดตต่างๆ

การจัดการกับ AWS SDK — JavaScript น่ารู้

โดยปกติแล้วเวลาเราทําการ interact กับ AWS เราจะใช้ AWS SDK ของแต่ละภาษานั้นๆเข้าไปจัดการกับ Services AWS เช่น บทความนี้เราใช้ DynamoDB ค่อนข้างเยอะ เราก็จะใช้ document ข้างล่างนี้

Class: AWS.DynamoDB

ซึ่งสิ่งที่มันทําก็ไม่มีไรมาก แค่สร้าง Object ของ DynamoDB ขึ้นมาเพื่อนทําการ query, scan หรือได้เลย หรือ อ่านจากด้านล่างนี้อีกรอบก็ไ้ด

AWS DynamoDB

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

DocumentClient ซึ่งเป็นตัวที่ช่วยในการจัดการ DynamoDB ให้ง่ายขึ้น simple มากขึ้นโดยการแปลง AttributeValues ให้อยู่ในรูปของ JavaScript นั้นเอง

Class: AWS.DynamoDB.DocumentClient

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB/DocumentClient.html#get-property

แต่ถ้าเป็น DynamoDB object ตรงๆมันจะเป็นแบบด้านล่างคือต้องใส่ AttributeValues แบบเต็มๆและวุ่นวายไม่สะดวกมากๆ

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB.html#getItem-property

แล้วก็เราสามารถใช้ Async/Await ใน JavaScript SDK ได้ด้วย

Calling Services Asychronously

ในบางตัวอย่างและ Stackoverflow จะมีบางส่วนบอกว่าใช้ไม่ได้ แต่นั้นอาจจะเป็น Version เก่านั้นเอง แต่ถ้าในกรณีไม่ได้เราสามารถใช้ JavaScript Promise ในการจัดการ โดยการเรียน Promise Object แล้วก็ then กับ Object นั้นๆนั่นเอง

Using JavaScript Promises

วิธีการ run To-do list application

โปรเจคนี้เขียนด้วย VSCode เพราะฉะนั้นหลักๆของมันจะขึ้นกับ Launch.json ซึ่งจะมี Debug configuration ชื่อ Todo App ไว้ให้อยู่แล้ว เพราะฉะนั้นถ้าจะ run local ก็สามารถ สั่ง run ได้เลย

https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/.vscode/launch.json

แต่ก่อนหน้านั้นต้อง Start docker-compose ที่เป็น local database ในเครื่องเรา

https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/Integration/to-do-app/docker-compose.yml

และตั้งค่า config/default.json ซึ่งเป็น configuration file สําหรับ node ไว้ก่อน โดย default project จะตั้งเป็น Local mode อยู่แล้ว ถ้าจะ deploy ของตัวเองค่อยไปเปลี่ยน dbConfig.mode เป็น prod แค่นั้นก็จะใช้งานได้

https://github.com/howtoautomateinth/awesome-aws-workshop/blob/master/Integration/to-do-app/config/default.json

โดยหลักๆมีประมาณนี้ ขอให้สนุก! ลองแก้ไขและปรับไปใช้กับตัวเองได้เลย

PS: ตัวอย่างนี้เราใช้ Express middleware ในการ query DynamoDB list ทุกครั้งก่อนที่จะ render template เพื่อที่ให้ในหน้า application จะได้มี items โชว์ตลอดเวลา

Writing middleware for use in Express apps