Déploiement de Sites Web avec GitHub Actions

Découvrez comment déployer différents types de sites web avec GitHub Actions.

Déploiement d’un Site React

1. Configuration du Projet

// 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 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

Déploiement d’un Site Vue.js

1. Configuration du Projet

// 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 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

Déploiement d’un Site Next.js

1. Configuration du Projet

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

2. Workflow 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

Déploiement d’un Site Hugo

1. Configuration du Projet

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

2. Workflow 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

Bonnes Pratiques

1. Configuration

   • Variables d’environnement
   • Secrets GitHub
   • Cache des dépendances
   • Tests automatisés

2. Performance

   • Build optimisé
   • Assets minifiés
   • Cache efficace
   • Monitoring

3. Sécurité

   • Tokens sécurisés
   • Permissions minimales
   • Validation des entrées
   • Mises à jour régulières

Conclusion

Points clés à retenir :

• Déploiement automatique
• Configuration adaptée
• Performance optimisée
• Sécurité renforcée

Recommandations :

• Choisir le bon workflow
• Automatiser les tests
• Sécuriser les processus
• Suivre les bonnes pratiques
• Se former sur GitHub Actions