CI/CD dla Next.js z użyciem GitHub Actions

# .github/workflows/ci.yml
name: CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
# Kolejny push do PR-a anuluje poprzedni, wciąż trwający przebieg
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 
# Token z minimalnymi uprawnieniami i joby, które potrzebują więcej,
# deklarują to u siebie
permissions:
  contents: read
 
jobs:
  quality:
    name: Code Quality
    runs-on: ubuntu-latest
 
    steps:
      - uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v4
        with:
          version: 9
 
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
 
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
 
      - name: Lint
        run: pnpm lint
 
      - name: Type check
        run: pnpm tsc --noEmit
 
      - name: Unit tests
        run: pnpm test
 
      - name: Build
        run: pnpm build
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
          NEXT_PUBLIC_APP_URL: https://example.com

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'pnpm'
 
- name: Cache Next.js build
  uses: actions/cache@v4
  with:
    path: |
      .next/cache
    key: nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ hashFiles('**/*.ts', '**/*.tsx') }}
    restore-keys: |
      nextjs-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
      nextjs-${{ runner.os }}-

e2e:
  name: E2E Tests
  runs-on: ubuntu-latest
  needs: quality # Uruchom po quality check
 
  steps:
    - uses: actions/checkout@v4
 
    - uses: pnpm/action-setup@v4
      with:
        version: 9
 
    - uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: 'pnpm'
 
    - name: Install dependencies
      run: pnpm install --frozen-lockfile
 
    - name: Install Playwright browsers
      run: pnpm exec playwright install --with-deps chromium
 
    - name: Build
      run: pnpm build
      env:
        DATABASE_URL: ${{ secrets.DATABASE_URL }}
 
    - name: Run E2E tests
      run: pnpm exec playwright test
      env:
        BASE_URL: http://localhost:3000
 
    - name: Upload test results
      if: failure()
      uses: actions/upload-artifact@v4
      with:
        name: playwright-report
        path: playwright-report/

lighthouse:
  name: Lighthouse CI
  runs-on: ubuntu-latest
  needs: quality
 
  steps:
    - uses: actions/checkout@v4
 
    - uses: pnpm/action-setup@v4
      with:
        version: 9
 
    - uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: 'pnpm'
 
    - name: Install dependencies
      run: pnpm install --frozen-lockfile
 
    - name: Build
      run: pnpm build
 
    - name: Run Lighthouse CI
      uses: treosh/lighthouse-ci-action@v12
      with:
        configPath: './lighthouserc.json'
        uploadArtifacts: true

// lighthouserc.json
{
  "ci": {
    "collect": {
      "startServerCommand": "pnpm start",
      "url": ["http://localhost:3000", "http://localhost:3000/blog"],
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["error", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.9 }]
      }
    }
  }
}

// playwright.config.ts
import { defineConfig } from '@playwright/test'
 
export default defineConfig({
  use: {
    baseURL: 'http://127.0.0.1:3000',
  },
  webServer: {
    command: 'pnpm start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
  },
})

deploy:
  name: Deploy to Production
  runs-on: ubuntu-latest
  needs: [quality, e2e]
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
 
  steps:
    - name: Deploy via SSH
      uses: appleboy/ssh-action@v1
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: |
          cd /opt/apps/nextjs-app
          git pull origin main
          pnpm install --frozen-lockfile
          pnpm build
          pm2 restart nextjs-app
 
    - name: Verify deployment
      run: |
        sleep 10
        curl -f https://example.com || exit 1

deploy:
  name: Build & Deploy Docker
  runs-on: ubuntu-latest
  needs: [quality]
  if: github.ref == 'refs/heads/main'
 
  steps:
    - uses: actions/checkout@v4
 
    - name: Login to registry
      uses: docker/login-action@v3
      with:
        registry: ghcr.io
        username: ${{ github.actor }}
        password: ${{ secrets.GITHUB_TOKEN }}
 
    - name: Build and push
      uses: docker/build-push-action@v6
      with:
        context: .
        push: true
        tags: |
          ghcr.io/${{ github.repository }}:latest
          ghcr.io/${{ github.repository }}:${{ github.sha }}
 
    - name: Deploy to server
      uses: appleboy/ssh-action@v1
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: |
          docker pull ghcr.io/${{ github.repository }}:latest
          docker stop nextjs-app || true
          docker rm nextjs-app || true
          docker run -d --name nextjs-app \
            -p 3000:3000 \
            --env-file /opt/apps/.env \
            --restart unless-stopped \
            ghcr.io/${{ github.repository }}:latest
          docker image prune -f

preview-comment:
  name: Preview URL Comment
  runs-on: ubuntu-latest
  if: github.event_name == 'pull_request'
  # Workflow ma globalnie contents: read, więc token job potrzebuje więcej,
  # żeby dodać komentarz
  permissions:
    pull-requests: write
  steps:
    - name: Wait for Vercel
      uses: patrickedqvist/wait-for-vercel-preview@v1.3.2
      id: vercel
      with:
        token: ${{ secrets.GITHUB_TOKEN }}
        max_timeout: 300
 
    - name: Comment PR
      uses: actions/github-script@v7
      with:
        script: |
          const previewUrl = '${{ steps.vercel.outputs.url }}';
 
          await github.rest.issues.createComment({
            issue_number: context.issue.number,
            owner: context.repo.owner,
            repo: context.repo.repo,
            body: `Preview: ${previewUrl}`
          });