Deploy VueJS Project in Nginx
หลายท่านอาจยังไม่รู้ว่าการ Deploy VueJS Proejct ใน Nginx นั้นง่ายแสนจะง๊ายยยย เลยทำให้บทความนี้สั้นแสนสั้นน มาลุยกันเลย
เตรียมโปรเจค VueJS ให้เรียบร้อย
- จะสร้างใหม่ หรือ โปรเจคที่มีอยู่แล้วก็ได้
Build VueJS Project
- yarn build
- npm run build
หลังจาก Build เรียบร้อย ให้ทำการรันคำสั่ง Docker ข้างล่างนี้
docker run --name tmp-nginx-container -v $(pwd)/dist:/usr/share/nginx/html:ro --rm -p 80:80 nginxคำสั่งนี้จะทำการ ก๊อบปี้ไฟล์ที่เราทำการ Build เสร็จเรียบร้อยใน directory dist/ ไปไว้ใน directory nginx/html
*เหตุผล ที่ผมเลือกใช้ Docker เพราะมันง่ายมากกก ผมไม่ต้อง install nginx เลยสักกะนิด มาเริ่มหัดใช้งานมันทีละเล็กละน้อย เดียวก็ชิน…
ลองเข้าดู http://localhost ดูครับ
Hoolay✌ เรียบร้อยแค่นี้ ง๊ายเกิ๊น
แต่เดี๋ยวก่อน……
ถ้าเราใช้ Vue Router ในโหมด History มีสิ่งหนึ่งที่เราต้องไปแก้ไขคือไฟล์ config ของ nginx เพราะถ้าเราไม่ไปแก้ไข ตอนกด refresh จะเจอ 404 error
มาดูสิ่งที่ต้องแก้ไขด้านล่างกัน
Before
server {
listen 80;
server_name localhost;location / {
root /usr/share/nginx/html;
index index.html index.htm;
}error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
After
server {
listen 80;
server_name localhost;location / {
try_files $uri $uri/ /index.html;
}error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
สุดท้ายอย่าลืม reload nginx, กด ctrl + c หรือ cmd + c ให้ออกมาจาก command ของ Docker ที่เรารันค้างไว้อยู่ แล้วรันคำสั่งใหม่
docker run — name tmp-nginx-container -v $(pwd)/dist:/usr/share/nginx/html:ro -v $(pwd)/default.conf:/etc/nginx/conf.d/default.conf:ro — rm -p 80:80 nginxสิ่งที่ทำการแก้ไขคือ ทำการเขียนทับไฟล์ config default ของ nginx เป็นของเราที่ทำการ rewrite URI
*Config ของ Nginx ผมตัดส่วนที่ไม่ได้ใช้ออก เพื่อให้ง่ายต่อความเข้าใจและโฟกัสในหัวข้อที่ผมต้องการนำเสนอ ตอนใช้งานจริงควรศึกษาตรงนี้เพิ่มเติม
》บทความถัดไปผมจะติดตั้ง Nginx ไว้ใน Services ของ Windows ให้ชมกันครับง่ายเหมือนเดิมแน่นอน
ผิดพลาดประการใด ขอภัยด้วยนะครับ ขอบคุณมากครับ
