В контексте чего работал с Linux

Опыт работы с Linux в контексте Frontend разработки

Основной контекст: Development Environment

Основной опыт работы с Linux пришелся на настройку и использование Unix-подобных систем как основной платформы для разработки фронтенда.

1. Локальная среда разработки

Setup и конфигурация:

• Установка Node.js, npm/yarn, различных версий через nvm (Node Version Manager)
• Конфигурирование текстовых редакторов (VS Code, Vim) с плагинами и расширениями
• Установка и настройка Git, SSH ключей для работы с репозиториями
• Настройка окружения для работы с переменными среды (.bashrc, .zshrc)

Пример типичного setup:

# Установка nvm и Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18.0.0
nvm use 18.0.0

# Инициализация проекта
npm init -y
npm install react react-dom next typescript

# Запуск development сервера
npm run dev

2. Command Line Interface (CLI) для фронта

Регулярное использование команд:

• npm install, npm run build, npm test, npm run lint для управления зависимостями и запуском скриптов
• git add, git commit, git push, git rebase для контроля версий
• curl, wget для тестирования API эндпоинтов
• ps aux, kill, lsof -i :3000 для отладки процессов

# Отладка портов
lsof -i :3000  # Какой процесс занимает порт 3000
kill -9 <PID>  # Убить процесс

# Проверка переменных окружения
env | grep NODE
echo $NODE_ENV

# Работа с файлами и папками
find . -name "*.tsx" -type f  # Найти все React компоненты
grep -r "useEffect" src/     # Поиск по коду

3. Работа с Docker и контейнеризацией

Контекст: локальное тестирование фронта в изолированной среде

# Dockerfile для Next.js приложения
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

# Docker commands
docker build -t myapp:latest .
docker run -p 3000:3000 myapp:latest
docker compose up -d
docker logs -f <container_id>

Использование Docker позволяет:

• Изолировать зависимости проекта
• Обеспечить consistency между локальной и production средой
• Тестировать в окружении, идентичном серверу

4. Package managers и build tools

Работа с npm scripts и Makefile:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .tsx,.ts",
    "test": "vitest",
    "test:coverage": "vitest --coverage",
    "format": "prettier --write ."
  }
}

# Makefile пример
.PHONY: dev build test lint clean

dev:
	npm run dev

build:
	npm run build

test:
	npm run test

lint:
	npm run lint

clean:
	rm -rf node_modules dist .next

5. Version Control с Git

Типичный workflow:

# Создание и переключение на новую ветку
git checkout -b feature/new-component

# Стейджирование изменений
git add src/components/Button.tsx
git status

# Коммит с осмысленным сообщением
git commit -m "feat: add Button component with tests"

# Обновление ветки перед push
git fetch origin
git rebase origin/main

# Отправка в удаленный репозиторий
git push -u origin feature/new-component

# После merge, очистка локальной ветки
git checkout main
git pull origin main
git branch -d feature/new-component

6. Web Server и Nginx

Контекст: понимание того, как фронтенд раздается в production

# Установка Nginx
sudo apt update
sudo apt install nginx

# Конфигурирование для SPA (Single Page Application)
# /etc/nginx/sites-available/myapp
server {
  listen 80;
  server_name example.com;
  
  location / {
    root /var/www/myapp/build;
    try_files $uri $uri/ /index.html;
  }
  
  location /api {
    proxy_pass http://localhost:8000;
  }
}

# Перезагрузка конфигурации
sudo systemctl restart nginx
sudo systemctl status nginx

7. Работа с логами и отладка

# Проверка логов приложения
tail -f /var/log/nginx/access.log
journalctl -u myapp -f

# Проверка использования ресурсов
top
htop
df -h  # Использование дискового пространства

# Анализ процессов
ps aux | grep node

8. SSH и удаленные сервера

Деплой фронтенда на сервер:

# SSH подключение
ssh -i ~/.ssh/id_rsa user@example.com

# Скопирование файлов на сервер
scp -r build/ user@example.com:/var/www/myapp/

# Удаленное выполнение команд
ssh user@example.com "cd /app && npm run build"

# Настройка SSH ключей для CI/CD
ssh-keygen -t rsa -b 4096
ssh-copy-id -i ~/.ssh/id_rsa.pub user@example.com

9. Автоматизация с Bash скриптами

#!/bin/bash
# build-and-deploy.sh

set -e  # Выход при первой ошибке

echo "Building application..."
npm run build

echo "Running tests..."
npm run test

if [ $? -eq 0 ]; then
  echo "Tests passed, deploying..."
  scp -r build/ user@example.com:/var/www/myapp/
  ssh user@example.com "sudo systemctl restart myapp"
else
  echo "Tests failed, aborting deployment"
  exit 1
fi

10. Мониторинг и Performance

# Проверка использования памяти Node процессом
ps aux | grep node

# Top процессы по CPU и памяти
top -p $(pgrep -d, node)

# Анализ размера бандла
npm run analyze  # если настроена анализация

# Загрузка сайта и performance metrics
curl -I https://example.com

Практические примеры

Типичный день разработчика с Linux:

# Утро: запуск приложения
nvm use 18
npm install
npm run dev

# В течение дня: работа с гитом
git status
git add .
git commit -m "fix: resolve TypeScript errors"
git push

# Тестирование
npm run test:watch

# Линтинг
npm run lint

# Подготовка к деплою
npm run build
npm run lint
npm run test

# Вечер: проверка логов на сервере
ssh myserver
tail -f /var/log/nginx/access.log

Ключевые преимущества Linux для Frontend разработки

1. Открытость и гибкость - полный контроль над окружением
2. Инструменты - мощные CLI утилиты для разработки
3. Производительность - стабильность и скорость
4. Community - большое сообщество разработчиков
5. Production-подобное окружение - большинство серверов работают на Linux

Заключение

Опыт работы с Linux в контексте фронтенда варьируется от базовых операций (управление файлами, запуск скриптов) до сложных задач (деплой, мониторинг, автоматизация). Понимание Unix-философии и командной строки - это критически важный навык для современного фронтенд разработчика, особенно при работе с DevOps процессами и автоматизацией.