Разверните свое приложение Vite на страницах Github с первого взгляда.
vite в качестве инструмента build . Vue, React, Svelte... Что угодно! - name: Vite Github Pages Deployer
uses: skywarth/[email protected]
Вы можете использовать это действие, просто добавив его в файлы yaml вашего действия соответствующим образом.
Обязательно разместите этот шаг после шага «Оформление заказа».
- name : Vite Github Pages Deployer
uses : skywarth/[email protected]
id : deploy_to_pages Вы должны разместить раздел «Окружающая среда» прямо перед steps . Это позволит освободить среду на вкладке «Среды».
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}Вам необходимо установить правильное разрешение для действия, чтобы успешно освободить среду и артефакт. Если вы этого не сделаете, вы можете получить ошибки разрешения.
Декларацию о разрешении можно разместить в любом месте перед разделом jobs: :.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : writeЕсли вы не знаете, что делать, какие действия или где разместить фрагменты кода в разделе использования, выполните следующие действия:
./.github/workflows/vite-github-pages-deploy.yml . По сути, создайте папку .github в корне вашего проекта и создайте там файл yml .master или при следующем запуске вручную на вкладке действий это действие будет запущено, и ваш проект будет развернут на страницах github. name : Vite Github Pages Deploy
on :
# Runs on pushes targeting the default branch
push :
branches : ["master", "main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch :
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : write
concurrency :
group : " pages "
cancel-in-progress : false
jobs :
# Build job
build :
runs-on : ubuntu-latest
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}
steps :
- name : Checkout
uses : actions/checkout@v3
- name : Vite Github Pages Deployer
uses : skywarth/vite-github-pages-deployer@master
id : deploy_to_pages
Хотите увидеть это в действии? Конечно, зайдите на этот проект vue, чтобы увидеть его вживую: https://github.com/skywarth/country-routing-algorithm-demo-vue
public_base_path (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | /{your-repo-name} ИЛИ / если у вас есть CNAME | /my-vite-project |
Строка общедоступного базового пути для Vite, это влияет на маршрутизацию, историю и ссылки на активы. Обязательно укажите соответствующие данные, поскольку GitHub Pages хранит ваше приложение в каталоге поддоменом. Если вы планируете развертывание на альтернативной платформе, такой как Vercel, вам следует просто указать / .
В обычных обстоятельствах вам не нужно предоставлять/переопределять этот параметр, действие соответствующим образом установит для него имя вашего репо.
public_base_path :public_base_path , он будет использоваться независимо.public_base_path НЕ указан:CNAME для настройки пользовательского домена GitHub Pages, то значение по умолчанию public_base_path будет разрешено как /CNAME , значение по умолчанию public_base_path будет разрешаться в /{your-repo-name} См. предложение по расширению CNAME здесь.
Благодарен Грегу Садецки за его предложение об изменении значения по умолчанию для этого входа. Также благодарен за его сотрудничество в объяснении настройки пользовательского домена на страницах GitHub и этапе тестирования этих изменений.
build_path (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | ./dist | - ./deploy- ./dist/browser |
Какую папку вы хотите, чтобы ваша страница GitHub использовала в качестве корневого каталога после процесса сборки. Просто это выходной каталог вашей сборки, например ./dist . Если ваша конфигурация vite экспортируется в папку, отличную от ./dist , вам следует передать ее в качестве параметра.
install_phase_node_env (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | dev | - dev- production- staging- test- my-little-pony-env |
Среда узла, которая будет использоваться для установки зависимостей. Крайне важно, чтобы вы использовали среду, которая имеет зависимость «vite» . Обычно и естественно, что env — это dev .
Если вы не предоставите NODE_ENV, который имеет зависимость vite (проверьте свой package.json), вы получите sh: 1: vite: not found на этапе сборки.
build_phase_node_env (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | production | - dev- production- staging- test- my-little-pony-env |
Среда узла, которая будет использоваться на этапе сборки. Для этого вы можете указать любое допустимое значение NODE_ENV, поскольку сборки узлов имеют тенденцию меняться для разных сред (например: вы скрываете функции отладки от производства).
artifact_name (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | github-pages | - what-a-cool-artifact- ah-yes-ze-artifact |
Желаемое имя для обнаруженного артефакта. Это имя отображается в задании и используется в качестве имени артефакта.
package_manager (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | npm | - npm- yarn |
Укажите предпочтительный менеджер пакетов. Он будет использоваться для установки зависимостей и построения dist . Например, если вы предпочитаете/используете yarn в качестве менеджера пакетов для проекта, вы можете передать package_manager: 'yarn' в качестве входных данных, которые затем будут использоваться для yarn install и yarn build .
debug_mode (необязательно)| Тип | По умолчанию | Примеры значений |
|---|---|---|
string | 'false' | - 'true'- 'false' |
Управляет режимом отладки, строка, 'true' для включения. При включении он будет выводить определенную информацию об определенных шагах. В основном используется для разработки, но используйте его по своему усмотрению для проверки окружения и переменных.
github_pages_url| Тип | Примеры значений |
|---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
Это выходное значение будет использоваться для получения URL-адреса страниц github после развертывания. Доступ к нему можно получить так: ${{ steps.deploy_to_pages.outputs.github_pages_url }} (deploy_to_pages — это идентификатор шага, на котором вы запускаете Vite Github Pages Deployer).
Ожидается, что он будет использоваться как способ публикации среды во время задания, например:
environment:
name: demo
url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
См. пример рабочего процесса, чтобы понять, как использовать этот результат.
Ошибка: Environment URL '' is not a valid http(s) URL, so it will not be shown as a link in the workflow graph.
Причина. В действии отсутствует декларация среды. Вам следует добавить ее в yaml файл действия, чтобы устранить ошибку/предупреждение и отобразить выпущенную среду на вкладке environments в репозитории.
Решение. Добавьте к своему действию следующее:
environment :
# Name could be whatever you wish. It'll be visible publicly under the environments tab.
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}deploy_to_pages должно быть идентично id шага, на котором вы запускаете Vite GitHub pages deployer . Подробности смотрите в примере рабочего процесса.
GITHUB_TOKEN Ошибка: Error: Ensure GITHUB_TOKEN has permission "id-token: write".
Причина: Разрешение не было установлено, как указано в разделе использования. Если действию не предоставлены соответствующие разрешения, оно не сможет создавать артефакты или среды.
Решение. Добавьте следующий код о разрешениях в файл yaml действия.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
Посмотрите пример рабочего процесса, если вы не уверены, где его разместить.
package-lock.json отсутствует при использовании npm в качестве предпочтения менеджера пакетов. Ошибка: The npm ci command can only install with an existing package-lock.json...
Причина. Если для параметра ввода package_manager установлено значение npm (или по умолчанию оно не назначено), зависимости будут установлены с помощью npm ci , который использует package-lock.json . В этом случае убедитесь, что package-lock.json присутствует в корне вашего проекта.
Решение. Добавьте файл package-lock.json в свой проект. Если он есть в каталоге, но не отображается в репозитории, проверьте файл gitignore и удалите его из gitignore. В качестве альтернативы вы можете установить yarn в качестве предпочтительного менеджера пакетов для установки зависимостей с помощью ввода параметра package_manager действия.
bash-files ) bash-files )Есть ли что-то, что вам нужно, не соответствует ли это действие вашим ожиданиям или у него нет определенных вариантов будущего, которые не позволяют вам его использовать? Откройте задачу, и мы добавим ее в дорожную карту/TODO. Взносы приветствуются.
${{github.action_path}} : дает вам каталог для самого действия.
${{ github.workspace }} : дает вам каталог проекта (например: /home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue)
Когда вы импортируете файл sh в оболочку bash, он доступен только на этом этапе. Это связано с тем, что каждый шаг представляет собой отдельную оболочку.
Внутри отдельных sh файлов вы можете получить доступ к входным переменным действия по их соответствующим именам в верхнем регистре. Например:
inputs:
package_manager:
description: "Your preference of package manager: 'npm' and 'yarn' are possible values."
required: false
default: 'npm'
${{ inputs.package_manager }}sh : $PACKAGE_MANAGER env:
SOME_OTHER_NAME: ${{ inputs.package_manager }}
Если вы запускаете sh -файлы поэтапно, не ждите, что каждая оболочка будет использовать одну и ту же среду. Например, на одном этапе вы устанавливаете зависимости в install.sh, на другом — строите с помощью build.sh. Это не сработает, поскольку установленные библиотеки доступны только на этапе install.sh. Вот почему bash-files потерпели неудачу, я сверился с GPT, но, видимо, этого невозможно добиться.