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 : writeSe 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.