Deploy Dự Án Vue.js Lên Hosting cPanel

Deploy Dự Án Vue.js Lên Hosting cPanel

Deploy dự án Vue.js lên hosting với cPanel là một bước quan trọng để đưa ứng dụng của bạn từ môi trường phát triển lên môi trường thực tế. cPanel là một trong những công cụ quản lý hosting phổ biến nhất, cung cấp giao diện thân thiện. Trong bài viết này, chúng ta sẽ đi qua các bước cụ thể để deploy một dự án Vue.js lên hosting cPanel.

1. Chuẩn Bị Dự Án Vue.js

Trước khi deploy, hãy chắc chắn rằng dự án Vue.js của bạn đã hoàn thành và hoạt động đúng trong môi trường phát triển. Bạn có thể kiểm tra lại bằng cách chạy lệnh:

npm run serve

Sau khi đảm bảo mọi thứ hoạt động tốt, tiến hành build dự án để chuẩn bị cho việc deploy.

2. Build Dự Án Vue.js

Chạy lệnh sau để build dự án Vue.js:

npm run build

Lệnh này sẽ tạo ra một thư mục dist chứa phiên bản đã build của ứng dụng Vue.js, bao gồm các file HTML, CSS, và JavaScript đã được tối ưu hóa để sẵn sàng triển khai lên server.

3. Upload Bản Build Lên cPanel

(lưu ý bạn có thể dùng filezilla hoặc các tool tương tự để upload)

- Bước a: Mở File Manager

Trong giao diện cPanel, tìm mục File Manager dưới phần Files.

Mở thư mục public_html (hoặc thư mục gốc của tên miền bạn muốn deploy).

- Bước b: Tải File Lên

Nén thư mục dist: Trước tiên, nén thư mục dist thành một file ZIP (dist.zip)

Tải lên thư mục dist.zip: Trong File Manager, nhấp vào nút Upload và chọn file dist.zip để tải lên.

- Bước c: Giải Nén File

Sau khi tải lên thành công, chọn file dist.zip, nhấp chuột phải và chọn Extract để giải nén và copy các file, folder bên trong dist bỏ vào public_html.

4. Kiểm Tra và Khắc Phục Sự Cố

Qua bước 3 là đã xong quá trình deploy code. Việc cần thiết bây giờ là bạn chạy thử xem dự án đã ok chưa.

Dưới đây là một số vấn đề hay gặp khi deploy (ngoài ra có thể search google ^^)

* Sửa Lỗi CORS và URL

Nếu có lỗi về CORS hoặc URL, hãy check cấu hình base URL trong file vue.config.js của bạn đã được thiết lập đúng hay chưa. Ví dụ:

// vue.config.js
module.exports = {
  publicPath: '/'
}

* Lỗi Console

Kiểm tra console của trình duyệt để xem có lỗi nào cần xử lý không (như lỗi 404, lỗi JavaScript, v.v.).

7. Cấu Hình Lại File .htaccess (bước này tùy chọn)

Đối với các ứng dụng SPA (Single Page Application) như Vue.js, bạn có thể cần cấu hình lại file .htaccess để hỗ trợ routing. Thêm đoạn mã sau vào file .htaccess trong public_html:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

* Lưu ý chmod 644 cho .htaccess

Kết Luận

Deploy một project Vue.js lên hosting cPanel không quá phức tạp, chỉ cần bạn tuân thủ đúng các bước từ build dự án, up source code. Với cPanel hiện giờ cũng cải thiệu UI rất nhiều. Giao diện dễ dùng, hướng dẫn cũng rất đầy đủ.

Hy vọng bài viết này đã giúp bạn hiểu rõ quy trình deploy dự án Vue.js lên hosting cPanel. Nếu có bất kỳ thắc mắc nào, hãy để lại bình luận để chúng ta cùng thảo luận thêm nhé!