Devahoy - สอนทำเว็บไซต์ด้วย Node.js, Express และ MongoDB ตอนที่ 10

สวัสดีครับ มาต่อกันที่ตอนที่ 10 กันนะครับ (น่าจะ ตอนสุดท้ายแล้วครับ ก่อน Workshop) สำหรับตอนนี้จะพูดถึงเรื่องของการ Deploy Production หรือการ Hosting โปรเจ็คของเราครับ โดยใช้ Digital Ocean เป็นเครื่อง Hosting ของเรานั่นเอง

เนื้อหาบทเรียน

สำหรับบทนี้ เราจะใช้ Project จาก ตอนที่แล้วกันนะครับ เนื่องจากว่า ขั้นตอนนี้อาจจะไม่ได้ coding อะไรเพิ่มเติมมาก ส่วนใหญ่ก็จะเป็นการ Config แล้วก็มี command line เพื่อ upload project ของเรา

Prerequisite

รู้จักกับกับ Git เบื้องต้น สามารถ clone / push / pull ได้
สามารถใช้ Command line เบื้องต้น รู้จัก ssh

เตรียมโปรเจ็ค

เริ่มต้น เราทำการเตรียมโปรเจ็คจากบทความที่แล้วครับ หรือ Clone ได้จาก Repo ด้านล่างเลย เลือก part9/ahoy-node-passport นะครับ

git clone https://github.com/Phonbopit/node-express-tutorial

Source Code

เมื่อได้ Project มาแล้ว เราจะใช้ตัวนี้ในการ Deploy กัน

Deploy ด้วย Heroku

วิธีแรก เป็นการ Deploy เว็บของเราด้วยการใช้ Heroku ครับ ข้อดีคือ มันฟรีนั่นเอง เริ่มต้นด้วยการสมัครบัญชีของ Heroku กันก่อน

ทาง Heroku มีบทความวิธีการเริ่มต้นใช้งานร่วมกับ Node.js เขียนไว้อยู่ครับ สำหรับคนติดปัญหา สามารถไปอ่านเพิ่มเติมได้ครับ https://devcenter.heroku.com/articles/getting-started-with-nodejs

การ Deploy Heroku เราจำเป็นต้องมี Heroku CLI และ Git บนเครื่องเรานะครับ

ติดตั้ง Heroku CLI ผ่าน Homebrew กันครับ (หรือดาวน์โหลดแบบ .pkg ก็ได้ https://cli-assets.heroku.com/heroku.pkg)

brew install heroku/brew/heroku

ส่วน Windows หรือ Linux สามารถติดตั้งได้จาก Link นี้ครับ https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

เมื่อเราติดตั้ง Heroku เรียบร้อยแล้ว เราจะสามารถรันคำสั่ง ผ่าน Terminal ได้เลย เช่น

heroku login

เพื่อทำการ Login ผ่าน Terminal โดยจะมี Popup ให้เรายืนยันอีกทีบน Browser ครับ เมื่อเรา Login เรียบร้อยแล้ว เราจะสามารถจัดการ Appliaction ต่างๆได้ผ่าน Terminal เลย (หรือบางคนชอบ UI ก็จัดการผ่าน Dashboard ของ Heroku ปกติครับ)

Create App with Heroku CLI

ไปที่โปรเจ็คของเรา โฟลเดอร์ ahoy-node-passport จากนั้น ทำการรัน

git init

เพื่อสร้าง Git repo ขึ้นมาก่อน (อย่าลืม gitignore node_modules ด้วยนะครับ)

ต่อมารันคำสั่ง

heroku create

หรือกรณีที่เราลืม Login หรือ Login ไม่ถูกต้อง ตัว CLI ก็จะฟ้องให้เรา Login ครับ

Creating app... done, ⬢ vast-inlet-65557
https://vast-inlet-65557.herokuapp.com/ | https://git.heroku.com/vast-inlet-65557.git

เมื่อสร้างเสร็จ เราจะได้ App และได้ URL แบบด้านบน นั่นเท่ากับว่าเรามี web แล้วครับ แต่ๆ เรายังไม่มี source code เลย

ทำการอัพ Source Code ของเราไปที่ Heroku ด้วยคำสั่ง

git push heroku master

หมายถึงเรา push code ไปที่ remote ที่ชื่อว่า heroku ด้วย branch master (ปกติเป็น origin)

remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 26.9M
remote: -----> Launching...
remote:        Released v3
remote:        https://vast-inlet-65557.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/vast-inlet-65557.git

ลองเข้า url ที่ทาง Heroku ให้มา (เป็น subdomain) จะเห็นว่าเราได้หน้าเว็บแล้วครับ

ทีนี้ลอง Login หรือ Register ดูว่า ได้มั้ย?

เอ๊ะ เว็บยังใช้ไม่ได้นี่นา

วิธีการดู Log

เราสามารถดู Log ได้โดยใช้คำสั่ง (จากโฟลเดอร์โปรเจ็คเรา)

heroku logs

หรือ

heroku logs --tail

ทีนี้เราก็จะเห็น Error เกี่ยวกับ Connect MongoDB ก็แน่นอน ตัว Heroku เป็นแค่ Hosting ครับ เค้าไม่ได้มี MongoDB ให้เรา เราก็ต้องใช้ MongoDB จากที่อื่น

สิ่งที่เราต้องทำคือ ใช้ Add-on ของ Heroku ครับ ไปที่ https://dashboard.heroku.com/apps จากนั้นเลือก App ของเราครับ

เลือก Configure Add-ons ครับ ตรงช่อง Add-ons ให้เราพิมพ์หา MongoDB เราจะได้เป็น mLab MongoDB ครับ (เป็น MongoDB Provider เจ้านึง) เราสามารถใช้แบบ Sandbox - Free ได้ครับ กด Provision

จากนั้นไปที่ Settings ครับ ตรง Config Vars เลือก Reveal Config Vars เราจะเห็น Configuration variables ชื่อ MMONGODB_URI ก็คือ url ที่ใช้ connect MongoDB แบบ connection string แทน localhost นั่นเอง

กลับไปที่โปรเจ็คเรา ที่ไฟล์ db.js เปลี่ยนจาก localhost เป็น mLab ซะ ด้วย process.env ครับ จาก

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/ahoy-node-passport', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

เป็น

const mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

แล้วลอง Deploy ใหม่

git commit -am 'Update MongoDB url'
git push heroku master

เราก็จะสามารถใช้งาน Node.js ได้แล้วครับ แถมมี MongoDB จาก mLab ที่สร้างผ่าน Heroku Dashboard ได้แบบง่ายๆเลย

ทีนี้สุดท้าย ปกติตัว Heroku จะ start ด้วย npm start ปกติอยู่แล้ว แต่ถ้าเราอยากให้ Heroku start ด้วยคำสั่งอื่น เราสามารถใช้ Procfile ได้เช่นกันครับ

และ port ที่ Heroku ใช้รัน จะต้องเข้าถึงผ่าน process.env.PORT นะครับ หากใครใช้การกำหนด port แบบ hard code ก็อย่าลืมเปลี่ยนด้วยนะครับ ไม่งั้นจะ start server ไม่ขึ้น

สรุป

ก็บทความนี้เป็นการ Deploy ด้วย Heroku ครับ เป็น Hosting ที่เราสามารถ Deploy งานของเราได้แบบง่ายๆเลย ไม่ต้องเสียตังครับ (แบบฟรี ก็พอที่เราจะรัน Demo หรือทำเว็บเล็กๆได้เหลือเฟือครับ) เมื่อแอพมีขนาดใหญ่ หรือมีคนเข้าใช้เยอะ เราเริ่มมองเรื่อง Performance ก็ค่อยๆขยับขยายๆ ก็ยังได้ครับ

และ Tutorial ชุดนี้ ผมก็หวังว่าเพื่อนๆ พี่ๆ น้องๆ ที่เข้ามาอ่าน จะได้รับความรู้ มองเห็นภาพ มากขึ้น สามารถนำไปต่อยอด ทำ Node.js Application ของตัวเองได้นะครับ

ซึ่งการ Deploy จริงๆ แล้วมันมี Option เยอะแยะมากมาย ตัว Heroku ก็เป็นเพียงแค่หนึ่งใน Option ในอนาคต ผมจะพยายามยก ตัวอย่างการ Deploy แบบอื่นๆ มาให้ดูครับ

สุดท้าย หากเพื่อนๆ ที่มาอ่าน อย่าลืมติดตาม Youtube Devahoy ผมด้วยนะครับ และตัว Tutorial ชุดนี้ ผมก็ทำลง Youtube ตามหลังบทความเช่นกันครับ และอาจจะมีเนื้อหาเยอะกว่าด้วย เพราะว่าเวลาพูด มันสามารถบอกรายละเอียดได้เยอะกว่า (หรือว่าจะมีแต่น้ำนะ ฮ่าๆ)

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

ขอบคุณครับ

❤️ Happy Coding