Quá lâu cho một bài viết, chả là dạo này nhiều thứ làm phân tâm, tâm trạng không được tốt nên nhác viết bài quá. Các bạn thông cảm cho mình nhé 😛
Quay lại với project Tạo Blog đơn giản với Nuxt JS và WordPress API hôm trước. Hôm nay mình sẽ hướng dẫn các bạn cách Deploy project Nuxt JS lên VPS và sử dụng PM2 để quản lý ứng dụng.
Các bước thực hiện
B1: Đầu tiên mình sẽ tạo một subdomain đặt tên là techtalk.ntcde.com cho dễ quản lý. Cách tạo subdomain các thứ thì bạn search GG là ra ấy.
B2: Cấu hình DNS, add domain các thứ trên server của bạn, hiện tại mình đang sử dụng Caddy server để chạy các site trên VPS của mình.
Cấu hình subdomain trong Caddyfile:
techtalk.ntcde.com:443 {
tls /var/www/certificates/ntcde_cert.pem /var/www/certificates/ntcde_key.pem
# root /var/www/ntcde.com/techtalk
gzip
proxy / localhost:3001
}Đối với Nginx:
// etc/nginx/sites-available/default
server {
listen 80;
server_name techtalk.example.com;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass localhost:3001;
}
}B3: Tạo một file json đặt tên tùy ý bạn trong root folder project của bạn, ở đây mình đặt tên là app-pm2.json. Nội dung trong file đó là để config cho ứng dụng chạy và quản lý bới PM2:
{
"apps": [
{
"name": "techtalk",
"script": "npm",
"args": "start"
}
]
}
B4: Cài đặt git trên VPS của bạn và clone project về https://github.com/trongcong/nuxtjs-minimal-blog.git
Đi đến thư mục chứa project trên VPS của bạn, project của mình clone về nằm trong folder này /home/nuxtjs-minimal-blog nên mình sẽ cd đi tới đây.
B5: Để chạy project Nuxt js ở môi trường production, bạn phải cài đặt các npm module cần thiết và sau đó build project Nuxt JS và cuối cùng là chạy project.
Các bạn làm theo các bước sau, ở đây mình dùng yarn thay cho npm:
yarn install: để cài đặt các module cần thiết cho project
Sau đó sẽ là
yarn build: để build project nuxt js ở môi trường production
B6: Và cuối cùng là start project, ở local ta sẽ dùng yarn start hoặc npm start để khởi chạy nuxt. Nhưng ở VPS ta sẽ dùng PM2 để quản lý vì trên VPS có thể sẽ có nhiều project chạy cùng lúc, nên dùng PM2 sẽ là lựa chọn hợp lý.
Sử dụng pm2 để run nào: pm2 start app-pm2.json
Lưu ý: Theo mặc định, các project nuxt js sẽ chạy ở port 3000, nhưng có những trường hợp trên VPS của bạn đã có ứng dụng sử dụng port 3000 trước đó nên nó có thể sinh ra lỗi. Đừng lo lắng, bạn có thể config cho ứng dụng của bạn qua port khác, xem chi tiết ở đây.
Qua các bước trên thì xong xuôi rồi đấy, thưởng thức thành quả thôi nào https://techtalk.ntcde.com/blog
Về hiệu suất và speed thì khỏi bàn rồi 😀
Để update project thì các bạn thực hiện lại từ bước 4 trở đi và sau đó dùng PM2 để restart lại project.
Chúc các bạn thành công, nếu có bất kỳ thắc mặc nào xin để lại comment bên dưới. Xin cảm ơn.
Xem thêm