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

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

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

package.json

json

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

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

NOTE

Эти руководства предоставляют инструкции по выполнению статического развертывания вашего сайта Vite. VITE также поддерживает рендеринг на стороне сервера. SSR относится к фронтальным рамкам, которые поддерживают запуск того же приложения в node.js, предварительно распространяют его в HTML и, наконец, увлажняют его на клиенте. Проверьте руководство SSR , чтобы узнать об этой функции. С другой стороны, если вы ищете интеграцию с традиционными фреймворками на стороне сервера, вместо этого ознакомьтесь с руководством по интеграции Backend .

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

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

bash

$ npm run build

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

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

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

bash

$ npm run preview

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

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

package.json

json

{
  "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», это приведет к созданию рабочего процесса, который создает и развертывает ваш проект, приводится образец рабочего процесса, который устанавливает зависимости и строительство с использованием NPM, предоставляется: Предусмотрен:

yml

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

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

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

# Устанавливает разрешения github_token, чтобы разрешить развертывание на страницы GitHub
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@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:
          # Загрузите Dist Polder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Гитлаб страницы и 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 в корне вашего проекта с контентом ниже. Это будет создавать и развернуть ваш сайт, когда вы вносите изменения в свой контент:

.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

Установите NetLify CLI .
Создайте новый сайт, используя ntl init .
Развернуть с помощью ntl deploy .

bash

# Установите CLI NetLify
$ npm install -g netlify-cli

# Создайте новый сайт в NetLify
$ ntl init

# Развернуть на уникальный URL -адрес предварительного просмотра
$ ntl deploy

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

bash

# Развернуть сайт в производство
$ ntl deploy --prod

NetLify с git

Встаньте свой код в репозиторий GIT (GitHub, Gitlab, Bitbucket, Azure DevOps).
Импортировать проект в NetLify.
Выберите ветвь, выходной каталог и настройте переменные среды, если применимо.
Нажмите на развертывание .
Ваше приложение Vite развернуто!

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

Вертел

Vercel Cli

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

bash

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

Vercel for git

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

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

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

CloudFlare Pages

Страницы CloudFlare Через Wrangler

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

bash

# Установите Wrangler CLI
$ npm install -g wrangler

# Войти в учетную запись CloudFlare от CLI
$ wrangler login

# Запустите свою команду сборки
$ npm run build

# Создайте новое развертывание
$ npx wrangler pages deploy dist

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

Страницы CloudFlare С GIT

Встаньте свой код в свой репозиторий GIT (GitHub, Gitlab).
Войдите в приборную панель CloudFlare и выберите свою учетную запись в учетной записи Home > Страницы .
Выберите «Создать новый проект» и опцию Connect GIT .
Выберите проект GIT, который вы хотите развернуть, и нажмите «Настройка»
Выберите соответствующую предварительную установку Framework в настройке сборки в зависимости от выбранной вами структуры Vite.
Затем сохраните и разверните!
Ваше приложение развернуто! (например https://<PROJECTNAME>.pages.dev/ )

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

Вы также можете добавить пользовательские домены и обрабатывать настройки настраивания на страницах. Узнайте больше о страницах CloudFlare GIT Integration .

Google Firebase

Убедитесь, что у вас установлены инструменты Firebase .

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

firebase.json

json

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

.firebaserc

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

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

Всплеск

Сначала установите Surge , если вы еще этого не сделали.
Запустить npm run build .
Развернуть для всплеска, набрав surge dist .

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

Azure Статические Веб -Приложения

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

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

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

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

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

Оказывать

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

Создайте учетную запись рендеринга .
На приборной панели нажмите новую кнопку и выберите «Статический сайт» .
Подключите свою учетную запись GitHub/Gitlab или используйте общественный репозиторий.
Укажите название проекта и филиал.
- Команда сборки : npm install && npm run build
- Опубликовать каталог : dist
Нажмите «Создать Статический Сайт» .
Ваше приложение должно быть развернуто на https://<PROJECTNAME>.onrender.com/ .

По умолчанию любой новый коммит, выдвинутый в указанную филиал, автоматически запустит новое развертывание. Auto-Deploy может быть настроен в настройках проекта.

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

FlightControl

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

Kinsta Static Hosting Сайта

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

Xmit Static Hosting Сайта

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

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

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

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

GitHub Pages ​

Гитлаб страницы и gitlab ci ​

NetLify ​

NetLify CLI ​

NetLify с git ​

Вертел ​

Vercel Cli ​

Vercel for git ​

CloudFlare Pages ​

Страницы CloudFlare Через Wrangler ​

Страницы CloudFlare С GIT ​

Google Firebase ​

Всплеск ​

Azure Статические Веб -Приложения ​

Оказывать ​

FlightControl ​

Kinsta Static Hosting Сайта ​

Xmit Static Hosting Сайта ​

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

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

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

GitHub Pages

Гитлаб страницы и gitlab ci

NetLify

NetLify CLI

NetLify с git

Вертел

Vercel Cli

Vercel for git

CloudFlare Pages

Страницы CloudFlare Через Wrangler

Страницы CloudFlare С GIT

Google Firebase

Всплеск

Azure Статические Веб -Приложения

Оказывать

FlightControl

Kinsta Static Hosting Сайта

Xmit Static Hosting Сайта