Deploy React แบบ multi path ใน domain เดียวกัน แต่คนละ port โดย nginx !!!?

ฝั่งซ้ายจะเป็น react แบบ root path “/”
ฝั่งขวาจะเป็น react แบบ sub path “/cms”

มาเริ่มกันเลย!!!

1. Project root path

npx create-react-app workshop //สร้าง project โดยใช้ create-react-app
cd workshop // เข้า project
npm install react-router-dom //ลง package react-router-dom ใช้สำหรับกำหนด route

1.1 กำหนด Dockerfile

1.2 กำหนด nginx.conf

1.3 Copy code ด้านล่างนี้ไปใส่ใน App.js

1.4 Docker run

docker build -f Dockerfile -t workshop:1.0.0 . //build docker image
docker run -d -p 7000:80 //docker run project port 7000

2. Project sub path

npx create-react-app workshop-cms //สร้าง project
cd workshop-cms // เข้า project
npm install react-router-dom //ลง package react-router-dom ใช้สำหรับกำหนด route

2.1 กำหนด Dockerfile

2.2 กำหนด nginx.conf

2.3 Copy code ด้านล่างนี้ไปใส่ใน App.js

2.4 เพิ่ม “homepage”

homepage เพื่อกำหนด path static file

เมื่อ build สำเร็จ สังเกตที่ build/index.html จะไปเรียกใช้ของใน build/cms/static

2.5 เพิ่ม “postbuild”

postbuild คือ หลังจาก build เสร็จแล้วจะมาทำตาม script ที่เขียนไว้ใน postbuild
ซึ่งนอกจาก post แล้ว ยังมี pre คือ จะเป็น script ที่รันก่อน build นั่นเอง

line 6
mkdir -p build/cms คือ การสร้าง directory build/cms
mv build/static build/cms/static คือการย้าย build/static ให้ไปอยู่ใน build/cms/static

2.6 Docker run

docker build -f Dockerfile -t workshop-cms:1.0.0 . //build docker image
docker run -d -p 7001:80 //docker run project port 7001

3.config nginx

3.1 Coppy ด้านล่างไปไว้ใน config nginx

ในตัวอย่างกำหนดดังนี้
“/” ให้ใช้ port 7000
“/cms” กำหนดให้ใช้ port 7001

3.2 รัน save nginx

nginx -t //เทส nginx
nginx -s reload //save nginx

หากไม่มีอะไรผิดพลาดก็จะได้ตามรูปด้านล่างนี้

สรุป

หวังว่าบทความนี้จะเป็นประโยชน์กับ dev ทุกคนนะครับ
หากผิดพลาดประการใด ต้องขออภัยมา ณ ที่นี้ด้วยครับ