Implantação de Sites com GitHub Actions

Descubra como implantar diferentes tipos de sites com GitHub Actions.

Implantação de um Site React

1. Configuração do Projeto

// package.json
{
  "name": "mon-site-react",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

2. Workflow do GitHub Actions

# .github/workflows/react.yml
name: Deploy React App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

Implantação de um Site Vue.js

1. Configuração do Projeto

// package.json
{
  "name": "mon-site-vue",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

2. Workflow do GitHub Actions

# .github/workflows/vue.yml
name: Deploy Vue App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Implantação de um Site Next.js

1. Configuração do Projeto

// package.json
{
  "name": "mon-site-next",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

2. Workflow do GitHub Actions

# .github/workflows/next.yml
name: Deploy Next.js App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        
      - name: Export
        run: npm run export
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

Implantação de um Site Hugo

1. Configuração do Projeto

# config.yml
baseURL: "https://mon-site.com/"
languageCode: "fr-fr"
title: "Mon Site Hugo"

2. Workflow do GitHub Actions

# .github/workflows/hugo.yml
name: Deploy Hugo site to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      
      - name: Build with Hugo
        run: hugo --minify
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

Boas Práticas

1. Configuração

   • Variáveis de ambiente
   • Secrets do GitHub
   • Cache de dependências
   • Testes automatizados

2. Desempenho

   • Build otimizado
   • Assets minificados
   • Cache eficiente
   • Monitoramento

3. Segurança

   • Tokens seguros
   • Permissões mínimas
   • Validação de entradas
   • Atualizações regulares

Conclusão

Pontos-chave a lembrar:

• Implantação automática
• Configuração adequada
• Desempenho otimizado
• Segurança reforçada

Recomendações:

• Escolher o workflow certo
• Automatizar os testes
• Proteger os processos
• Seguir as boas práticas
• Estudar GitHub Actions a fundo