global update

.github/workflows/main.yml

@@ -1,12 +1,14 @@
-name: Deploy React Frontend-----
+name: Deploy React Frontend------------
 
 on:
   push:
     branches:
       - main
+      - dev
+      - test
 
 jobs:
-  build-and-deploy:
+  build-and-push:
     runs-on: ubuntu-latest
 
     steps:
@@ -43,15 +45,20 @@ jobs:
           push: true
           tags: ${{ secrets.DOCKER_USERNAME }}/frontend:latest
 
+
+
+  deploy-server-1:
+    needs: build-and-push
+    runs-on: ubuntu-latest
+    steps:
       - name: Setup SSH
         uses: webfactory/ssh-agent@v0.7.0
         with:
           ssh-private-key: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
-
-
+
       - name: Deploy
         run: |
-          ssh -o StrictHostKeyChecking=no user1@${{ secrets.PROD_SERVER_IP }} << 'EOF'
+          ssh -o StrictHostKeyChecking=no user1@${{ secrets.PROD_SERVER_IP_1 }} << 'EOF'
             cd /home/user1/Deploying-Frontend-apps
             sudo docker pull ${{ secrets.DOCKER_USERNAME }}/frontend:latest
             sudo docker stop frontend || true
@@ -60,3 +67,22 @@ jobs:
             echo "Deployment completed!"
             sudo docker ps
           EOF
+
+  deploy-server-2:
+    needs: build-and-push
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.7.0
+        with:
+          ssh-private-key: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
+      - name: Deploy-2
+        run: |
+            ssh -o StrictHostKeyChecking=no user1@${{ secrets.PROD_SERVER_IP_2 }} << 'EOF'
+            cd /home/user1/Deploying-Frontend-apps
+            sudo docker pull ${{ secrets.DOCKER_USERNAME }}/frontend:latest
+            sudo docker stop frontend || true
+            sudo docker rm frontend || true
+            sudo docker run -d --name frontend -p 80:80 ${{ secrets.DOCKER_USERNAME }}/frontend:latest
+            echo "Deployment completed!"
+            sudo docker ps

Dockerfile

@@ -12,8 +12,8 @@ RUN npm run build
 FROM nginx:alpine
 
 # Копируем конфиг nginx
-COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
-
+COPY nginx/frontend.conf /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/nginx.conf
 # Копируем собранный frontend прямо в html-папку nginx
 COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html
 

README.md

@@ -1 +1,100 @@
 # Deploying-Frontend-apps
+# Deploying Frontend Apps: React + Nginx + CI/CD 🚀
+
+## 📦 Технологический стек
+
+### Frontend
+- **React** + **Vite** + **TypeScript**
+
+### Backend
+- **FastAPI** (в разработке)
+
+### База данных
+- **PostgreSQL** (в разработке)
+
+### DevOps
+- **Docker**, **Docker Compose**
+- **GitHub Actions** (CI/CD)
+- **Nginx** (сейчас не используется)
+
+### Хостинг
+- **Yandex Cloud** 
+- Домен: **allower.ru**
+- **Network Load Balancer** → (в разработке переход на L7)
+
+---
+
+## 🛠️ Этапы развертывания
+
+### 1. Настройка серверов
+- Сервера на **Ubuntu**
+  ![Сервера](https://github.com/user-attachments/assets/08daa6b9-d3fe-4688-9cb6-5978529c95b1)
+
+### 2. Установка необходимого ПО
+bash
+`apt install nginx docker`
+
+3.  Nginx только для проверок!
+`systemctl start nginx , в базе systemctl stop nginx and systemctl disable nginx`
+4. Работа с VPC
+Создана VPC → allower-net
+
+Создана подсеть → allower-pod-net
+<img width="1123" alt="VPC" src="https://github.com/user-attachments/assets/7b5e2e60-40b3-4fd4-bb0d-300c95dc755e">
+
+5. Объединение узлов
+Все узлы включены в одну подсеть allower-pod-net
+
+6. Создание целевой группы
+https://github.com/user-attachments/assets/b5736c37-ee74-4067-913c-683c92184fa9
+
+7. Настройка Load Balancer
+Создан Network Load Balancer в своей сети
+<img width="1080" alt="Load Balancer" src="https://github.com/user-attachments/assets/9a5e7532-0f47-40ad-a75a-c8e6344e89d1">
+
+8. Локальная проверка
+Проверка работоспособности через Nginx ✅
+
+9. Покупка и настройка домена
+Приобретен домен allower.ru
+
+Настроены DNS-серверы Yandex
+
+10. Настройка DNS-записи
+Создана зона в Yandex Cloud
+
+Добавлена запись типа A с IPv4 Load Balancer
+
+11. Результат
+![455732448-641db5c1-fc53-4974-b549-1b8d59775cb1](https://github.com/user-attachments/assets/7c75b126-0060-4805-80a7-3f3b2b20eb84)
+
+### 12. Создадим сертификат SSL от LETS_ENCRYPT в самом яндексе
+- так по интрукции добавить запись в dns
+
+### 13. создаем L7 балансер через визард
+
+ ### создадим либо до либо уже при самой настройки целевые узлы (
+  ![telegram-cloud-photo-size-2-5382270299304751738-y](https://github.com/user-attachments/assets/884ca70a-83f3-4f90-ae73-f97f0acc9b3f)
+### 14. группа бэкэндов ( можно создать также до )
+![telegram-cloud-photo-size-2-5382270299304751735-y](https://github.com/user-attachments/assets/d28672d3-a741-46c2-b82a-51ceb4f098b7)
+### 15. создадим роутер
+  ![telegram-cloud-photo-size-2-5382270299304751732-y](https://github.com/user-attachments/assets/d2a1eb62-23c0-4936-b773-ba60283a171e)
+### 16. создадим обработчик
+  ![telegram-cloud-photo-size-2-5382270299304751728-y](https://github.com/user-attachments/assets/7e0d5035-dc40-41b1-8f6d-7ce8c3b1eb91)
+
+### 17. Итог 
+ ![2025-06-29 00 12 49](https://github.com/user-attachments/assets/ac26c33b-b755-40b0-9efb-796b264deaa8)
+
+
+
+
+
+
+
+🔜 Планы по развитию
+В разработке:
+Добавление SSL-сертификата при переходе на L7 Load Balancer ✅
+
+Миграция на docker-compose ( частично )
+
+Интеграция Grafana и Prometheus для мониторинга ✅

docker-compose-1

@@ -0,0 +1,9 @@
+version: '3.8'
+
+services:
+  frontend:
+    image: allower99/frontend:latest
+    container_name: frontend
+    restart: always
+    ports:
+      - "80:80"

docker-compose.yaml

@@ -1,9 +1,76 @@
-version: '3.8'
+version: '3.9'
 
 services:
+  # Frontend-приложение
   frontend:
-    image: allower99/frontend:latest
+    build: .
     container_name: frontend
-    restart: always
+    hostname: frontend
     ports:
       - "80:80"
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+    networks:
+      - monitoring_net
+
+  # Prometheus
+  prometheus:
+    image: prom/prometheus
+    volumes:
+      - ./prometheus:/etc/prometheus
+    ports:
+      - "9090:9090"
+    command:
+      - --config.file=/etc/prometheus/prometheus.yaml
+    restart: unless-stopped
+    networks:
+      - monitoring_net
+    depends_on:
+      frontend:
+        condition: service_healthy
+      node-exporter:
+        condition: service_started
+
+  # Node Exporter
+  node-exporter:
+    image: prom/node-exporter
+    volumes:
+      - /proc:/host/proc:ro
+      - /sys:/host/sys:ro
+      - /:/rootfs:ro
+    command:
+      - --path.procfs=/host/proc
+      - --path.sysfs=/host/sys
+    ports:
+      - "9100:9100"
+    restart: unless-stopped
+    networks:
+      - monitoring_net
+
+  # Grafana
+  grafana:
+    image: grafana/grafana
+    user: root
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./grafana:/var/lib/grafana
+      - ./grafana/provisioning:/etc/grafana/provisioning
+    container_name: grafana
+    hostname: grafana
+    restart: unless-stopped
+    environment:
+      TZ: "Europe/Moscow"
+    networks:
+      - monitoring_net
+    depends_on:
+      prometheus:
+        condition: service_started
+
+networks:
+  monitoring_net:
+    driver: bridge