Nội dung
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á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.
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à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
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:
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 ta tạo thư mục nuxtwp để chứa source và cd đến thư mục này.
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à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ấ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.
Sau đó thực hiện cú pháp tạo file tĩnh dưới:
yarn generate
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.kanceil.com --port 7788
Với nuxt.kanceil.com là subdomain đã trỏ về VPS ở bước trên.
Truy cập trình duyệt với link là nuxt.kanceil.com: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ài đặt SSL
Truy cập vào control panel quản lý hoặc thực hiện các bước tương tự để cài đặt SSL cho subdomain.
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.kanceil.com:7788/$1 [P,L]
RewriteRule (.*) http://nuxt.kanceil.com:7788/$1 [P,L]
Truy cập vào đường dẫn nuxt.kanceil.com 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.kanceil.com --port 7788
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.kanceil.com để 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.
