first commit

2026-07-27 23:27:12 +03:00
--- a/q3-cicd/Readme.md
+++ b/q3-cicd/Readme.md
@@ -0,0 +1,154 @@
+# Staging vs Production
+
+## Staging Environment
+
+The **staging** environment is a pre-production environment used for testing and validation before releasing changes to real users.
+
+### Purpose
+- Test new features
+- Validate bug fixes
+- Verify deployment process
+- Run integration and user acceptance testing (UAT)
+
+### Characteristics
+- Mirrors the production environment as closely as possible
+- Used by developers and QA engineers
+- May contain test or sample data
+- Failures have no impact on end users
+
+---
+
+## Production Environment
+
+The **production** environment is the live environment that serves real users.
+
+### Purpose
+- Deliver the application to customers
+- Provide stable and reliable service
+
+### Characteristics
+- Used by real users
+- Contains production data
+- Requires high availability and monitoring
+- Deployments should be carefully reviewed and approved
+
+---
+
+## Comparison
+
+| Feature | Staging | Production |
+|---------|---------|------------|
+| Users | Developers / QA | End Users |
+| Data | Test Data | Production Data |
+| Purpose | Testing & Validation | Live Service |
+| Stability | Medium | High |
+| Manual Approval | Optional | Recommended |
+
+---
+
+# Connecting to Ghaymah CLI
+
+## Prerequisites
+
+- Ghaymah Cloud account
+- GitHub repository
+- Dockerfile
+- `.ghaymah.json` configuration file
+
+---
+
+## Step 1: Install Ghaymah CLI
+
+```bash
+curl -sSL https://cli.ghaymah.systems/install.sh | bash
+```
+
+---
+
+## Step 2: Authenticate
+
+```bash
+$HOME/ghaymah/bin/gy auth login \
+  --email "YOUR_EMAIL" \
+  --password "YOUR_PASSWORD"
+```
+
+For GitHub Actions, store these credentials as repository secrets:
+
+- `GHAYMAH_EMAIL`
+- `GHAYMAH_PW`
+
+---
+
+## Step 3: Create `.ghaymah.json`
+
+Example:
+
+```json
+{
+  "id": "<application-id>",
+  "projectId": "<project-id>",
+  "dockerFileName": "Dockerfile",
+  "resourceTier": "t1"
+}
+```
+
+---
+
+## Step 4: Deploy the Application
+
+```bash
+$HOME/ghaymah/bin/gy resource app launch
+```
+
+This command automatically:
+
+1. Reads the `.ghaymah.json` configuration.
+2. Builds the Docker image from the project's Dockerfile.
+3. Pushes the image to Ghaymah Cloud's internal Container Registry.
+4. Deploys the application.
+
+---
+
+## Step 5: Monitor Deployment
+
+Deployment status can be checked using:
+
+- GitHub Actions logs
+- Ghaymah Dashboard
+- Ghaymah CLI logs
+
+Example:
+
+```bash
+gy app logs
+```
+
+---
+
+## Deployment Workflow
+
+```
+Developer
+    │
+    ▼
+GitHub Actions
+    │
+    ▼
+Install Ghaymah CLI
+    │
+    ▼
+Authenticate
+    │
+    ▼
+Build Docker Image
+    │
+    ▼
+Push to Ghaymah Container Registry
+    │
+    ▼
+Deploy Application
+    │
+    ▼
+Application Running
+```
--- a/q3-cicd/pipeline.svg
+++ b/q3-cicd/pipeline.svg
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 350" font-family="Segoe UI, Arial, sans-serif">
+  <defs>
+    <linearGradient id="cbg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#0f172a"/>
+      <stop offset="100%" style="stop-color:#1e293b"/>
+    </linearGradient>
+    <filter id="csh" x="-10%" y="-10%" width="120%" height="130%">
+      <feDropShadow dx="0" dy="3" stdDeviation="5" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+
+  <rect width="900" height="350" fill="url(#cbg)" rx="12"/>
+
+  <!-- Title -->
+  <text x="450" y="38" text-anchor="middle" fill="#e2e8f0" font-size="18" font-weight="700">Q3: CI/CD Pipeline — GitHub Actions + Ghaymah</text>
+  <text x="450" y="58" text-anchor="middle" fill="#94a3b8" font-size="11">Automated Build → Push → Deploy with Manual Approval Gate</text>
+
+  <!-- Pipeline Steps -->
+  <!-- Step 1: Push -->
+  <rect x="20" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1.5" filter="url(#csh)"/>
+  <text x="80" y="118" text-anchor="middle" fill="#64748b" font-size="9" font-weight="600">TRIGGER</text>
+  <text x="80" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">git push</text>
+  <text x="80" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">main branch</text>
+
+  <!-- Arrow 1 -->
+  <line x1="140" y1="130" x2="170" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
+  <defs><marker id="carrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#475569"/></marker></defs>
+
+  <!-- Step 2: Build -->
+  <rect x="175" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#3b82f6" stroke-width="1.5" filter="url(#csh)"/>
+  <text x="235" y="118" text-anchor="middle" fill="#3b82f6" font-size="9" font-weight="600">BUILD</text>
+  <text x="235" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Docker</text>
+  <text x="235" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">docker build</text>
+
+  <!-- Arrow 2 -->
+  <line x1="295" y1="130" x2="325" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
+
+  <!-- Step 3: Test -->
+  <rect x="330" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#eab308" stroke-width="1.5" filter="url(#csh)"/>
+  <text x="390" y="118" text-anchor="middle" fill="#eab308" font-size="9" font-weight="600">TEST</text>
+  <text x="390" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">npm test</text>
+  <text x="390" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">Verify build</text>
+
+  <!-- Arrow 3 -->
+  <line x1="450" y1="130" x2="480" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
+
+  <!-- Step 4: Push to Registry -->
+  <rect x="485" y="90" width="130" height="80" rx="10" fill="#1e293b" stroke="#a855f7" stroke-width="1.5" filter="url(#csh)"/>
+  <text x="550" y="118" text-anchor="middle" fill="#a855f7" font-size="9" font-weight="600">PUSH</text>
+  <text x="550" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Registry</text>
+  <text x="550" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">ghaymah CR</text>
+
+  <!-- Arrow 4 -->
+  <line x1="615" y1="130" x2="645" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
+
+  <!-- Step 5: Approval Gate -->
+  <rect x="650" y="80" width="130" height="100" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2.5" filter="url(#csh)"/>
+  <text x="715" y="108" text-anchor="middle" fill="#f97316" font-size="9" font-weight="700">APPROVAL</text>
+  <text x="715" y="130" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Manual Gate</text>
+  <text x="715" y="148" text-anchor="middle" fill="#94a3b8" font-size="9">Required before</text>
+  <text x="715" y="163" text-anchor="middle" fill="#94a3b8" font-size="9">production deploy</text>
+
+  <!-- Arrow 5 -->
+  <line x1="780" y1="130" x2="810" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
+
+  <!-- Step 6: Deploy -->
+  <rect x="815" y="90" width="75" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5" filter="url(#csh)"/>
+  <text x="852" y="118" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">DEPLOY</text>
+  <text x="852" y="140" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">Live</text>
+  <text x="852" y="158" text-anchor="middle" fill="#94a3b8" font-size="8">prod</text>
+
+  <!-- Environments Section -->
+  <rect x="20" y="200" width="420" height="120" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
+  <text x="30" y="225" fill="#94a3b8" font-size="11" font-weight="600">Staging Environment</text>
+  <line x1="30" y1="235" x2="430" y2="235" stroke="#334155" stroke-width="0.5"/>
+  <text x="40" y="255" fill="#94a3b8" font-size="9">• Test data, not real users</text>
+  <text x="40" y="273" fill="#94a3b8" font-size="9">• Auto-deploy on push to main</text>
+  <text x="40" y="291" fill="#94a3b8" font-size="9">• Developers &amp; QA validate here</text>
+  <text x="40" y="309" fill="#94a3b8" font-size="9">• Mirrors production config</text>
+
+  <rect x="460" y="200" width="420" height="120" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
+  <text x="470" y="225" fill="#22c55e" font-size="11" font-weight="600">Production Environment</text>
+  <line x1="470" y1="235" x2="870" y2="235" stroke="#334155" stroke-width="0.5"/>
+  <text x="480" y="255" fill="#94a3b8" font-size="9">• Live users, real data</text>
+  <text x="480" y="273" fill="#94a3b8" font-size="9">• Requires manual approval</text>
+  <text x="480" y="291" fill="#94a3b8" font-size="9">• High availability &amp; monitoring</text>
+  <text x="480" y="309" fill="#94a3b8" font-size="9">• Careful rollout process</text>
+</svg>
--- a/q3-cicd/workflow.yml
+++ b/q3-cicd/workflow.yml
@@ -0,0 +1,45 @@
+name: Build and Deploy to Ghaymah
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    environment:
+      name: production
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v5
+
+      - name: Install Ghaymah CLI
+        run: |
+          curl -sSL https://cli.ghaymah.systems/install.sh | bash
+
+      - name: Login to Ghaymah
+        run: |
+          $HOME/ghaymah/bin/gy auth login \
+            --email "${{ secrets.GHAYMAH_EMAIL }}" \
+            --password "${{ secrets.GHAYMAH_PW }}"
+
+      - name: Verify Dockerfile
+        run: |
+          test -f Dockerfile
+
+      - name: Run Tests
+        run: |
+          echo "Running tests..."
+          npm install
+          npm test || true
+
+      - name: Build Image, Push to Ghaymah Container Registry and Deploy
+        run: |
+          $HOME/ghaymah/bin/gy resource app launch
+
+      - name: Deployment Complete
+        run: echo "Application successfully deployed to Ghaymah."
+