Como parte de nossa jornada como desenvolvedores, adquirimos valiosas lições com a comunidade. Neste artigo, compartilharei algumas dicas que poderiam ter me ajudado e que você precisa ter em mente ao implantar seu projeto Angular no GitHub Pages. Minha intenção é contribuir com o conhecimento coletivo e ajudar você a navegar por esse processo com sucesso.
Por que usar o Github Pages ?
O GitHub Pages oferece uma solução gratuita e poderosa para hospedar sua aplicação diretamente de seu repositório GitHub. Neste artigo, exploraremos como implantar facilmente seu projeto Angular para que ele esteja acessível a todos.
- Para começar é necessario ter feito uma configuração na aba "Pages" nas configurações do seu repositorio no github, selecione em "Source" a opção github actions.
- Crie um diretório chamado ".github/workflows" dentro do seu projeto e, dentro dele, adicione um arquivo chamado "static.yml". Em seguida, insira o seguinte código:
name: Deploy static content to Pages
on:
push:
branches: ["master"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- uses: actions/configure-pages@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build --prod
- uses: actions/upload-pages-artifact@v2
with:
path: './dist/remnant2build'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
É importante verificar se o "node-version" especificado é compatível com o seu projeto e ajustar o "path" de compilação para que corresponda às necessidades específicas do seu projeto. Também ajustar o nome da Branch para que acontece o deploy automatico quando der o push na branch especificada.
- Configure a URL base para /project-name-github/ para o ambiente do github. Isso significa que todos os URLs relativos no seu aplicativo Angular serão resolvidos em relação a /project-name-github/ como a raiz. No seu ambiente de desenvolvimento pode deixar "./".
- Faça a mesma alteração no angular.json
- Após essas alterações realize o push e verifique o workflow na aba "action" no github do projeto.
- No ultimo step do workflow "Complete Job" deve conter a url do seu projeto angular rodando.
Precaução:
- Fique atento aos caminhos relativos no projeto, pois eles podem causar problemas no ambiente final.
Espero que este artigo tenha sido útil para você durante esse processo.
Top comments (0)