Hướng dẫn deploy project Nuxt JS lên VPS 😍

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é 😛

Quy 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:

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:

Xem thêm:

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 😀

Hướng dẫn deploy project Nuxt JS lên VPS 😍
Hướng dẫn deploy project Nuxt JS lên VPS 😍

Để 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.

Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Sử dụng JavaScript Fetch API với Async/Await Styling Placeholder Text của thẻ input với CSS Cài đặt và Active WebStorm 2019.2.4 với License key 50+ thuộc tính thú vị trong CSS Cài đặt WordPress với Caddy web server trên Ubuntu 18.04

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.