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

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

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

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

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

Создание приложения #

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

$ npm run build

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

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

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

$ npm run build
$ npm run preview

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

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

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

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

GitHub Pages #

1. Установите правильный base в vite.config.js.

   Если вы выполняете развертывание на https://<USERNAME>.github.io/, вы можете опустить base, так как по умолчанию это '/'.

   Если вы выполняете развертывание на https://<USERNAME>.github.io/<REPO>/, например, ваш репозиторий находится в https://github.com/<USERNAME>/<REPO>, установите base в '/<REPO>/'.

2. Внутри вашего проекта создайте deploy.sh со следующим содержимым (с выделенными строками, раскомментированными соответствующим образом) и запустите его для развертывания:

   bash

   #!/usr/bin/env sh
   
   # abort on errors
   set -e
   
   # build
   npm run build
   
   # navigate into the build output directory
   cd dist
   
   # place .nojekyll to bypass Jekyll processing
   echo > .nojekyll
   
   # if you are deploying to a custom domain
   # echo 'www.example.com' > CNAME
   
   git init
   git checkout -И main
   git add -A
   git commit -m 'deploy'
   
   # if you are deploying to https://<USERNAME>.github.io
   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
   
   # if you are deploying to https://<USERNAME>.github.io/<REPO>
   # git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
   
   cd -
   

GitLab Pages и GitLab CI #

1. Установите правильный 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>/'.

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

   yaml

   image: node:16.5.0
   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 #

1. Установите Netlify CLI.
2. Создайте новый сайт с помощью ntl init.
3. Разверните с помощью ntl deploy.

# Install the Netlify CLI
$ npm install -g netlify-cli

# Create a new site in Netlify
$ ntl init

# Deploy to a unique preview URL
$ ntl deploy

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

# Deploy the site into production
$ ntl deploy --prod

Netlify с Git #

1. Отправьте свой код в репозиторий (GitHub, GitLab, BitBucket, Azure DevOps).
2. Импортируйте проект to Netlify.
3. Выберите ветвь, выходной каталог и настройте переменные среды, если это применимо.
4. Нажмите Деплой.
5. Ваше приложение Vite развернуто!

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

Vercel #

Vercel CLI #

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

$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

Vercel для Git #

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

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

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

Cloudflare Pages #

Cloudflare Pages через Wrangler #

1. Установите Wrangler CLI.
2. Аутентифицируйте Wrangler с помощью своей учетной записи Cloudflare, используя wrangler login.
3. Запустите команду сборки.
4. Разверните с помощью npx wrangler pages publish dist.

# Install Wrangler CLI
$ npm install -g wrangler

# Login to Cloudflare account from CLI
$ wrangler login

# Run your build command
$ npm run build

# Create new deployment
$ npx wrangler pages publish dist

После того, как ваши ресурсы будут загружены, Wrangler предоставит вам URL-адрес предварительного просмотра для проверки вашего сайта. Когда вы войдете в панель инструментов Cloudflare Pages, вы увидите свой новый проект.

Cloudflare Pages с Git #

1. Загрузите свой код в свой репозиторий git (GitHub, GitLab).
2. Войдите в панель инструментов Cloudflare и выберите свою учетную запись в Главная страница учетной записи > Страницы.
3. Выберите Создать новый проект и Подключить Git.
4. Выберите проект git, который хотите развернуть, и нажмите Начать настройку.
5. Выберите соответствующий пресет фреймворка в настройках сборки в зависимости от выбранного вами фреймворка Vite.
6. Затем сохраните и разверните!
7. Ваше приложение развернуто! (например, https://<PROJECTNAME>.pages.dev/)

После того, как ваш проект будет импортирован и развернут, все последующие отправки в ветки будут генерировать Preview Deployments, если не указано иное в ваших элементах управления сборкой ветки. Все изменения в производственной ветке (обычно “main”) приведут к производственному развертыванию.

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

Google Firebase #

1. Убедитесь, что у вас установлены firebase-tools.

2. Создайте firebase.json и .firebaserc в корне вашего проекта со следующим содержимым:

   firebase.json:

   json

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

   .firebaserc:

   js

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

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

Surge #

1. Сначала установите surge, если вы еще этого не сделали.

2. Запустите npm run build.

3. Выполните развертывание для surge, набрав surge dist.

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

Azure Static Web Apps #

Вы можете быстро развернуть свое приложение Vite с помощью службы Microsoft Azure статические веб-приложения. Тебе нужно:

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

Установите расширение в VS Code и перейдите в корень приложения. Откройте расширение «Статические веб-приложения», войдите в Azure и щелкните значок «+», чтобы создать новое статическое веб-приложение. Вам будет предложено указать, какой ключ подписки использовать.

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

Действие будет работать для развертывания вашего приложения (следите за его ходом на вкладке «Действия» вашего репозитория), и после успешного завершения вы сможете просмотреть свое приложение по адресу, указанному в окне хода выполнения расширения, нажав кнопку «Обзор веб-сайта», которая появляется, когда Действие GitHub запущено.

Render #

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

1. Создайте учетную запись Render.

2. В Панель инструментов, нажмите кнопку Создать и выберите Статический сайт.

3. Подключите свою учетную запись GitHub/GitLab или используйте общедоступный репозиторий.

4. Укажите имя проекта и ветку.

   • Команда сборки: npm run build
   • Каталог публикации: dist

5. Нажмите Создать статический сайт.

   Ваше приложение должно быть развернуто на https://<PROJECTNAME>.onrender.com/.

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

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