Bạn vừa code xong một trang web xịn xò, bạn cảm thấy deploy lên vercel hay netlify hay heroku,… không đủ ngon?
Bạn muốn can thiệp sâu vào server xem nó có gì bên trong?
Bạn vừa xem hướng dẫn deploy Express.js lên Vercel, nhưng nhận ra nó rất chậm, bạn cần một thứ tốt hơn, nhanh hơn, trông pro hơn?
Bạn vừa xem hết phần hướng dẫn setup VPS để chạy môi trường Node.js và muốn thử nghiệm?
React! một dự án không động gì tới code backend hay databases, nên việc deploy nó cũng rất dễ dàng, không có gì đáng kể cả. Vậy bắt đầu thôi!
Để tránh lãng phí thời gian, mình sẽ sử dụng dự án mini này nhé: [email protected]:duongnguyen321/react.git
Đăng nhập vào Terminus hoặc bất cứ nền tảng kết nối SSH nào. Sau đó đăng nhập vào server của bạn.
Sau đó clone dự án về server:
git clone [email protected]:duongnguyen321/react.git test
Sau đó install package và setup .env
nếu cần:
cd test
bun i
touch .env && vi .env
Tùy vào các bundle, cách run production là khác nhau, ở đây mình dùng vite nên mình sẽ chạy bun preview
, tuy nhiên nếu cần đổi port trước khi chạy, sẽ sửa ở file scripts.preview
trong package.json
, thêm flag --port=xxxx
vào nhé, nhưng mình sẽ không đổi nó, mặc định sẽ là: 4173
Tóm lại, các bạn chạy thử bằng cách này:
bun run build
bun preview
Sau đó nó sẽ lên như này là được:
Tuy nhiên, chúng mình có PM2 để chạy và quản lý tiến trình, nên các bạn hãy Ctrl+C đi, chạy được là ok rồi.
Chạy bằng cách sử dụng PM2 để đảm bảo quá trình chạy được hoàn thiện hơn nhé:
pm2 start --name=test bun -- preview
Trong đó, pm2 start là cú pháp để start một môi trường Node.js cho dự án.
Flag --name
sử dụng để đặt tên cho tiến trình đang chạy, nó sẽ giúp bạn quản lý nó một cách tốt hơn.
Và phần cuối: bun -- preview
nó tương tự như chạy bun preview
nhưng thông qua PM2 thôi.
Ok, vậy là bạn chạy được nó rồi đó, giờ hãy lên CloudFlare tại đây:
https://dash.cloudflare.com/[id]/[domain]/dns/records
Thêm một subdomain với CNAME nếu bạn sử dụng subdomain, hoặc thêm bằng root domain nếu bạn không cần tới subdomain:
Subdomain:
Root domain:
Sau khi thêm, bạn vào lại Terminus, vào CaddyFile và thêm một domain:
sudo vi /etc/caddy/Caddyfile
Nếu bạn muốn localhost:4173
vào domain vừa tạo trên cloudflare, bạn thêm đoạn code sau:
Nếu bạn sử dụng subdomain:
test.ndng.net:80 {
reverse_proxy localhost:4173
}
Nếu bạn sử dụng root domain
ndng.net:80 {
reverse_proxy localhost:4173
}
Bonus:
www.ndng.net:80 {
redir https://ndng.net{uri} permanent
}
Đoạn www.ndng.net
kia sẽ tự động redirect về ndng.net
trong trường hợp bạn không muốn thì có thể xóa đi nhé!
Các phần config có sẵn, bạn nên xóa nó đi trước đã. Vì chúng không thích hợp cho dự án React đâu!
Nếu như muốn thêm một domain mới, bạn chỉ cần viết thêm một “object” tương tự như trên là được thôi. Ví dụ:
www.ndng.net:80 {
redir https://ndng.net{uri} permanent
}
ndng.net:80 {
reverse_proxy localhost:4173
}
test.ndng.net:80 {
reverse_proxy localhost:4173
}
Khi sửa CaddyFile, nhớ sử dụng quyền root bằng cách thêm sudo
đằng trước.
Sau khi sửa, bạn cần phải restart lại service caddy bằng lệnh sau:
systemctl restart caddy
Sau khi đã có domain, chạy dự án và config caddy hoàn tất, bạn hãy lên trên đường dẫn mà bạn đã khai báo, test xem có gì sai xót không, chạy chưa,…
Nếu chạy rồi thì OK chúc mừng bạn!
Nếu chưa chạy, bạn hãy xem lỗi gì, có thể comment phía dưới nhé:v
Cảm ơn bạn đã đọc!