Trang tĩnh: từ tệp đến tên miền

Site tĩnh là một tập hợp các tệp dựng sẵn: HTML, CSS, hình ảnh, bản build frontend. Nó không cần PHP lẫn cơ sở dữ liệu, nên chạy thoải mái ngay cả trên VDS-1 và xử lý được lưu lượng đáng kể: lên tới 500 Mbit/s.

Đặt tệp ở đâu

Tạo một thư mục riêng cho mỗi site:

mkdir -p /var/www/example.ru
chown -R www-data:www-data /var/www/example.ru

Tải lên từ máy cục bộ của bạn bằng scp hoặc rsync:

scp -r ./dist/* root@YOUR_ADDRESS:/var/www/example.ru/
rsync -avz --delete ./dist/ root@YOUR_ADDRESS:/var/www/example.ru/

rsync --delete xóa các tệp trên máy chủ không còn trong bản build. Nếu không có nó, các chunk JS cũ sẽ chất đống suốt nhiều năm.

Phục vụ qua web server

Cấu hình Nginx tối thiểu:

server {
    listen 80;
    server_name example.ru;
    root /var/www/example.ru;
    index index.html;

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

    location ~* \.(js|css|png|jpg|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

Dòng try_files ... /index.html cần thiết cho các ứng dụng single-page dựng trên React, Vue và Svelte: nếu không có nó, truy cập thẳng vào /about sẽ trả về 404.

Tiếp theo là chứng chỉ Let's Encrypt, và site sẽ mở qua HTTPS.

Tên miền

Trong bảng điều khiển tên miền, tạo bản ghi A trỏ tới địa chỉ công khai của máy (tab “Overview” trong /hosting/vds/m/<id>) và bản ghi tương tự cho www. Kiểm tra:

dig +short example.ru

Bản ghi có thể mất tới vài giờ để lan truyền. Trong lúc chờ, site vẫn truy cập được tại địa chỉ của máy.

Cập nhật không gián đoạn

Đừng tải tệp đè lên thư mục đang chạy — người truy cập có thể gặp phải site dựng dở dang. Hãy build song song rồi chuyển symlink:

rsync -avz ./dist/ /var/www/releases/$(date +%s)/
ln -sfn /var/www/releases/1724400000 /var/www/example.ru-current
systemctl reload nginx

Khi đó root trong cấu hình trỏ tới /var/www/example.ru-current.

Lỗi thường gặp

Tốt hơn là build frontend cục bộ rồi tải thư mục dist hoàn chỉnh lên. Trên VDS-1 với 2 GB bộ nhớ, build một dự án lớn có thể thất bại do thiếu bộ nhớ.