Desdobrar o Nuxt no GitHub Pages
Como desdobrar uma aplicação Nuxt no GitHub Pages?
O Nuxt dá para você a possibilidade de hospedar a sua aplicação web em qualquer hospedagem estática como GitHub Pages por exemplo.
Para desdobrar no GitHub Pages, você precisa gerar a sua aplicação web estática:
yarn generate
npm run generate
Isto criará uma pasta dist
com tudo dentro pronto para ser desdobrado na hospedagem do GitHub Pages. O ramo gh-pages
para repositório do projeto ou o ramo master
para o usuário ou organização do sítio.
CNAME
, é recomendado que o ficheiro seja colocado dentro do diretório static
. Mais informações sobre ele.Desdobrando para o GitHub Pages para armazenamento
Antes de tudo, você precisa certificar-se que está a usar o alvo estático visto que estamos hospedando no GitHub Pages:
export default {
target: 'static'
}
Se você estiver criando GitHub Pages para um repositório específico, e não tem nenhum domínio personalizado, a URL da página estará neste formato: http://<username(nome do usuário)>.github.io/<repository-name (nome do repositório)>
.
Se você desdobrar a pasta dist
sem adicionar a base do router , quando você visitar o sítio desdobrado você achará que o sítio não está funcionando devido aos recursos em falta. Isto é porque nós assumimos que a raiz do website será /
, mas neste caso ele é /<repository-name (nome do repositório)>
.
Para concertar o problema nós precisamos adicionar a configuração da base do router dentro do nuxt.config.js
:
export default {
target: 'static',
router: {
base: '/<repository-name>/'
}
}
Desta maneira, todos caminhos de recurso gerados serão prefixados com /<repository-name (nome do repositório)>/
, e da próxima vez que você desdobrar o código para as GitHub Pages, o sítio deve estar funcionando propriamente.
Desdobramento de linha de comando
Você pode também usar o pacote push-dir :
Primeiro instale ele:
yarn add --dev push-dir
npm install push-dir --save-dev
Adicione o comando deploy
ao seu package.json
com o ramo como gh-pages
para o repositório do projeto ou master
para o usuário ou organização do sítio.
"scripts": {
"dev": "nuxt",
"generate": "nuxt generate",
"start": "nuxt start",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},
Depois gere e desdobre a sua aplicação estática:
yarn generate
yarn deploy
npm run generate
npm run deploy
Construir servidor de desdobramento
Você pode levar o desdobramento um passo além e ao invés de ter que manualmente compilar e desdobrar os ficheiros a partir da sua instalação local, você pode fazer uso de um servidor de construção para monitorar o seu repositório para novas consolidações e depois, verificar, compilar e desdobrar tudo por você automaticamente.
GitHub Actions (Ações do GitHub)
Para desdobrar via Ações do GitHub , a ferramenta oficial para automação de software com o GitHub, se você não tiver um fluxo de trabalho você pode criar um novo ou acrescentar um novo passo ao seu fluxo de trabalho existente.
Ele usa o GitHub Pages Action (Ação das GitHub Pages) a qual empurra os ficheiros gerados da pasta dist
para o seu ramo padrão de GitHub Pages gh-pages
.
Com um fluxo de trabalho existente, adicione o seguinte passo:
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
Com um novo fluxo de trabalho, cole o seguinte conteúdo dentro de um novo ficheiro chamado cd.yml
dentro do diretório .github/workflows
:
name: cd
on: [push, pull_request]
jobs:
cd:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node: [14]
steps:
- name: Checkout
uses: actions/checkout@master
- name: Setup node env
uses: actions/setup-[email protected]
with:
node-version: ${{ matrix.node }}
- name: Install dependencies
run: yarn
- name: Generate
run: yarn generate
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
Depois envie isto para o seu repositório:
git add .github/workflows/cd.yml
git commit -m "Adding github pages deploy workflow"
git push origin
Ao terminar, você verá o seu ramo gh-pages
atualizado bem como o seu sítio.
Travis CI
Para desdobrar com o Travis CI , um servidor de construção gratuito para projetos de código-aberto, inicie a sessão através do GitHub, garantindo ao Travis acesso para visualizar os seus repositórios, e depois ative o servidor de construção para o seu repositório ao alternar o interruptor próximo aos nomes dos seus repositórios dentro da lista exibida.
A seguir, clique no ícone de engrenagem ao lado do nome do seu repositório para configurar as definições gerais do servidor de construção e ativar a funcionalidade Construa somente se .travis.yaml estiver present
ao alternar o interruptor.
Na mesma tela, role para baixo atá a secção de Variáveis de Ambientes e crie uma nova variável com nome GITHUB_ACCESS_TOKEN
e dentro campo de valor colar uma cópia do código (token) de acesso pessoal do GitHub que você criou recentemente e depois clique no botão Add (Adicionar)
.
Finalmente, crie um ficheiro de configuração .travis.yml
dentro da raiz do seu repositório com os seguintes conteúdos
language: node_js
node_js:
- '12'
cache:
directories:
- 'node_modules'
branches:
only:
- master
install:
- npm install
- npm run generate
script:
- echo "Skipping tests"
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_ACCESS_TOKEN # Defina dentro painel de controlo do travis-ci.org, marcado como seguro https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
target-branch: gh-pages
local-dir: dist
on:
branch: master
E depois envie isto para o seu repositório
git add .travis.yml
git commit -m "Adding travis deploy configuration"
git push origin
Agora, sempre que você enviar qualquer mudança para o seu repositório, a partir de dentro do Travis, você verá uma nova construção começar
E ao terminar, você verá o seu sítio da GitHub Pages atualizada automaticamente.
Appveyor
Para desdobrar através do Appveyor , uma outra ferramenta gratuita para servidor de construção para projetos de código-aberto, registe uma nova conta escolhendo a opção de autenticação com GitHub para iniciar a sessão usando a sua conta do GitHub.
Uma vez com a sessão iniciada, clique na ligação 'New project (Novo projeto)' e depois clique no botão 'Add (Adicionar)' ao lado do nome do seu repositório dentro lista exibida para ativar o servidor de construção sobre o seu repositório.
A seguir, dentro da raiz do seu repositório, crie um ficheiro de configuração appveyor.yml
com os seguintes conteúdos
environment:
# O Nuxt exige no mínimo o node na versão 12
nodejs_version: '12'
# Encripta dados sensíveis (https://ci.appveyor.com/tools/encrypt)
github_access_token:
secure: ENCRYPTED_GITHUB_ACCESS_TOKEN
github_email:
secure: ENCRYPTED_GITHUB_EMAIL
# Apenas executa sobre o ramo master
branches:
only:
- master
# Instala os scripts. (executa depois da clonagem do repositório)
install:
# muda a versão do nodejs
- ps: Install-Product node $env:nodejs_version
# instala os módulos
- npm install
# gera os ficheiros estáticos
- npm run generate
# configura a memória global das credenciais do git
- git config --global credential.helper store
- ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:github_access_token):x-oauth-[email protected]`n"
- git config --global user.email $env:github_email
# desdobre para as GitHub Pages
- npm run deploy
# Sem testes para executar
test: off
# Na realidade não é uma construção
build: off
NB esta configuração assume que você configurou o seu ficheiro package.json
conforme as instruções do Desdobramento de Linha de Comando
Antes no entanto de você consolidar este ficheiro, você precisará mudar as variáveis ENCRYPTED_GITHUB_ACCESS_TOKEN
e ENCRYPTED_GITHUB_EMAIL
com o código de acesso pessoal do GitHub e o seu endereço de email do GitHub, encriptados usando o ferramenta de encriptação do Appveyor .
Uma vez atualizado, envie o ficheiro para o seu repositório
git add appveyor.yml
git commit -m "Adding appveyor deploy configuration"
git push origin
Agora, sempre que você enviar alguma mudança para o seu repositório, a partir de dentro Appveyor, você verá uma nova construção iniciar.
E ao terminar, você verá do seu sítio do GitHub Pages atualizado automaticamente.
![Sébastien Chopin](/_nuxt/image/841744.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/add3e2.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)