Как код сайта попадает на сервер?

Как код сайта попадает на сервер

Это вопрос о процессе деплоя — как мы переводим код с нашего компьютера на production сервер. Давайте разберемся полностью.

Общий процесс

Есть несколько этапов:

1. Разработка кода локально
2. Commit в git репозиторий
3. Push на удаленный сервер (GitHub, GitLab, Bitbucket)
4. CI/CD конвейер автоматически:
   • Тестирует код
   • Собирает артефакты (build)
   • Деплоит на сервер
5. Сервер запускает приложение

Вариант 1: Git push на production

Самый простой для маленьких проектов:

# На локальной машине
git add .
git commit -m "Добавил новую фичу"
git push origin main

На сервере установлен git hook:

# На сервере файл .git/hooks/post-receive
#!/bin/bash
cd /var/www/app
git pull origin main
npm install
npm run build
restartapp

Когда мы push'им, server автоматически:

• Скачивает код
• Устанавливает зависимости
• Собирает приложение
• Перезапускает процесс

Вариант 2: CI/CD (GitHub Actions, GitLab CI)

Мощнее и безопаснее для production:

GitHub Actions (файл .github/workflows/deploy.yml):

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Run tests
        run: npm run test
      
      - name: Build
        run: npm run build
      
      - name: Deploy to server
        run: |
          ssh -i ${{ secrets.DEPLOY_KEY }} user@server.com
          'cd /var/www/app && git pull && npm install && npm run build && restart'

Что происходит:

1. На GitHub запускается виртуальная машина
2. Checkout код из репо
3. Установка Node.js
4. npm install зависимостей
5. Запуск тестов (если упадут — деплой отменяется)
6. npm run build сборка проекта
7. SSH подключение к серверу
8. Обновление и перезапуск приложения

Вариант 3: Dokku (как в нашем проекте)

Dokku — это мини-Heroku для своего сервера. Очень удобно!

**На сервере один раз:

# Установили Dokku
# Создали приложение
dokku apps:create prepbro

# Добавили переменные окружения
dokku config:set prepbro DATABASE_URL=... API_KEY=...

С локальной машины:

# Добавляем remote
git remote add dokku dokku@server.com:prepbro

# Деплоим просто push'ем
git push dokku main

Dokku автоматически:

1. Получает код
2. Читает Dockerfile (если есть)
3. Собирает образ (docker build)
4. Запускает контейнер
5. Настраивает nginx
6. Выдает SSL сертификат (Let's Encrypt)

Вариант 4: Docker + Registry

Для более сложных систем:

# На разработчика машине
docker build -t myregistry.com/prepbro:1.0.0 .
docker push myregistry.com/prepbro:1.0.0

# На сервере
docker pull myregistry.com/prepbro:1.0.0
docker run -d -p 80:3000 myregistry.com/prepbro:1.0.0

Вариант 5: Containerized deployment (Kubernetes)

Для огромных проектов с масштабированием:

# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: prepbro
spec:
  replicas: 3
  template:
    spec:
      containers:
      - name: app
        image: myregistry.com/prepbro:1.0.0
        ports:
        - containerPort: 3000

kubectl apply -f deployment.yaml

Как именно код попадает на сервер

Физически:

1. Git отправляет данные по HTTPS/SSH
2. Сервер получает объекты Git
3. Обновляет working directory
4. Запускает hooks для сборки
5. Заменяет старые файлы новыми

На уровне файлов:

Локально: /Users/dev/prepbro/.git
          /Users/dev/prepbro/src/...
          
    v push git commit
    
На сервере: /var/www/app/.git
            /var/www/app/src/..

Сборка frontend

Что происходит при npm run build:

# Входные файлы
src/
  components/
  pages/
  styles/

# Webpack/Vite собирает
bundle.js (весь JavaScript в одном файле)
styles.css (весь CSS в одном файле)
html с ссылками на bundle.js и styles.css

# Выходные файлы (готовые для браузера)
.next/
  static/
    chunks/
      main.js
      pages/...
    css/
      styles.css

Эти собранные файлы отправляются на сервер, браузер скачивает их оттуда.

Пример полного цикла

# 1. Разработка
I напишу компонент Button.jsx
I тестирую локально (npm run dev)

# 2. Commit
git add src/components/Button.jsx
git commit -m "Добавил Button компонент"

# 3. Push
git push origin main

# 4. CI/CD конвейер на GitHub Actions
# (автоматически запускается)
- Скачал код
- npm install
- npm run test (проверяет Button.test.jsx)
- npm run lint (проверяет стиль кода)
- npm run build (собирает production bundle)
- Отправил bundle на Dokku сервер

# 5. На Dokku сервере
- Получил новый код
- Запустил docker build
- Заменил старый контейнер на новый
- nginx перенаправляет трафик на новый контейнер

# 6. Пользователь
- Открывает site.com
- Браузер скачивает bundle.js с сервера
- Выполняет JavaScript
- Видит новый Button компонент

Что может пойти не так

Сборка упадет:

npm run build
# Error: Cannot find module 'react'
# Забыл добавить в package.json

Тесты упадут:

npm run test
# ✕ Button.test.jsx (2 failed)
# Деплой отменяется

Сервер не может скачать зависимости:

npm install
# Error: Cannot reach registry
# npm срегистри не доступен (редко)

Ошибка при запуске:

node app.js
# Error: Cannot read property 'database' of undefined
# Забыл установить environment переменные

Безопасность

Важные практики:

1. SSH ключи для доступа на сервер

# Не используем пароли, используем ключи
git push dokku@server.com:app main

1. Environment переменные скрыты

# На GitHub Actions
secrets.DEPLOY_KEY - скрыта
secrets.DATABASE_URL - скрыта

1. Токены не в коде

# ПЛОХО
const API_KEY = "abc123"; // В коде!

# ХОРОШО
const API_KEY = process.env.API_KEY; // Из переменных окружения

1. Только через HTTPS

# git push всегда через SSH или HTTPS, никогда незащищено

Мониторинг после деплоя

# Логи приложения
dokku logs prepbro

# Статус
dokku ps

# Метрики (CPU, память)
docker stats

Так что код попадает на сервер через git push, затем CI/CD система автоматически тестирует, собирает и деплоит приложение. Сервер получает собранный bundle и отправляет его браузеру пользователя.