Як задеплоїти Vue.js застосунок?

📌 Кроки для деплою Vue.js застосунку

Щоб розгорнути Vue.js застосунок, потрібно:

Підготувати продакшн-збірку (build)
Вибрати платформу для деплою
Налаштувати сервер або хостинг
Завантажити файли на сервер

1. Генерація продакшн-збірки

Перед тим як задеплоїти Vue.js застосунок, його потрібно скомпілювати у мінімізований код.

Виконайте команду:

npm run build

Ця команда створить папку dist/, яка містить готовий до розгортання код.

❗ Важливо: Якщо у вас є нестандартний префікс шляху (наприклад, /my-app/ замість /), оновіть vue.config.js:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
};

2. Деплой на різні платформи

Ви можете задеплоїти Vue.js застосунок на GitHub Pages, Vercel, Netlify, Firebase, або VPS (NGINX, Apache).

🔹 Деплой на GitHub Pages (безкоштовно)

Встановіть пакет gh-pages:
```
npm install gh-pages --save-dev
```

Додайте у package.json:

"scripts": {
  "deploy": "vue-cli-service build && gh-pages -d dist"
}

Виконайте команду:
```
npm run deploy
```
Перейдіть на https://your-username.github.io/repository-name/.

🔹 Деплой на Vercel (швидко, безкоштовно)

Встановіть Vercel CLI:
```
npm install -g vercel
```
Авторизуйтеся:
```
vercel login
```
Перейдіть у папку проєкту та запустіть:
```
vercel
```
Ваш сайт буде доступний на your-app.vercel.app.

🔹 Деплой на Netlify

Встановіть Netlify CLI:
```
npm install -g netlify-cli
```
Авторизуйтеся:
```
netlify login
```
Запустіть деплой:
```
netlify deploy --prod
```
Отримаєте посилання на сайт (your-app.netlify.app).

🔹 Деплой на Firebase

Встановіть Firebase CLI:
```
npm install -g firebase-tools
```
Авторизуйтеся:
```
firebase login
```
Ініціалізуйте Firebase-хостинг:
```
firebase init
```
Виберіть dist/ як папку для публікації та виконайте:
```
firebase deploy
```
Отримаєте URL your-app.web.app.

🔹 Деплой на VPS (NGINX + Node.js)

Скопіюйте вміст dist/ на сервер.
Встановіть NGINX:
```
sudo apt update
sudo apt install nginx
```

Створіть конфігурацію у /etc/nginx/sites-available/vue-app:

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/vue-app/dist;
    index index.html;
    location / {
        try_files $uri /index.html;
    }
}

Перезапустіть NGINX:
```
sudo systemctl restart nginx
```
Готово! Ваш сайт працює на your-domain.com.

🎯 Висновок: який метод вибрати?

Метод	Для кого?	Особливості
GitHub Pages	Для статичних сайтів	Безкоштовно, не підтримує серверний бекенд
Vercel	Для швидкого деплою	Легка інтеграція, підтримка SSR
Netlify	Для JAMStack сайтів	Добре підходить для хостингу SPA
Firebase	Для мобільних та веб-додатків	Має вбудований бекенд (Firestore, Auth)
VPS (NGINX)	Для складних проєктів	Потребує налаштування серверної частини

✅ Якщо у вас простий Vue SPA – найкращі варіанти GitHub Pages, Vercel або Netlify.
✅ Якщо є бекенд і складна логіка – VPS (NGINX + Node.js) буде найкращим рішенням.