Khi triển khai ứng dụng frontend Vue lên môi trường sản xuất sử dụng Nginx, cần đảm bảo rằng phiên bản đã được build hoàn chỉnh và máy chủ Nginx đã được cài đặt cấu hình sẵn sàng. Bài viết này sẽ hướng dẫn chi tiết các bước từ việc đóng gói ứng dụng, thiết lập máy chủ, triển khai và kiểm thử.

1. Quá trình Build ứng dụng Vue

Bước đầu tiên là biên dịch ứng dụng Vue sang dạng production bằng công cụ Vue CLI.

1.1 Cài đặt các thư viện phụ thuộc

Đảm bảo hệ thống đã có Node.js và npm. Sau đó thực thi lệnh sau tại thư mục gốc của dự án:

npm install

1.2 Thực hiện build dự án

Tại thư mục gốc, chạy lệnh để biên dịch:

npm run build

Lệnh này sẽ tạo ra thư mục output chứa toàn bộ tài nguyên tĩnh như HTML, JavaScript, CSS và hình ảnh. Thư mục này chính là nội dung cần triển khai lên máy chủ.

2. Thiết lập máy chủ Nginx

Nếu chưa cài đặt Nginx, thực hiện thông qua các lệnh sau:

2.1 Hệ điều hành Ubuntu/Debian

sudo apt update
sudo apt install nginx

2.2 Hệ điều hành CentOS/RHEL

sudo yum update
sudo yum install nginx

Sau khi cài đặt xong, khởi động dịch vụ:

sudo systemctl start nginx

Và kích hoạt tự động chạy cùng hệ thống:

sudo systemctl enable nginx

3. Cấu hình máy chủ Nginx

Cần thiết lập cấu hình để Nginx phục vụ ứng dụng Vue. Tệp cấu hình thường nằm ở /etc/nginx/nginx.conf hoặc thư mục /etc/nginx/sites-available/.

3.1 Tạo tệp cấu hình mới

Thực hiện tạo tệp cấu hình trong thư mục /etc/nginx/sites-available/. Ví dụ: tạo tệp app-vue-moi:

sudo nano /etc/nginx/sites-available/app-vue-moi

Nội dung tệp cấu hình:

server {
    listen 80;
    server_name domain_hoac_ip_cua_ban;

    root /var/www/app-vue-moi/output;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

Giải thích các thành phần cấu hình:

• listen 80;: Máy chủ lắng nghe cổng 80
• server_name domain_hoac_ip_cua_ban;: Thay thế bằng tên miền hoặc địa chỉ IP thực tế
• root /var/www/app-vue-moi/output;: Thư mục gốc chứa tài nguyên tĩnh, trỏ đến đường dẫn thư mục output đã build
• index index.html;: Chỉ định file mặc định khi truy cập
• location / { try_files $uri $uri/ /index.html; }: Đảm bảo router của Vue hoạt động chính xác. Nếu không tìm thấy file yêu cầu, sẽ trả về index.html để Vue xử lý
• location ~* \.(js|css|png|...)$ { expires 1y; ... }: Thiết lập cache cho tài nguyên tĩnh, tăng tốc độ tải

3.2 Kích hoạt tệp cấu hình

Sau khi lưu và đóng tệp, tạo liên kết symbolic để kích hoạt:

sudo ln -s /etc/nginx/sites-available/app-vue-moi /etc/nginx/sites-enabled/

3.3 Kiểm tra và khởi động lại Nginx

Trước khi áp dụng cấu hình mới, kiểm tra cú pháp:

sudo nginx -t

Nếu không có lỗi, khởi động lại Nginx:

sudo systemctl restart nginx

4. Triển khai ứng dụng Vue

4.1 Upload thư mục build lên máy chủ

Sử dụng SFTP, SCP hoặc công cụ truyền file khác để upload thư mục output lên máy chủ. Nên đặt vào thư mục /var/www/app-vue-moi/:

scp -r output/ nguoidung@ip_may_chu:/var/www/app-vue-moi/

4.2 Cấp quyền truy cập

Đảm bảo Nginx có quyền đọc các file của ứng dụng:

sudo chown -R www-data:www-data /var/www/app-vue-moi
sudo chmod -R 755 /var/www/app-vue-moi

5. Cấu hình SSL (Tùy chọn)

Nếu muốn thiết lập SSL cho website (khuyến nghị dùng HTTPS), có thể lấy chứng chỉ miễn phí từ Let's Encrypt và cấu hình trên Nginx.

5.1 Cài đặt Certbot

Certbot là công cụ tiện lợi để lấy chứng chỉ SSL từ Let's Encrypt:

sudo apt install certbot python3-certbot-nginx

5.2 Lấy chứng chỉ và cấu hình tự động

Chạy lệnh sau để nhận chứng chỉ SSL và cấu hình Nginx tự động:

sudo certbot --nginx -d domain_hoac_ip_cua_ban

Certbot sẽ tạo chứng chỉ SSL và sửa đổi tệp cấu hình Nginx để sử dụng HTTPS.

5.3 Tự động gia hạn chứng chỉ

Chứng chỉ Let's Encrypt có hiệu lực 90 ngày, nên cần thiết lập tự động gia hạn. Thêm cron job như sau:

echo "0 2 * * * /usr/bin/certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null

Tác vụ này sẽ chạy Certbot mỗi ngày lúc 2 giờ sáng để gia hạn chứng chỉ nếu cần.

6. Kiểm thử triển khai

Mở trình duyệt, truy cập tên miền hoặc IP của bạn, kiểm tra xem ứng dụng Vue có hiển thị đúng không. Xem xét console và các request mạng, đảm bảo tất cả tài nguyên tĩnh đều tải bình thường, không có lỗi xảy ra.

Nếu gặp lỗi 404 hoặc vấn đề khác, kiểm tra lại chỉ thị try_files trong cấu hình Nginx, đảm bảo nó trỏ đến index.html để Vue xử lý router.

7. Tổng kết

Thông qua các bước trên, bạn có thể triển khai thành công ứng dụng Vue lên máy chủ Nginx. Quá trình bao gồm build ứng dụng, thiết lập máy chủ, triển khai và kiểm thử. Nginx với tư cách là web server hiệu suất cao, có thể phục vụ ứng dụng frontend một cách hiệu quả, kết hợp với cấu hình SSL còn mang lại môi trường truy cập an toàn cho người dùng.