Развертывание статического сайта
Следующие руководства основаны на некоторых общих предположениях:
- Вы используете расположение вывода сборки по умолчанию (
dist
). Это расположение можно изменить с помощьюbuild.outDir
, и в этом случае вы можете экстраполировать инструкции из этих руководств. - Вы используете npm. Вы можете использовать эквивалентные команды для запуска скриптов, если используете Yarn или другие менеджеры пакетов.
- Vite установлен как локальная зависимость разработчика в вашем проекте, и вы настроили следующие сценарии npm:
{
"scripts": {
"build": "vite build",
"preview": "vite preview"
}
}
Важно отметить, что vite preview
предназначен для локального предварительного просмотра сборки, а не для рабочего сервера.
ПРИМЕЧАНИЕ
Эти руководства содержат инструкции по выполнению статического развертывания вашего сайта Vite. Vite также поддерживает рендеринг на стороне сервера. SSR относится к интерфейсным платформам, которые поддерживают запуск одного и того же приложения в Node.js, предварительный рендеринг его в HTML и, наконец, его гидратацию на клиенте. Ознакомьтесь с Руководством по SSR, чтобы узнать об этой функции. С другой стороны, если вам нужна интеграция с традиционными серверными фреймворками, ознакомьтесь с Руководством по интеграции серверной части.
Создание приложения
Вы можете запустить команду npm run build
, чтобы собрать приложение.
$ npm run build
По умолчанию вывод сборки будет помещен в dist
. Вы можете развернуть эту папку dist
на любой из предпочитаемых вами платформ.
Локальное тестирование приложения
После того, как вы создали приложение, вы можете протестировать его локально, выполнив команду npm run preview
.
$ npm run preview
Команда vite preview
загрузит локальный статический веб-сервер, который обслуживает файлы из dist
по адресу http://localhost:4173
. Это простой способ проверить, нормально ли выглядит производственная сборка в вашей локальной среде.
Вы можете настроить порт сервера, передав флаг --port
в качестве аргумента.
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
Теперь команда preview
запустит сервер по адресу http://localhost:8080
.
GitHub Pages
Установите правильный
base
вvite.config.js
.Если вы выполняете развертывание на
https://<USERNAME>.github.io/
или на личном домене через страницы GitHub (например,www.example.com
), установите дляbase
значение'/'
. В качестве альтернативы вы можете удалитьbase
из конфигурации, поскольку по умолчанию он равен'/'
.Если вы выполняете развертывание на
https://<USERNAME>.github.io/<REPO>/
(например, ваш репозиторий находится по адресуhttps://github.com/<USERNAME>/<REPO>
), установите дляbase
значение'/<REPO>/'
.Перейдите к конфигурации своих страниц GitHub на странице настроек репозитория и выберите источник развертывания как "GitHub Actions", это позволит вам создать рабочий процесс, который собирает и развертывает ваш проект, пример рабочего процесса, который устанавливает зависимости и выполняет сборку с использованием npm. предоставлен:
yml# Simple workflow for deploying static content to GitHub Pages name: Deploy static content to Pages on: # Runs on pushes targeting the default branch push: branches: ['main'] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow one concurrent deployment concurrency: group: 'pages' cancel-in-progress: true jobs: # Single deploy job since we're just deploying deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Set up Node uses: actions/setup-node@v4 with: node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Setup Pages uses: actions/configure-pages@v4 - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: # Upload dist folder 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
в корне вашего проекта с содержимым, указанным ниже. Это будет создавать и развертывать ваш сайт всякий раз, когда вы вносите изменения в свой контент:yamlimage: 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
- Установите Netlify CLI.
- Создайте новый сайт с помощью
ntl init
. - Разверните с помощью
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
- Отправьте свой код в репозиторий (GitHub, GitLab, BitBucket, Azure DevOps).
- Импортируйте проект to Netlify.
- Выберите ветвь, выходной каталог и настройте переменные среды, если это применимо.
- Нажмите Деплой.
- Ваше приложение Vite развернуто!
После того, как ваш проект будет импортирован и развернут, все последующие отправки в ветки, отличные от рабочей ветки, вместе с запросами на вытягивание будут генерировать превью деплой, и все изменения, внесенные в производственную ветку (обычно «основную»), приведут к деплою продакшена.
Vercel
Vercel CLI
- Установите Vercel CLI и запустите
vercel
для деплоя. - Vercel обнаружит, что вы используете Vite, и активирует правильные настройки для вашего развертывания.
- Ваше приложение развернуто! (например, 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
- Загрузите свой код в свой репозиторий git (GitHub, GitLab, Bitbucket).
- Импортируйте свой проект Vite в Vercel.
- Vercel обнаружит, что вы используете Vite, и активирует правильные настройки для вашего развертывания.
- Ваше приложение развернуто! (например, vite-vue-template.vercel.app)
После импорта и развертывания вашего проекта все последующие отправки в ветки будут генерировать Preview Deployments, а все изменения, внесенные в производственную ветку (обычно «main») приведет к Production Deployment.
Узнайте больше об интеграции Vercel с Git.
Cloudflare Pages
Cloudflare Pages через Wrangler
- Установите Wrangler CLI.
- Аутентифицируйте Wrangler с помощью своей учетной записи Cloudflare, используя
wrangler login
. - Запустите команду сборки.
- Разверните с помощью
npx wrangler pages deploy 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 deploy dist
После того, как ваши ресурсы будут загружены, Wrangler предоставит вам URL-адрес предварительного просмотра для проверки вашего сайта. Когда вы войдете в панель инструментов Cloudflare Pages, вы увидите свой новый проект.
Cloudflare Pages с Git
- Загрузите свой код в свой репозиторий git (GitHub, GitLab).
- Войдите в панель инструментов Cloudflare и выберите свою учетную запись в Главная страница учетной записи > Страницы.
- Выберите Создать новый проект и Подключить Git.
- Выберите проект git, который хотите развернуть, и нажмите Начать настройку.
- Выберите соответствующий пресет фреймворка в настройках сборки в зависимости от выбранного вами фреймворка Vite.
- Затем сохраните и разверните!
- Ваше приложение развернуто! (например,
https://<PROJECTNAME>.pages.dev/
)
После того, как ваш проект будет импортирован и развернут, все последующие отправки в ветки будут генерировать Preview Deployments, если не указано иное в ваших элементах управления сборкой ветки. Все изменения в производственной ветке (обычно “main”) приведут к производственному развертыванию.
Вы также можете добавлять собственные домены и управлять пользовательскими настройками сборки на страницах. Узнайте больше об интеграции Cloudflare Pages с Git.
Google Firebase
Убедитесь, что у вас установлены firebase-tools.
Создайте
firebase.json
и.firebaserc
в корне вашего проекта со следующим содержимым:firebase.json
:json{ "hosting": { "public": "dist", "ignore": [], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
.firebaserc
:js{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }
После запуска
npm run build
выполните развертывание с помощью командыfirebase deploy
.
Surge
Сначала установите surge, если вы еще этого не сделали.
Запустите
npm run build
.Выполните развертывание для 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.
Создайте учетную запись Render.
В Панель инструментов, нажмите кнопку Создать и выберите Статический сайт.
Подключите свою учетную запись GitHub/GitLab или используйте общедоступный репозиторий.
Укажите имя проекта и ветку.
- Команда сборки:
npm run build
- Каталог публикации:
dist
- Команда сборки:
Нажмите Создать статический сайт.
Ваше приложение должно быть развернуто на
https://<PROJECTNAME>.onrender.com/
.
По умолчанию любая новая фиксация, отправленная в указанную ветку, автоматически запускает новое развертывание. Авторазвертывание можно настроить в настройках проекта.
Вы также можете добавить в свой проект пользовательский домен.
Flightcontrol
Разверните свой статический сайт с помощью Flightcontrol, следуя этим инструкциям.
Kinsta Static Site Hosting
Разверните свой статический сайт с помощью Kinsta, следуя этим инструкциям.
xmit Static Site Hosting
Разверните свой статический сайт с помощью xmit, следуя этому руководству.