Деплой фронтенд-приложений, таких как Vue.js, — важный этап в процессе разработки. Чтобы приложение было доступно для пользователей, необходимо подготовить сервер, настроить окружение, установить нужные инструменты и организовать раздачу собранного кода.

В этой статье мы подробно разберем процесс развёртывания Vue.js-приложения на облачном сервере Timeweb Cloud. Мы пройдём все шаги — от создания виртуального сервера до настройки веб-сервера Nginx, чтобы ваше приложение было готово к работе в продакшене. Инструкция подойдёт как для начинающих, так и для разработчиков с опытом, которые хотят ускорить и упростить процесс деплоя.

Подготовка облачного сервера

Прежде чем начать деплой, нам нужен готовый сервер.

Создание виртуального сервера

Зайдите в панель управления Timeweb Cloud

Перейдите в раздел «Облачные серверы» и нажмите «Создать сервер»

Выберите ОС — лучше всего подойдёт Ubuntu 22.04

Укажите нужные ресурсы (помните: для простого Vue.js-приложения много не надо). Я выбираю самую доступную стартовую конфигурацию.

Нажмите «Создать» и дождитесь запуска сервера.

Подключение к серверу

Теперь подключимся к серверу через SSH:

ssh username@your_server_ip

Пароль или ключ SSH указаны в настройках сервера.

Настройка окружения

На чистом сервере нам нужно установить несколько вещей:

Обновляем пакеты:

sudo apt update && sudo apt upgrade -y

Устанавливаем Node.js и npm:

Лучше использовать LTS-версию. Пакет nvm поможет:

# Установка nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc

# Установка Node.js LTS
nvm install --lts

Проверьте версию Node.js и npm:

node -v
npm -v

Установка веб-сервера (Nginx):

sudo apt install nginx -y

Запустим и добавим Nginx в автозагрузку:

sudo systemctl start nginx
sudo systemctl enable nginx

Сборка Vue.js-приложения

Теперь нужно собрать ваше Vue.js-приложение. Обычно это делается на локальной машине, но можно и на сервере.

Загружаем код на сервер:

Используйте scp или любой другой способ:

scp -r /path/to/your/vue-app username@your_server_ip:/var/www/vue-app

Собираем проект:

cd /var/www/vue-app
npm install
npm run build

После сборки появится папка dist — это готовый фронтенд для деплоя.

Настройка Nginx для Vue.js

Настроим Nginx так, чтобы он раздавал собранное приложение.

Открываем конфиг Nginx

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

Добавляем настройки

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/vue-app/dist;
    index index.html;

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

Активируем конфиг

sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/
sudo nginx -t  # Проверка на ошибки
sudo systemctl restart nginx

Проверка работы приложения

Откройте браузер и введите IP-адрес или домен сервера. Если всё сделано правильно — ваше Vue.js-приложение работает!