สำหรับพวกเราที่ได้ใช้งาน React จากหลักสูตรเรียนรู้เริ่มต้น React & Redux ไป จะมีขั้นตอนการ Deploy ตัว Web Application ที่เราจะใช้คำสั่ง npm run build ในการสร้างชุดไฟล์ที่สามารถเอาไปไว้ใน server ได้
ซึ่งขั้นตอนนี้จะใช้งานได้ตามปกติ จนกระทั่ง…
เราต้องเอา Application ของเราไปไว้ใน relative path แทนที่จะเป็น server root แบบชาวบ้านเขา!
ความแตกต่างในการเข้าถึง React Application ที่ server root และ relative path
ตรงนี้บางคนอาจจะสงสัยว่า การ deploy ไปที่ server root นั้นแตกต่างจาก relative path ยังไง มาลองดูตัวอย่างกันครับ
ด้านล่างคือ url แบบ server root ที่เราสามารถเข้าถึงและเรียกใช้ไฟล์ index.html ที่ได้จาก คำสั่ง npm run build
https://www.nextflow.in.thส่วนแบบที่เข้าถึงผ่าน relative path จะเป็นแบบด้านล่าง
https://www.nextflow.in.th/react-app
https://www.nextflow.in.th/react-app/gamesซึ่ง create-react-app จะคาดการณ์ว่า เวลาเราเอาแอพไปใช้ จะเป็นแบบ server root! ทำให้เวลาเราเอา React Application ไปใช้ในแบบ relative path ทำให้ router โยนเรากลับไปที่ server root ทุกครั้งแทน
วิธีแก้ปัญหา
ทีมงาน create-react-app คิดไว้แล้ว เลยเตรียมวิธีการแก้ไขปัญหา ผ่านไฟล์ package.json ครับ
โดยการเพิ่มค่าด้านล่าง ลงไปในไฟล์ package.json และกำหนดค่าที่มี relative path ที่เราจะเอา React application ไป deploy
"homepage": "http://mywebsite.com/relativepath",เท่านี้ ตอนสั่ง npm run build ก็จะมีการตั้งค่า Relative Path ดังกล่าว เป็นค่าอ้างอิง root path ของตัว React Application แล้วครับ