Implante seu aplicativo Vite no Github Pages rapidamente.
vite
como ferramenta build
. Vue, React, Svelte... Você escolhe! - name: Vite Github Pages Deployer
uses: skywarth/[email protected]
Você pode usar esta ação simplesmente adicionando-a aos arquivos yaml
da sua ação de forma adequada.
Certifique-se de colocar esta etapa após a etapa de 'checkout'.
- name : Vite Github Pages Deployer
uses : skywarth/[email protected]
id : deploy_to_pages
Você deve colocar a seção de ambiente logo antes das steps
. Isso permite a liberação do ambiente, na aba ambientes.
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}
Você precisa definir a permissão adequada para a ação, a fim de liberar o ambiente e o artefato com êxito. Caso contrário, você poderá receber erros de permissão.
A declaração de permissão pode ser colocada em qualquer lugar antes jobs:
seção.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : write
Se você não sabe o que fazer, quais são as ações ou onde colocar as partes do código na seção de uso, siga estas etapas:
./.github/workflows/vite-github-pages-deploy.yml
. Então, em essência, crie uma pasta .github
na raiz do seu projeto e crie um arquivo yml
lá.master
branch, ou em sua próxima execução manual na guia de ações, esta ação será executada e seu projeto será implantado nas páginas do 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
Quer vê-lo em ação? Claro, vá para este projeto vue para vê-lo ao vivo: https://github.com/skywarth/country-routing-algorithm-demo-vue
public_base_path
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | /{your-repo-name} OU / se você tiver CNAME | /my-vite-project |
String de caminho base público para Vite, isso afeta o roteamento, o histórico e os links de ativos. Certifique-se de fornecer adequadamente, pois o GitHub Pages armazena seu aplicativo em um diretório sob um subdomínio. Se você planeja implantar em uma plataforma alternativa como Vercel, basta fornecer /
.
Em circunstâncias normais, você não precisa fornecer/substituir este parâmetro, a ação irá configurá-lo para o nome do seu repositório adequadamente.
public_base_path
é resolvido:public_base_path
for fornecido, ele será usado independentemente.public_base_path
NÃO for fornecido:CNAME
para a configuração do domínio personalizado do GitHub Pages, o valor padrão public_base_path
será resolvido para /
CNAME
, o valor padrão public_base_path
será resolvido para /{your-repo-name}
Veja aqui a sugestão de expansão do CNAME
Grato a Greg Sadetsky por sua proposta sobre a alternância do valor padrão desta entrada. Além disso, sou grato por sua colaboração na explicação da configuração do domínio personalizado das páginas do GitHub e na fase de teste dessas mudanças.
build_path
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | ./dist | - ./deploy - ./dist/browser |
Qual pasta você deseja que sua página GitHub use como diretório raiz, após o processo de construção. Simplesmente é o diretório de saída da sua compilação, como ./dist
. Se a configuração do seu vite
for exportada para uma pasta diferente de ./dist
, você deverá passá-la como parâmetro.
install_phase_node_env
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | dev | dev - production - staging - test - my-little-pony-env |
Ambiente de nó que será utilizado para instalação de dependências. É imprescindível que você use um ambiente que tenha 'vite' como dependência . Comumente e naturalmente, esse env é dev
.
Se você não fornecer um NODE_ENV que tenha vite
como dependência (verifique seu package.json), você receberá sh: 1: vite: not found
durante a fase de construção.
build_phase_node_env
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | production | dev - production - staging - test - my-little-pony-env |
Ambiente de nó que será usado para a fase de construção. Você pode fornecer qualquer valor NODE_ENV válido para isso, já que as construções de nós tendem a mudar para ambientes diferentes (por exemplo: você oculta recursos de depuração da produção).
artifact_name
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | github-pages | - what-a-cool-artifact - ah-yes-ze-artifact |
Nome desejado para o artefato exposto. Este nome é visível no trabalho e usado como nome dos artefatos.
package_manager
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | npm | - npm - yarn |
Indique o gerenciador de pacotes de preferência. Ele será usado para instalar dependências e construir o dist
. Por exemplo, se você preferir/usar yarn
como seu gerenciador de pacotes para o projeto, então você pode passar package_manager: 'yarn'
como entrada que será usada como yarn install
e yarn build
.
debug_mode
(opcional)Tipo | Padrão | Valores de exemplo |
---|---|---|
string | 'false' | - 'true' - 'false' |
Controla o modo de depuração, string, 'true'
está ativado. Quando ativado, ele exibirá determinadas informações em determinadas etapas. Usado principalmente para desenvolvimento, mas use-o como desejar para inspecionar seu ambiente e variáveis.
github_pages_url
Tipo | Valores de exemplo |
---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
Este valor de saída deve ser usado para adquirir o URL das páginas do github após a implantação. Ele pode ser acessado assim: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
(deploy_to_pages é o id da etapa em que você executa o Vite Github Pages Deployer).
Espera-se que seja utilizado como forma de publicar o ambiente durante o trabalho, assim:
environment:
name: demo
url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
Veja um exemplo de fluxo de trabalho para entender como utilizar esta saída
Erro: Environment URL '' is not a valid http(s) URL, so it will not be shown as a link in the workflow graph.
Causa: A declaração de ambiente está faltando na ação, você deve adicioná-la ao arquivo yaml
da ação para resolver o erro/aviso e exibir o ambiente liberado na guia de environments
do repositório.
Solução: adicione o seguinte à sua ação:
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
deve ser idêntico ao id
da etapa em que você executa o Vite GitHub pages deployer
. Consulte o exemplo de fluxo de trabalho para obter detalhes.
GITHUB_TOKEN
Erro: Error: Ensure GITHUB_TOKEN has permission "id-token: write".
Causa: A permissão não foi definida conforme indicado na seção de uso. Se as permissões adequadas não forem concedidas à ação, ela não será capaz de criar artefatos ou ambientes.
Solução: adicione o seguinte código sobre permissões ao seu arquivo yaml
de ação.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
Veja o exemplo de fluxo de trabalho se não tiver certeza de onde colocá-lo.
package-lock.json
não está presente ao usar npm
como preferência do gerenciador de pacotes. Erro: The
command can only install with an existing package-lock.json...
Causa: Se a preferência de entrada package_manager
estiver definida como npm
(ou padrão, não atribuído), ele instalará dependências usando npm ci
que utiliza package-lock.json
. Neste caso, certifique-se de que package-lock.json
esteja presente na raiz do seu projeto.
Solução: adicione seu arquivo package-lock.json
ao seu projeto. Se estiver no diretório, mas não aparecer no repositório, verifique seu arquivo gitignore e remova-o do gitignore. Alternativamente, você pode definir yarn
como seu gerenciador de pacotes preferido para instalação de dependência por meio da entrada do parâmetro package_manager
da ação.
bash-files
) bash-files
)Há algo que você precisa, essa ação não atende às suas expectativas ou faltam certos futuros que o impedem de usá-la? Abra um problema e nós o adicionamos ao roteiro/TODOs. Contribuições são bem-vindas.
${{github.action_path}}
: fornece o diretório para esta ação em si.
${{ github.workspace }}
: fornece o diretório do projeto (por exemplo: /home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue)
Quando você importa um arquivo sh no shell bash, ele só fica acessível durante essa etapa. Isso se deve ao fato de que cada etapa é uma casca por si só.
Dentro de arquivos sh
separados, você pode acessar variáveis de entrada da ação por seus respectivos nomes em letras maiúsculas. Por exemplo:
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 }}
Se você executar arquivos sh
em etapas, não espere que cada shell compartilhe os ambientes. Por exemplo, em uma etapa você instala dependências em install.sh, em outra etapa você constrói por build.sh. Não funcionará porque as bibliotecas instaladas estão disponíveis apenas para a etapa install.sh. É por isso que bash-files
falharam, consultei o GPT, mas aparentemente não há como conseguir isso.