Разверните свое приложение 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, но, видимо, этого невозможно добиться.