CI/CD with Tunnels: Preview Environments per PR

# .github/workflows/preview.yml
name: PR Preview Environment

on:
  pull_request:
    types: [opened, synchronize, reopened]

concurrency:
  group: preview-${{ github.event.pull_request.number }}
  cancel-in-progress: true

jobs:
  preview:
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Start application
        run: |
          docker compose -f docker-compose.preview.yml up -d --build
          # Wait until the app is reachable
          for i in $(seq 1 30); do
            curl -sf http://localhost:8080/health && break
            echo "Waiting for app to start... ($i/30)"
            sleep 2
          done

      - name: Install fxTunnel
        run: curl -fsSL https://fxtun.dev/install.sh | bash

      - name: Start tunnel and get URL
        id: tunnel
        run: |
          # Start the tunnel in the background and capture the URL
          fxtunnel http 8080 --log-file /tmp/tunnel.log &
          TUNNEL_PID=$!
          echo "tunnel_pid=$TUNNEL_PID" >> "$GITHUB_OUTPUT"

          # Wait for the URL to appear in the logs
          for i in $(seq 1 15); do
            TUNNEL_URL=$(grep -oP 'https://[a-z0-9-]+\.fxtun\.dev' /tmp/tunnel.log || true)
            if [ -n "$TUNNEL_URL" ]; then
              echo "preview_url=$TUNNEL_URL" >> "$GITHUB_OUTPUT"
              echo "Preview URL: $TUNNEL_URL"
              break
            fi
            sleep 1
          done

          if [ -z "$TUNNEL_URL" ]; then
            echo "Failed to get tunnel URL"
            exit 1
          fi

      - name: Comment PR with preview URL
        uses: actions/github-script@v7
        with:
          script: |
            const previewUrl = '${{ steps.tunnel.outputs.preview_url }}';
            const body = `## Preview Environment

            | | |
            |---|---|
            | **URL** | ${previewUrl} |
            | **Commit** | \`${context.sha.substring(0, 7)}\` |
            | **Status** | Active |

            This preview will be available while the CI job is running.`;

            // Delete the old comment if it exists
            const comments = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });
            const botComment = comments.data.find(c =>
              c.body.includes('## Preview Environment')
            );
            if (botComment) {
              await github.rest.issues.deleteComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
              });
            }

            await github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body: body,
            });

      - name: Run E2E tests against preview
        run: |
          npx playwright test --base-url=${{ steps.tunnel.outputs.preview_url }}

      - name: Keep preview alive for manual testing
        if: success()
        run: |
          echo "Preview is live at: ${{ steps.tunnel.outputs.preview_url }}"
          echo "Keeping alive for 20 minutes for manual review..."
          sleep 1200

      - name: Cleanup
        if: always()
        run: |
          kill ${{ steps.tunnel.outputs.tunnel_pid }} || true
          docker compose -f docker-compose.preview.yml down

# docker-compose.preview.yml
services:
  app:
    build: .
    ports:
      - "8080:8080"
    environment:
      - DATABASE_URL=postgres://user:pass@db:5432/preview
      - REDIS_URL=redis://redis:6379
      - APP_ENV=preview
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_started

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: preview
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U user"]
      interval: 2s
      timeout: 5s
      retries: 10

  redis:
    image: redis:7-alpine

# .gitlab-ci.yml
preview:
  stage: test
  image: docker:24
  services:
    - docker:24-dind
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
  script:
    - docker compose -f docker-compose.preview.yml up -d --build
    - curl -fsSL https://fxtun.dev/install.sh | bash
    - fxtunnel http 8080 --log-file /tmp/tunnel.log &
    - sleep 5
    - TUNNEL_URL=$(grep -oP 'https://[a-z0-9-]+\.fxtun\.dev' /tmp/tunnel.log)
    - |
      curl --request POST \
        --header "PRIVATE-TOKEN: ${GITLAB_TOKEN}" \
        --header "Content-Type: application/json" \
        --data "{\"body\": \"Preview: ${TUNNEL_URL}\"}" \
        "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/merge_requests/${CI_MERGE_REQUEST_IID}/notes"
    - echo "Preview live at ${TUNNEL_URL}"
    - sleep 1200
  after_script:
    - docker compose -f docker-compose.preview.yml down

# .github/workflows/preview-cleanup.yml
name: Cleanup Preview

on:
  pull_request:
    types: [closed]

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Cancel preview workflow
        uses: actions/github-script@v7
        with:
          script: |
            // Find active workflow runs for this PR
            const runs = await github.rest.actions.listWorkflowRuns({
              owner: context.repo.owner,
              repo: context.repo.repo,
              workflow_id: 'preview.yml',
              status: 'in_progress',
            });

            for (const run of runs.data.workflow_runs) {
              // Check that the run belongs to our PR
              if (run.pull_requests.some(pr => pr.number === context.issue.number)) {
                await github.rest.actions.cancelWorkflowRun({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  run_id: run.id,
                });
                console.log(`Cancelled workflow run ${run.id}`);
              }
            }

      - name: Update PR comment
        uses: actions/github-script@v7
        with:
          script: |
            const comments = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });
            const botComment = comments.data.find(c =>
              c.body.includes('## Preview Environment')
            );
            if (botComment) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: `## Preview Environment\n\n**Status:** Closed (PR ${context.payload.action})`,
              });
            }

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Cache Docker layers
        uses: actions/cache@v4
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: ${{ runner.os }}-buildx-

      - name: Wait for application
        run: |
          for i in $(seq 1 30); do
            if curl -sf http://localhost:8080/health; then
              echo "Application is ready"
              exit 0
            fi
            echo "Waiting... ($i/30)"
            sleep 2
          done
          echo "Application failed to start"
          exit 1