Nuxt.js Fundamental ตอนที่ 9 - การ Deploy Nuxt.js

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

สำหรับตอนนี้เป็นการ Deploy โปรเจ็ค Nuxt.js ของเรากันครับ

การ Deploy เราจะมี 2 แบบครับ คือ

• Server Side - เราจำเป็นต้องใช้ Hosting ที่รองรับ Node.js เช่น VPS, Digital Ocean, Heroku หรือ Vercel เป็นต้น
• Client Side - วิธีนี้ ขอแค่ Hosting รองรับ static files ก็ deploy ได้หมด ไม่ว่าจะเป็น Github Pages, Netlify, Firebase Hosting, Surge

และสำหรับการ Deploy แบบ Client Side ก็จะมี 2 mode คือแบบ

1. SPA (Single Page Application) - ใช้ Vue Router ในการทำ route ฝั่ง client โดย fallback ไปอ่านที่ index.html
2. SSG (Static Site Generator) - เป็นการ Build และ Export เป็น static files เพียวๆ ต่างจากแบบ SPA ที่เป็น routing ด้วย Vue Router แต่แบบนี้คือ ทุกๆหน้าจะเป็น HTML เลยครับ

Deploy ไป Netlify

ทำการ Login เข้าระบบของ Netlify ก่อนครับ จากนั้นทำการ Create new site จาก Github, Gitlab หรือ BitBucket ก็แล้วแต่เราเลยครับ

เราจะลอง Deploy โหมด Static กันก่อน

โดย nuxt.config.js ก็กำหนดแบบนี้ครับ

1
export default {
2
  target: 'static'
3
}

และ Netlify กำหนดแบบนี้ครับ

• Branch to deploy : เลือก master
• Build command: ใช้คำสั่ง npm run generate เพื่อ build และ generate static files
• Publish directory: ใช้ dist เพื่อระบุ folder ที่เป็น output ของ generate static files

หรือถ้าหากเราอยาก Deploy แบบ SPA ก็กำหนดแบบนี้ครับ

โดย nuxt.config.js เปลี่ยน mode เป็น spa

1
export default {
2
  mode: 'spa'
3
}

• Branch to deploy: master
• Build command: สั่งแค่ npm run build พอครับ เพื่อ build production
• Publish directory: ได้ dist เช่นกันหลังจาก build

Deploy ไป Github Pages

สำหรับวิธีนี้เราต้องมี repository ของ github โดยเลือกได้ 2 แบบครับ แบบ user หรือแบบ project ถ้าแบบ user คือต้องตั้งชื่อ username.github.io เป็นชื่อ repo นะครับ แต่ถ้าแบบ project ก็ไม่มีปัญหาอะไร

สำหรับแบบ project มันจะเปรียบเสมือนเรา deploy ไป subfolder ครับ ฉะนั้น เราต้องไปแก้ไข router.base ใน nuxt.config.js ด้วยนะครับ

1
router: {
2
  base: '/your_repository'
3
}

สำหรับการ deploy github page เราจะใช้ push-dir

npm install push-dir --save-dev

เราจะ generate เป็น Static ฉะนั้นก็เลือก target เป็น static

1
export default {
2
  target: 'static'
3
}

สุดท้าย nuxt.config.js จะได้แบบนี้

1
export default {
2
  target: 'static',
3
  router: {
4
    base: '/<repository-name>/'
5
  }
6
}

จากนั้นแก้ไฟล์ package.json โดยเพิ่ม script deploy ลงไปเพื่อ deploy โดยใช้ branch gh-pages

1
{
2
  "scripts": {
3
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
4
  }
5
}

จากนั้นรัน

npm run generate
npm run deploy

เป็นอันเรียบร้อย!

Deploy ด้วย Heroku

ขั้นตอนนี้เราจะ Deploy โดยใช้ Heroku กรณีที่เราอยากให้มันรันแบบ Server side rendering ครับ และตัว Heroku default มันก็จะรัน npm start ให้อัตโนมัติ เราไม่ต้องไปกำหนดค่าต่างๆ (Procfile) ใดๆ เลย

วิธีการใช้งาน ก็คือจะต้องมี Heroku CLI นะครับ ไม่มีก็ติดตั้งตาม Link เลย

จากนั้นทำการ Create new app

จากนั้น ก็เข้าไปดู Tab Deploy จะมีวิธีการ Deploy โดยใช้ Heroku CLI แบบนี้

heroku login

heroku git:remote -a <YOUR_APP_NAME>

git add .
git commit -am "deploy to heroku"
git push heroku master

หรือหากใครอยาก Deploy โดยใช้ Git ก็เพียงเชื่อมต่อ Github จากนั้น เราก็แค่เพิ่ม remote ให้เป็น github และ push ไป master ครับ

git remote add origin <YOUR_GITHUB_REPO>
git push origin master

สุดท้าย เข้าไปกำหนด environment variable ใน Setting -> Config Vars ครับ

• HOST ใช้เป็น 0.0.0.0
• NODE_ENV ใช้เป็น production

เป็นอันเรียบร้อย

Reference: How to deploy on Heroku?

Hints & Questions?

• เราสามารถรัน universal บท static hosting ได้มั้ยนะ?
• ลองทำให้มัน deploy แบบ auto โดยใช้ Github Action หรือ CI/CD อื่นๆ ดูครับ จะได้ไม่ต้องรันสคริปเองทุกครั้งที่อยากอัพเดทข้อมูล
• ลองใช้ Vercel / Firebase Hosting / Surge / Render หรือ Amazon S3 เป็นตัวเลือกอื่นๆ สำหรับ Hosting ดูครับ

อ่านบทถัดไป 👉 ตอนที่ 10 - การทำ Internal API และ Middleware