React

React for Web: วิธีการ Deploy แบบไม่ได้อยู่ที่ server root โดยตรง และมี relative path

เรื่องที่เกี่ยวข้อง - , ,

สำหรับพวกเราที่ได้ใช้งาน 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 แล้วครับ

อ้างอิง – Create React App – Building for Relative Path

Loading Facebook Comments ...

Leave a Reply

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

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu