การ deploy React Project ขึ้น Github Pages

Github Pages คืออะไร?

ในมุมมองของผมมันก็คือโฮสต์ฟรีที่เอาไว้เก็บเว็บที่ build จาก React ผมนั่นแหละ(สำหรับบทความนี้น่ะนะ) ซึ่งมันสะดวกมากๆ เพราะเราแค่ตั้งค่านิดหน่อยแล้ว push code ขึ้น Github ปกติ แค่นี้เราก็ได้เว็บไซต์ที่ออนไลน์พร้อมใช้งานแล้ว โดยเฉพาะเว็บไซต์ทั่วๆไปที่ไม่ได้ใช้ฟังก์ชันอะไรมากมาย บอกเลยว่า Github Pages ก็เหลือเฟือแล้ว

ตั้งค่าไฟล์ package.json สำหรับการ deploy

ก่อนอื่นเลยก็เปิดไฟล์ package.json ในโปรเจ็คของเราขึ้นมา แล้วก็ใส่ homepage เข้าไปแบบนี้สำหรับแต่ละโปรเจ็ค

  "homepage": "https://myusername.github.io/my-app",

หรือแบบนี้สำหรับหน้าหลักของ Github Pages ของเรา

  "homepage": "https://myusername.github.io",

หรือหากจะตั้งค่าเว็บไซต์ส่วนตัวให้ชี้มาที่ Github Pages ก็ใส่ไปแบบด้านล่างนี้

  "homepage": "https://mywebsite.com",

ติดตั้ง gh-pages สำหรับ deploy script

ส่วนตัวผมใช้ npm มากกว่า yarn ผมก็เลยเพิ่มเข้าไปแบบด้านล่างนี้

npm install --save gh-pages

หลังจากนั้นก็เป็นการตั้งค่าสคริปต์สำหรับ build และ deploy ใน file package.json อันเดิมนั่นแหละ ง่ายๆก็คือเพิ่มสคริปต์ด้านล่างเข้าไป

  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

สำหรับหน้าเพจหลักแก้เพิ่มนิดหน่อยตามนี้(เครื่องหมายลบก็คือลบออก ส่วนบวกก็คือเพิ่มเข้าไป)

  "scripts": {
    "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
+   "deploy": "gh-pages -b master -d build",

จากนั้นก็ build ด้วยการรันคำสั่งด้านล่างนี้

npm run deploy

จากนั้นก็ push โค้ดขึ้น Github ปกติเลยครับ ไม่มีอะไรมาก ขั้นตอนก็ตามด้านล่างนี้เลย

git add .
git commit -m "build and update code"
git push

จากนั้นก็ไปที่หน้า project ใน Github ตรง settings เลื่อนหา GitHub Pages แล้วตั้งค่าเหมือนรูปด้านล่าง เป็นอันจบขั้นตอน

ส่วนการ deploy React Project ไปยัง server ต่างๆ ก็ดูคู่มือเต็มๆได้ตามนี้เลยครับ https://create-react-app.dev/docs/deployment/ มีแทบจะทุกแบบจริงๆ

Leave a comment

Your email address will not be published. Required fields are marked *