vite github pages deployer
v1.4.0
Implemente su aplicación Vite en Github Pages, de un vistazo.
vite como herramienta build . Vue, React, Svelte... ¡Lo que sea! - name: Vite Github Pages Deployer
uses: skywarth/[email protected]
Puede utilizar esta acción simplemente agregándola apropiadamente a los archivos yaml de su acción.
Asegúrese de colocar este paso después del paso de "pagar".
- name : Vite Github Pages Deployer
uses : skywarth/[email protected]
id : deploy_to_pages Tienes que colocar la sección de entorno justo antes de los steps . Esto permite la liberación del entorno, en la pestaña de entornos.
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}Debe establecer el permiso adecuado para la acción para poder liberar correctamente el entorno y el artefacto. Si no lo hace, puede recibir errores de permiso.
La declaración de permiso se puede colocar en cualquier lugar antes de jobs: sección.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : writeSi no sabe qué hacer, qué acciones son o dónde colocar las piezas de código en la sección de uso, siga estos pasos:
./.github/workflows/vite-github-pages-deploy.yml . En esencia, cree una carpeta .github en la raíz de su proyecto y cree un archivo yml allí.master , o en su próxima ejecución manual desde la pestaña de acciones, esta acción se ejecutará y su proyecto se implementará en las páginas de 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
¿Quieres verlo en acción? Claro, dirígete a este proyecto de vue para verlo en vivo: https://github.com/skywarth/country-routing-algorithm-demo-vue
public_base_path (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | /{your-repo-name} O / si tienes CNAME | /my-vite-project |
Cadena de ruta base pública para Vite, esto afecta las rutas, el historial y los enlaces de activos. Asegúrese de proporcionar la información adecuada, ya que GitHub Pages almacena su aplicación en un directorio bajo un subdominio. Si planea implementar en una plataforma alternativa como Vercel, simplemente debe proporcionar / .
En circunstancias normales, no es necesario proporcionar/anular este parámetro; la acción lo establecerá en el nombre de su repositorio de manera adecuada.
public_base_path :public_base_path , se utilizará independientemente.public_base_path :CNAME para la configuración del dominio personalizado de GitHub Pages, entonces el valor predeterminado public_base_path se resolverá en /CNAME , el valor predeterminado public_base_path se resolverá en /{your-repo-name} Vea la sugerencia para la expansión CNAME aquí
Agradecido a Greg Sadetsky por su propuesta sobre la alternancia del valor predeterminado de esta entrada. Además, agradezco su colaboración para explicar la configuración del dominio personalizado de las páginas de GitHub y la fase de prueba de estos cambios.
build_path (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | ./dist | - ./deploy- ./dist/browser |
¿Qué carpeta desea que use su página de GitHub como directorio raíz, después del proceso de compilación? Simplemente es el directorio de salida de su compilación, como ./dist . Si su configuración vite se exporta a una carpeta que no sea ./dist , entonces debe pasarla como parámetro.
install_phase_node_env (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | dev | - dev- production- staging- test- my-little-pony-env |
Entorno de nodo que se utilizará para la instalación de dependencias. Es imperativo que utilice un entorno que tenga 'vite' como dependencia . Común y naturalmente, ese env es dev .
Si no proporciona un NODE_ENV que tenga vite como dependencia (verifique su paquete.json), recibirá sh: 1: vite: not found durante la fase de compilación.
build_phase_node_env (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | production | - dev- production- staging- test- my-little-pony-env |
Entorno de nodo que se utilizará para la fase de construcción. Puede proporcionar cualquier valor NODE_ENV válido para esto, ya que las compilaciones de nodos tienden a cambiar para diferentes entornos (por ejemplo: oculta las funciones de depuración de la producción).
artifact_name (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | github-pages | - what-a-cool-artifact- ah-yes-ze-artifact |
Nombre deseado para el artefacto expuesto. Este nombre es visible en el trabajo y se utiliza como nombre de los artefactos.
package_manager (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | npm | - npm- yarn |
Indique el administrador de paquetes de preferencia. Se utilizará para instalar dependencias y construir el dist . Por ejemplo, si prefiere/usa yarn como administrador de paquetes para el proyecto, puede pasar package_manager: 'yarn' como entrada que luego se usará como yarn install y yarn build .
debug_mode (opcional)| Tipo | Por defecto | Valores de ejemplo |
|---|---|---|
string | 'false' | - 'true'- 'false' |
Controla el modo de depuración, cadena, 'true' es para activado. Cuando se activa, generará cierta información sobre ciertos pasos. Se utiliza principalmente para el desarrollo, pero úselo como desee para inspeccionar su entorno y sus variables.
github_pages_url| Tipo | Valores de ejemplo |
|---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
Este valor de salida se utilizará para adquirir la URL de las páginas de github después de la implementación. Se puede acceder de esta manera: ${{ steps.deploy_to_pages.outputs.github_pages_url }} (deploy_to_pages es la identificación del paso en el que ejecuta Vite Github Pages Deployer).
Se espera que se utilice como una forma de publicar el entorno durante el trabajo, así:
environment:
name: demo
url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
Vea un flujo de trabajo de ejemplo para comprender cómo utilizar este resultado.
Error: Environment URL '' is not a valid http(s) URL, so it will not be shown as a link in the workflow graph.
Causa: Falta la declaración de entorno en la acción; debe agregarla a su archivo yaml de acción para resolver el error/advertencia y mostrar el entorno publicado en la pestaña de environments del repositorio.
Solución: agregue lo siguiente a su acción:
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 debe ser idéntico a la id del paso en el que ejecuta el Vite GitHub pages deployer . Consulte el flujo de trabajo de ejemplo para obtener más detalles.
GITHUB_TOKEN Error: Error: Ensure GITHUB_TOKEN has permission "id-token: write".
Causa: El permiso no se configuró como se indica en la sección de uso. Si no se otorgan los permisos adecuados a la acción, no podrá crear artefactos ni crear entornos.
Solución: agregue el siguiente código sobre permisos a su archivo yaml de acción.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
Consulte el flujo de trabajo de ejemplo si no está seguro de dónde colocarlo.
package-lock.json no está presente cuando se usa npm como preferencia del administrador de paquetes. Error: The command can only install with an existing package-lock.json...
Causa: Si la preferencia de entrada package_manager está configurada en npm (o de forma predeterminada, no asignada), instalará dependencias usando npm ci que utiliza package-lock.json . En este caso, asegúrese de que package-lock.json esté presente en la raíz de su proyecto.
Solución: agregue su archivo package-lock.json a su proyecto. Si está en el directorio pero no aparece en el repositorio, verifique su archivo gitignore y elimínelo de gitignore. Alternativamente, puede configurar yarn como su administrador de paquetes preferido para la instalación de dependencias mediante la entrada del parámetro package_manager de la acción.
bash-files ) bash-files )¿Hay algo que requieres, esta acción no cumple con tus expectativas o carece de ciertos futuros que te impiden utilizarla? Abra un problema y lo agregaremos a la hoja de ruta/TODO. Las contribuciones son bienvenidas.
${{github.action_path}} : te proporciona el directorio para esta acción.
${{ github.workspace }} : te proporciona el directorio del proyecto (por ejemplo: /home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue)
Cuando importa un archivo sh en el shell bash, solo se puede acceder a él durante ese paso. Esto se debe al hecho de que cada paso es un caparazón en sí mismo.
Dentro de archivos sh separados, puede acceder a las variables de entrada de la acción por su respectivo nombre en mayúscula. Por ejemplo:
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 }}
Si ejecuta archivos sh en pasos, no espere que cada shell comparta los entornos. Por ejemplo, en un paso instalas dependencias en install.sh, en otro paso construyes mediante build.sh. No funcionará porque las bibliotecas instaladas solo están disponibles para el paso install.sh. Esta es la razón por la que fallaron bash-files . Consulté GPT pero aparentemente no hay forma de lograrlo.
