Loading...

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Deploy NuxtJS lên VPS là một trong những giai đoạn cuối cùng để hoàn thành một dự án. Với NuxtJS khi tra kết quả trên các công cụ tìm kiếm thì có rất nhiều hướng dẫn cách deploy lên VPS Nginx. Tuy nhiên các hướng dẫn về deploy các dự án Nodejs lên VPS Apache rất ít hoặc không đầy đủ. Trong bài viết này, chúng tôi sẽ thực hiện cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess.

Bằng cách này, bạn có thể tận dụng các VPS đang chạy các website trên Apache để sử dụng mà không cần phải mất công đổi qua lại với máy chủ Nginx. Dưới đây là các bước để thực hiện triển khai ứng dụng.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess
Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Các bước thực hiện

Điều kiện tiên quyết là VPS là phải cài Apache web servers. Với các VPS mới còn trống, bạn có thể tra cứu các công cụ tìm kiếm để xem cách cài đặt Apache sau đó thực hiện các bước tiếp theo dưới đây.

Trỏ tên miền về VPS

Bạn cần phải thực hiện đăng nhập vào tài khoản quản lý tên miền sau đó trỏ tên miền về VPS của mình. Trong ví dụ này, chúng tôi tạo subdomain và sử dụng nó để thực hiện triển khai ứng dụng. Ví dụ trỏ về 1 VPS có địa chỉ IP là 171.222.45.35.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Truy cập vào server

Đầu tiên truy cập server thông qua ssh, ở đây chúng tôi sử dụng Git, một ứng dụng phổ biến để thực hiện truy cập ssh.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Cài đặt Nodejs và yarn

Kế tiếp cần cài Nodejs.

Dùng script sau để tải node:

sudo yum -y install curl

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

Sau đó thự hiện cài đặt bằng script:

sudo yum install -y nodejs

Kiểm tra kết quả cài đặt với cú pháp:

node -v

npm –v

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Với những ai sử dụng yarn có thể dùng script sau để cài đặt:

curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

sudo yum install yarn

Kiểm tra kết quả cài đặt yarn:

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Upload source

Sau khi cài xong Nodejs, tải phần source lên một thư mục thuộc /home. Ở đây chúng tôi tạo thư mục nuxtwp để chứa source và cd đến thư mục này. Lý do phải tạo ở thư mục home là để source dùng quyền root và tránh lỗi phân quyền user khi chạy các lệnh fix permissions.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Có thể sử dụng một trong hai cách sau để tải source lên: Sử dụng Git để đẩy code lên hoặc upload trực tiếp code từ local lên thư mục nuxtwp.

Nếu sử dụng Git thì cứ clone về thư mục nuxtwp bình thường với script sau:

git clone path-git path-des

Còn nếu muốn tải source từ local lên thì có thể sử dụng lệnh sau:

scp folder-source/* root@171.222.45.35:/home/nuxtwp

Kết quả sau khi tải source NuxtJS lên:

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Cài đặt node_modules

Tiếp theo thực hiện cài đặt node_modules cho ứng dụng bằng lệnh:

npm install

// hoặc

yarn

Sau khi cài đặt xong sẽ thấy xuất hiện thêm thư mục node_modules ở mã nguồn.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Cấu hình deploy cho dự án

Nuxt cho phép chọn giữa deploy Server hoặc Static, tùy chọn này được thiết lập ở file nuxt.config.js trong thư mục gốc của source.

Kiểu deploy Server

Với kiểu deploy Server thì giá trị target trong file nuxt.config.js là ‘server’. Sử dụng lệnh ‘yarn build’ hoặc ‘npm run build’ để build thư mục .nuxt với các thứ bên trong đó để được triển khai. Sau đó sử dụng lệnh ‘yarn start’ để chạy ứng dụng.

Kiểu deploy Static

Với kiểu deloy này, Nuxt sẽ tạo ra các file tĩnh để chạy trên VPS. Giá trị target trong file nuxt.config.js là ‘static’ với lệnh ‘yarn generate’ hoặc ‘npm run generate’ để tạo các file tĩnh.

Ở đây chúng ta chọn kiểu deploy Static.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Sau đó thực hiện cú pháp tạo file tĩnh dưới:

yarn generate

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Kết quả là sẽ thấy NuxtJS tạo ra một thư mục dist chứa các tệp cần thiết để chạy.

Chạy thử với một port bất kỳ

Sau khi tạo file tĩnh sử dụng một port nào đó để chạy thử và xem kết quả, ở đây sử dụng port 7788 hoặc một port bất kỳ mà server đang không dùng đến.

yarn start --hostname nuxt.kanmar.vn --port 7788

Với nuxt.kanmar.vn là subdomain đã trỏ về VPS ở bước trên.

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Truy cập trình duyệt với link là nuxt.kanmar.vn:7788 để xem kết quả. Lưu ý là chỉ có IP của bạn truy cập được với port 7788, còn với các IP khác bên ngoài không thể truy cập được. Lý do là port 7788 đó chưa có publish. Nếu bạn không truy cập được với port trên thì hãy mở nó hoặc thử với 1 port khác.

Nhấn Ctrl + C để hủy chạy thử.

Cấu hình file .htaccess

Để chạy subdomain với SSL mà không có port 7788 phía sau ta thực hiện bước sau.

Trong thư mục của subdomain hoặc domain tạo file .htaccess và thêm đoạn script sau vào rồi lưu lại:

RewriteEngine On

RewriteCond %{HTTPS} off [OR]

RewriteCond %{HTTP_HOST} ^www\. [NC]

RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]

RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

RewriteRule ^index.php(.*) http://nuxt.kanmar.vn:7788/$1 [P,L]

RewriteRule (.*) http://nuxt.kanmar.vn:7788/$1 [P,L]

Truy cập vào đường dẫn nuxt.kanmar.vn sẽ thấy kết quả mà không cần port 7788 phía sau.

Cài đặt PM2

PM2 là một daemon process manager, nó giúp ta quản lý các tiến trình trong ứng dụng, giúp cho application luôn luôn chạy. Ta sử dụng nó để duy trì cho NuxtJS chạy ngay sau khi server có khởi động lại.

Cài đặt PM2 theo cú pháp:

npm install pm2 –g

// hoặc

yarn global add pm2

Sau khi cài đặt bạn có thể kiểm tra version của PM2 bằng cú pháp:

pm2 –v

Sử dụng lệnh sau để chạy cho ứng dụng NuxtJS:

pm2 start yarn -- start --hostname nuxt.kanmar.vn --port 7788

Cách deploy NuxtJS lên VPS Apache CentOS bằng PM2 và .htaccess

Xong bước này chúng ta có thể tắt terminal của git để làm việc khác.

Để dừng chạy ứng dụng có thể sử dụng cú pháp sau:

pm2 stop all

// hoặc

pm2 kill

Các bạn có thể truy cập vào đường dẫn https://nuxt.kanmar.vn để xem kết quả demo.

Kết luận

Trên đây là cách deploy đơn giản NuxtJS lên VPS Apache, cách này khá đơn giản và dễ thực hiện. Nhìn chung cách thực hiện cũng tương tự như deploy lên VPS Nginx. Nó không chỉ thực hiện được với các dự án được xây dựng bằng NuxtJS, mà còn có thể áp dụng cho các dự án NextJS, Vue, React hoặc Nodejs nào đó.

Nếu có thắc mắc cần giải đáp vui lòng liên hệ với chúng tôi để được giải đáp.

KANceil

Bạn có thể để lại thông tin hoặc liên hệ với chúng tôi nếu cần hỗ trợ tư vấn:


Yêu cầu tư vấn

Admin

Đội ngũ Content Marketing tại KANmar

Nội dung trên trang kanceil.com được thực hiện bởi đội ngũ Content Marketing tại KANmar - Công ty chủ quản của thương hiệu thiết kế website KANceil.