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.

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-node@v2.1.2
        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-basic@github.com`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.