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

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 😀

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.

Xem thêm

Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block

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.