Развёртывание статического сайта

Следующие руководства основаны на некоторых общих предположениях:

Вы используете расположение по умолчанию для выходных данных сборки (dist). Это расположение можно изменить с помощью параметра build.outDir, и в этом случае вы можете экстраполировать инструкции из этих руководств.
Вы используете npm. Вы можете использовать эквивалентные команды для запуска скриптов, если вы используете Yarn или другие менеджеры пакетов.
Vite установлен как локальная зависимость разработки в вашем проекте, и вы настроили следующие npm-скрипты:

json

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

Важно отметить, что команда vite preview предназначена для предварительного просмотра сборки локально, а не для использования в качестве продакшен-сервера.

ПРИМЕЧАНИЕ

Эти руководства предоставляют инструкции по выполнению статического развёртывания вашего сайта на Vite. Vite также поддерживает серверный рендеринг (SSR). SSR относится к фронтенд-фреймворкам, которые поддерживают запуск одного и того же приложения в Node.js, предварительно рендеря его в HTML, а затем гидратируя его на клиенте. Ознакомьтесь с руководством по SSR, чтобы узнать больше об этой функции. С другой стороны, если вы ищете интеграцию с традиционными серверными фреймворками, ознакомьтесь с руководством по интеграции с бэкендом.

Сборка приложения

Вы можете выполнить команду npm run build, чтобы собрать приложение.

bash

$ npm run build

По умолчанию выходные данные сборки будут помещены в dist. Вы можете развернуть эту папку dist на любой из предпочитаемых вами платформе.

Локальное тестирование приложения

После того как вы собрали приложение, вы можете протестировать его локально, выполнив команду npm run preview.

bash

$ npm run preview

Команда vite preview запустит локальный статический веб-сервер, который будет обслуживать файлы из dist по адресу http://localhost:4173. Это простой способ проверить, выглядит ли продакшен-сборка нормально в вашей локальной среде.

Вы можете настроить порт сервера, передав флаг --port в качестве аргумента.

json

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

Теперь команда preview запустит сервер по адресу http://localhost:8080.

GitHub Pages

Обновите конфигурацию Vite
Установите правильное значение base в vite.config.js.
Если вы развёртываете на https://<USERNAME>.github.io/ или на пользовательском домене через GitHub Pages (например, www.example.com), установите base в '/'. В качестве альтернативы, вы можете удалить base из конфигурации, так как по умолчанию оно равно '/'.
Если вы развёртываете на https://<USERNAME>.github.io/<REPO>/ (например, ваш репозиторий находится по адресу https://github.com/<USERNAME>/<REPO>), тогда установите base в '/<REPO>/'.
Включите GitHub Pages
В вашем репозитории перейдите в Settings → Pages. В разделе Build and deployment откройте выпадающее меню Source и выберите GitHub Actions.
GitHub теперь сам соберёт и опубликует ваш сайт с помощью сценария GitHub Actions. Это необходимо, потому что для Vite сайт нужно сначала собрать.

Создайте файл сценария

Создайте новый файл в вашем репозитории по пути .github/workflows/deploy.yml. Вы также можете нажать на «create your own» на предыдущем шаге, что сгенерирует для вас заготовку сценария.

Вот пример файла, который при каждом пуше изменений в ветку main устанавливает зависимости с помощью npm, собирает сайт и разворачивает его:

.github/workflows/deploy.yml

yaml

# Простой рабочий процесс для развёртывания статического контента на GitHub Pages
name: Deploy static content to Pages

on:
  # Запускается при пушах в целевую ветку по умолчанию
  push:
    branches: ['main']

  # Позволяет вам запускать этот рабочий процесс вручную из вкладки Actions
  workflow_dispatch:

# Устанавливает разрешения для GITHUB_TOKEN, чтобы разрешить развёртывание на GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Разрешает одно параллельное развёртывание
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Один рабочий процесс, так как мы просто развёртываем
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v5
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Загружаем папку dist
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

GitLab Pages и GitLab CI

Установите правильное значение base в vite.config.js.
Если вы развёртываете на https://<USERNAME or GROUP>.gitlab.io/, вы можете опустить base, так как по умолчанию оно равно '/'.
Если вы развёртываете на https://<USERNAME or GROUP>.gitlab.io/<REPO>/, например, ваш репозиторий находится по адресу https://gitlab.com/<USERNAME>/<REPO>, тогда установите base в '/<REPO>/'.

Создайте файл с именем .gitlab-ci.yml в корне вашего проекта с содержимым ниже. Это будет собирать и развёртывать ваш сайт всякий раз, когда вы вносите изменения в ваш контент:

yaml

image: node:lts
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Netlify

Netlify CLI

Установите Netlify CLI с помощью команды npm install -g netlify-cli
Создайте новый сайт командой netlify init
Разверните с помощью netlify deploy

Netlify CLI покажет вам URL предпросмотра, чтобы вы могли посмотреть результат. Когда будете готовы выложить сайт в продакшен, используйте флаг --prod: netlify deploy --prod

Netlify с Git

Запушьте ваш код в git-репозиторий (GitHub, GitLab, BitBucket, Azure DevOps).
Импортируйте проект в Netlify.
Выберите ветку, папку со сборкой (output directory) и при необходимости настройте переменные окружения.
Нажмите Deploy.
Ваше Vite-приложение успешно развёрнуто!

После того как проект импортирован и впервые развёрнут, все последующие пуши в ветки, отличные от продакшен-ветки, а также пулреквесты будут автоматически создавать Preview Deployments (предпросмотры), а все изменения в продакшен-ветке (обычно это «main») будут приводить к Production Deployment (развёртыванию в продакшен).

Vercel

Vercel CLI

Установите Vercel CLI командой npm i -g vercel и выполните команду vercel для развёртывания.
Vercel обнаружит, что вы используете Vite, и включит правильные настройки для вашего развёртывания.
Ваше приложение развёрнуто! (например, vite-vue-template.vercel.app)

Vercel с Git

Запушьте ваш код в ваш git-репозиторий (GitHub, GitLab, Bitbucket).
Импортируйте ваш проект Vite в Vercel.
Vercel обнаружит, что вы используете Vite, и включит правильные настройки для вашего развёртывания.
Ваше приложение развёрнуто! (например, vite-vue-template.vercel.app)

После того как ваш проект будет импортирован и развёрнут, все последующие пуши в ветки будут генерировать предварительные развёртывания, а все изменения, внесённые в продакшен-ветку (обычно «main»), приведут к развёртыванию продакшен-версии.

Узнайте больше об интеграции Git с Vercel.

Cloudflare

Cloudflare Workers

Плагин Cloudflare для Vite обеспечивает интеграцию с Cloudflare Workers и использует Environment API, чтобы запускать ваш серверный код в среде выполнения Cloudflare Workers уже на этапе разработки.

Чтобы добавить Cloudflare Workers в существующий проект на Vite, установите плагин и добавьте его в конфигурацию:

bash

$ npm install --save-dev @cloudflare/vite-plugin

vite.config.js

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  plugins: [cloudflare()],
})

wrangler.jsonc

jsonc

{
  "name": "my-vite-app",
}

После выполнения команды npm run build ваше приложение теперь можно рзавернуть с помощью команды npx wrangler deploy.

Вы также можете легко добавить серверные API в ваше Vite-приложение, чтобы безопасно взаимодействовать с ресурсами Cloudflare. Эти API будут работать в среде Workers во время разработки и развёртываться вместе с вашим фронтендом. Полное пошаговое руководство смотрите в туториале по плагину Cloudflare для Vite.

Cloudflare Pages

Cloudflare Pages с Git

Cloudflare Pages предоставляет способ развёртывания напрямую в Cloudflare без необходимости управлять файлом Wrangler.

Запушьте ваш код в git-репозиторий (GitHub, GitLab).
Войдите в дашборд Cloudflare и выберите ваш аккаунт в Account Home → Workers & Pages.
Нажмите Create a new Project, выберите опцию Pages, затем выберите Git.
Выберите git-проект, который хотите задеплоить, и нажмите Begin setup.
В настройках сборки выберите соответствующий пресет фреймворка в зависимости от того, какой Vite-фреймворк вы используете. В противном случае укажите свою команду сборки для проекта и ожидаемую выходную директорию.
Сохраните настройки и запустите развёртывание!
Ваше приложение развёрнуто! (например, https://<PROJECTNAME>.pages.dev/)

После того как проект импортирован и впервые развёрнут, все последующие пуши в любые ветки будут автоматически создавать Preview Deployments, если вы не укажете иное в настройках branch build controls. Все изменения в продакшен-ветке (обычно это «main») будут приводить к Production Deployment (развёртыванию в продакшен).

Вы также можете добавлять пользовательские домены и настраивать параметры сборки на Pages. Узнайте больше об интеграции Git с Cloudflare Pages.

Google Firebase

Установите пакет firebase-tools командой npm i -g firebase-tools.
Создайте следующие файлы в корне вашего проекта:

firebase.json.firebaserc

json

{
  "hosting": {
    "public": "dist",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

После выполнения команды npm run build разверните с помощью команды firebase deploy.

Surge

Установите пакет surge командой npm i -g surge.
Выполните команду npm run build.
Разверните на Surge, введя surge dist.

Вы также можете развернуть на пользовательском домене, добавив surge dist yourdomain.com.

Azure Static Web Apps

Вы можете быстро развернуть ваше приложение Vite с помощью сервиса Microsoft Azure Static Web Apps. Вам потребуется:

Аккаунт Azure и ключ подписки. Вы можете создать бесплатный аккаунт Azure здесь.
Код вашего приложения, отправленный на GitHub.
Расширение SWA в Visual Studio Code.

Установите расширение в VS Code и перейдите в корень вашего приложения. Откройте расширение Static Web Apps, войдите в Azure и нажмите на знак '+' для создания нового статического веб-приложения. Вам будет предложено указать, какой ключ подписки использовать.

Следуйте мастеру, запущенному расширением, чтобы дать вашему приложению имя, выбрать пресет фреймворка и указать корень приложения (обычно /) и расположение собранных файлов /dist. Мастер выполнит необходимые действия и создаст GitHub action в вашем репозитории в папке .github.

Этот action будет работать для развёртывания вашего приложения (следите за его прогрессом на вкладке Actions вашего репозитория), и, когда он успешно завершится, вы сможете просмотреть ваше приложение по адресу, предоставленному в окне прогресса расширения, нажав кнопку «Browse Website», которая появится после выполнения GitHub action.

Render

Вы можете развернуть ваше приложение Vite как статический сайт на Render.

Создайте аккаунт Render.
В панели управления нажмите кнопку New и выберите Static Site.
Подключите свой аккаунт GitHub/GitLab или используйте публичный репозиторий.
Укажите имя проекта и ветку.
- Команда сборки: npm install && npm run build
- Папка для публикации: dist
Нажмите Create Static Site. Ваше приложение должно быть развёрнуто по адресу https://<PROJECTNAME>.onrender.com/.

По умолчанию любое новое изменение, запушенное в указанную ветку, автоматически запустит новое развёртывание. Автоматическое развёртывание можно настроить в настройках проекта.

Вы также можете добавить пользовательский домен к вашему проекту.

Flightcontrol

Разверните свой статический сайт, используя Flightcontrol и следуя этим инструкциям.

Хостинг статических сайтов Kinsta

Разверните свой статический сайт, используя Kinsta и следуя этим инструкциям.

Хостинг статических сайтов xmit

Разверните свой статический сайт, используя xmit и следуя этому руководству.

Zephyr Cloud

Zephyr Cloud — это платформа для развёртывания, которая интегрируется непосредственно в ваш процесс сборки и обеспечивает глобальное распределение на периферии для федерации модулей и других типов приложений.

Zephyr использует подход, отличный от других облачных провайдеров. Он интегрируется непосредственно с процессом сборки Vite, поэтому каждый раз, когда вы собираете или запускаете сервер разработки для вашего приложения, оно автоматически развёртывается с помощью Zephyr Cloud.

Следуйте инструкциям в руководстве по развёртыванию Vite, чтобы начать.

EdgeOne Pages

Разверните свой статический сайт с помощью EdgeOne Pages, следуя этим инструкциям.

Развёртывание статического сайта ​

Сборка приложения ​

Локальное тестирование приложения ​

GitHub Pages ​

GitLab Pages и GitLab CI ​

Netlify ​

Netlify CLI ​

Netlify с Git ​

Vercel ​

Vercel CLI ​

Vercel с Git ​

Cloudflare ​

Cloudflare Workers ​

Cloudflare Pages ​

Cloudflare Pages с Git ​

Google Firebase ​

Surge ​

Azure Static Web Apps ​

Render ​

Flightcontrol ​

Хостинг статических сайтов Kinsta ​

Хостинг статических сайтов xmit ​

Zephyr Cloud ​

EdgeOne Pages ​

Развёртывание статического сайта

Сборка приложения

Локальное тестирование приложения

GitHub Pages

GitLab Pages и GitLab CI

Netlify

Netlify CLI

Netlify с Git

Vercel

Vercel CLI

Vercel с Git

Cloudflare

Cloudflare Workers

Cloudflare Pages

Cloudflare Pages с Git

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

Хостинг статических сайтов Kinsta

Хостинг статических сайтов xmit

Zephyr Cloud

EdgeOne Pages