เมื่อเราเขียนโปรแกรมด้วย react เสร็จ การทดสอบส่วนใหญ่ เราก็จะเรียกให้ทำงานด้วยคำสั่ง
npm startเพื่อทดสอบการใช้งาน และเมื่อจะใช้งาน ห้ามนำวิธีการนี้ไปใช้งานจริง!!! เพราะ เหตุผลเรื่องความปลอดภัย เนื่องจากการใช้งานแบบนี้ คนที่เรียกใช้งานจะมองเห็น code หรือไฟล์ทั้งหมดที่เขียนขึ้นมา นั่นก็คือถ้าคุณมี key หรือ รหัสผ่าน หรือรหัสที่เชื่อมต่อกับฐานข้อมูล หรือ source code มันก็จะเห็นทั้งหมด นั่นคือหายนะ สำหรับ เรื่องความปลอดภัย
ตัวอย่างการเรียกทดสอบการใช้งาน เมื่อดูจาก browser ก็จะเห็นตามรูป จะเห็นว่า มันมองเห็น source code ทั้งหมดที่เราทำขึ้นมา
สิ่งที่เราต้องทำเวลาที่จะใช้งานจริงก็คือ ทำการ build เพื่อทำ production ด้วยคำสั่ง
npm run build
พอจะ run ก็ใช้คำสั่ง serve โดยติดตั้งโปรแกรมก่อน ด้วยคำสั่ง
npm install -g serve
จากนั้นก็สั่งให้ app ทำงานด้วยคำสั่ง
serve -s buildเมื่อโปรแกรม react ทำงาน ก็จะทำงานที่ port 3000
เราอาจจะระบุ port ที่ใช้งานได้ตามที่ต้องการ เช่น 80 หรือ port เดียวกับ web ทั่วไป กรณีที่ run port ต่ำกว่า 1024 จะต้องใช้สิทธิ root หรือ admin ระบบเท่านั้นถึงจะทำได้
serve -s build -l 80
ถ้าจะให้โปรแกรมทำงานแบบ background ก็ใช้คำสั่ง
serve -s build -l 80 &
อ่านเพิ่มเติมได้จากนี่ https://handsonreact.com/docs/build-deploy
ถ้าต้องการ run ด้วย pm2 ก็ทำการติดตั้ง pm2 ก่อนแล้วเรียกใช้ด้วยคำสั่ง
pm2 --name myapp serve build 80 --spa
การติดตั้ง pm2 ทำได้ด้วยคำสั่ง
npm install pm2@latest -g
รายละเอียดศึกษาเพิ่มได้ที่ https://pm2.keymetrics.io/docs/usage/quick-start/
ต่อไปถ้าเราจะให้การเชื่อมต่อไปที่ app server แบบ https หรือ ผ่าน ssl จะทำได้อย่างไร ในที่นี้เราสามารถใช้ nginx หรือ web server มาทำ ssl proxy ได้ โดยการติดตั้ง nginx ก่อน
sudo apt update
sudo apt install nginx
จากนั้นเราจะแก้ไข file default ใน /etc/nginx/sites-available/default (ควรสำเนาไฟล์ไว้ก่อนด้วย) จากนั้นให้แก้เป็นแบบนี้
upstream my_nodejs_upstream {
server 127.0.0.1:3000;
keepalive 64;
}
server {
listen 443 ssl;
server_name www.my-website.com;
ssl_certificate_key /etc/ssl/main.key;
ssl_certificate /etc/ssl/main.crt;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://my_nodejs_upstream/;
proxy_redirect off;
proxy_read_timeout 240s;
}
}บรรทัด server_name www.my-website.com; ให้เปลี่ยนเป็น ชื่อ server ของเราแทน ส่วนตรง ssl ก็ใส่ไปตามนั้นก่อน เดี๋ยวเราจะใช้ let’s encrypt มาทำการสร้าง private key, public key สำหรับ ssl ดูการทำได้จากนี่ https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04
เริ่มจากติดตั้งคำสั่ง
sudo apt install certbot python3-certbot-nginx
ตรวจสอบ config file ว่ามีปัญหาอะไรหรือไม่
sudo nginx -t
ถ้ามี error อาจจะเอาบรรทัดนี้ออกไปก่อน
ssl_certificate_key /etc/ssl/main.key;
ssl_certificate /etc/ssl/main.crt;
เร่ิมทำการขอ certificate
sudo certbot --nginx -d example.com -d www.example.com
ตรง example.com หรือ www.example.com ก็เปลี่ยนเป็นชื่อเครื่องเราแทน ถ้ามีชื่อเดียวก็ระบุอันเดียวพอ เช่น -d kaebmoo.wordpress.com
จากนั้นก็ทำไปทีละขั้น ตามที่โปรแกรมถามจนกว่าจะเสร็จ
พอเสร็จแล้วก็ทำการ restart nginx server
sudo systemctl reload nginx
จากนั้นพอเรียกใช้งานไปที่ https://www.example.com มันก็จะไปเรียกใช้งาน react app ของเราทาง http://127.0.0.1:3000
โดย nginx config ก็คือบรรทัด proxy_pass http://my_nodejs_upstream/; คือการระบุให้ nginx เป็น proxy ที่ไปเรียก my_nodejs_upstream โดย my_nodejs_upstream
upstream my_nodejs_upstream {
server 127.0.0.1:3000;
keepalive 64;
}
ก็จะกำหนดให้ไปเรียกใช้งาน 127.0.0.1:3000 ซึ่งก็จะมี react program ของเรา ทำงานอยู่ จากที่เราสั่ง serve -s build -l 80 นั่นเอง
ประมาณนี้ client <—> nginx proxy https port 443 <—> react app port 3000
Kaebmoo's Blog 