DigitalOcean Spaces with React and Express แบบงูๆปลาๆ

สวัสดีครับนี่เป็นการเขียน Medium ครั้งแรกของผมหวังว่าจะมีประโยชน์กับผู้ที่กำลังเริ่มใช้เจ้า DigitalOcean Spaces นะครับ

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

Spaces คืออะไร ?

Spaces คือหนึ่งในบริการของ DigitalOcean ที่สามารถให้เราเข้าไปเก็บไฟล์ได้เยอะๆได้ตั้งแต่ รูป วิดีโอ ไฟล์ต่างๆ โดยที่เขาได้บอกไว้ว่า Spaces นั้นคือ Object stage (Object storage คืออะไร) โดยการส่งข้อมูลนั้นจะถูกทำให้มีความปลอดภัยอยู่แล้วโดย HTTP (Docs ของ Spaces)

โดยที่การใช้ครั้งแรกเขาจะให้เรามาฟรี2เดือน !!!

ส่วนตัวที่ชอบเพราะ UI มันสวยดีอิอิอิอิ

เข้าเรื่องเลยดีกว่าสิ่งแรกที่เราต้องมีคือ Spaces

เมื่อLOGIN เข้ามาก็ลองมาสร้าง Spaces เลย

อันล่างสุดเลยยยยยย

เลือก region ผมเลือกเป็น Singapore เพราะใกล้สุดแล้ว

หน้าต่างกรอกข้อมูล

ใส่ข้อมูลอะไรให้เรียบร้อย

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

เก็บกันสนุกสนานลั้นลาครุคริครุคริ
โฟลเดอร์ Demo ที่อ้างว้างและโดดเดี่ยว

ต่อไปมาเราก็มาที่ tab API และไปที่ส่วนของ Spaces access keys และตั้งชื่อ Key และกด

กดเครื่องหมายติ๊กถูกก็จะได้ key กับ secret key มา

secret key จะหายไปในภายภาคหน้าต้องเก็บไว้ดีๆนะ

ต่อมาก็มาโค้ดกันนนนนนน

แน่นอนคือ React กับ Express ซึ่งเป็น Framework ของ NodeJS

ผมจะสร้างโปรเจคของ React ขึ้นมาก่อนโปรเจคหนึ่งเอาเป็นชื่อว่า spaces-site แล้วกัน โดยใช้คำสั่ง

$ create-react-app spaces-site

ใช้คำสั่งสร้างโปรเจคมา

ต่อมาก็สร้างโปรเจคของส่วนหลังบ้านคือ Express โดยผมจะขอทำตาม step ของการ install ตาม Getting stared ของตัว Epress เองโดยสามารถอ่านได้ที่นี่

$ mkdir spaces-api
$ cd spaces-api
$ npm init
$ npm install express — save

กลับมาที่โฟลเดอร์ spaces-site ของเรา
ลอง run โดยใช้คำสั่ง npm start ก็จะได้ดังภาพ

หน้าที่คุ้นเคย

โดยที่ผมจะติดตั้งเจ้า axios เพิ่มเพื่อใช้ยิงไปหาเจ้า API ของเรากัน

$ npm install axios -s

ก่อนอื่นผมจะสร้างไฟล ์axios.js ไว้ในโฟลเดอร์ที่สร้างมาชื่อ src/lib

และใส่โค้ดนี้เข้าไป

เพื่อที่เวลาเราเรียกใช้เราจะได้เรียกใช้ได้ง่ายๆและเมื่อเราแก้เจ้าตัว axios.defaults.baseURL = “BLABLABLA”
เราก็แก้แค่ที่เดียวไม่ต้องแก้ทุกที่

มาถึงเวลาเรามาลองเขียนโค้ดง่ายๆเพื่อรองรับการส่งไฟล์ไปหาตัว API

ตัวโค้ด
หน้าตาประมาณนี้

เมื่อเรามาดู console.log
หลังจากที่ลองเลือกไฟล์และกด Submit

พักตัว site ไว้ก่อนแล้วเรามายุ่งทางฝั่ง API มั่ง

ขั้นแรกผมจะสร้างไฟล์ app.js ในโฟลเดอร์ของตัว spaces-api และพิมพ์โค้ดตามนี้เพื่อลองว่าใช้ได้หรือไม่

โดยลองใช้คำสั่ง

$ node app.js

และจะได้ผลลัพธ์

โดยสิ่งที่เราต้องลงจะมี

- aws-sdk
- cors
- multer
- multer-s3

ก็จัดการ npm install ให้เรียบร้อย

และจัดการพิมพ์โค้ดประมาณนี้

มาลองกันนนนน

กด choose file แล้วกด SUBMIT เลยยยยยยยยยยยยย

เจ้ากุ้งงงงง

ผลลัพธ์

บะเอ้กกกกกกกกกกกกกกก

ไหนลองมาดูทางเจ้า Spaces ของเราหน่อย

มีไฟล์เข้าด้วยแหละ

ที่มี3ไฟล์เพราะลองก่อนหน้านี้กันเหนียว5555

โดยเราสามารถเอาเมาส์ชี้ไปที่ไฟล์และกด copy url ไปใช้ได้เลยแต่ในส่วนของโค้ดที่ผมพิมพ์ไปนั้นผมให้เจ้าหลังบ้านส่งข้อมูลที่ได้มาจากการอัพโหลดไฟล์ของ Spaces โดยจะอยู่ใน req.file.location หลังจากนั้นทางฝั่งของหน้าบ้านก็เอา response มาดูว่าเจ้า pathคืออะไรและนำมาใช้นั่นเองครับ

จบแล้วครับกับการทำ upload file โดยใช้ React และ Express แบบคร่าวๆหากผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วยครับ

ด้วยรักและยางลบ Patis Jongsiriwanich

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade