Где хранился Static?

2.0 Middle🔥 151 комментариев

#JavaScript Core

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Где хранится Static (статические файлы)

Вопрос о хранилище статических файлов зависит от контекста. Давайте разберемся, где и как хранятся статические файлы в различных типах веб-приложений.

В контексте веб-приложений (Frontend)

Статические файлы — это файлы, которые не меняются при каждом запросе: изображения, стили CSS, скрипты JavaScript, шрифты, видео и другие ресурсы.

1. Традиционное веб-приложение (HTML/CSS/JS)

project/
├── public/              <- Папка со статическими файлами
│   ├── index.html
│   ├── css/
│   │   ├── style.css
│   │   └── responsive.css
│   ├── js/
│   │   ├── app.js
│   │   └── utils.js
│   ├── images/
│   │   ├── logo.png
│   │   ├── hero.jpg
│   │   └── icons/
│   ├── fonts/
│   │   ├── inter.woff2
│   │   └── roboto.woff2
│   └── favicon.ico
└── src/                 <- Исходный код (если используется сборщик)

Эти файлы хранятся на веб-сервере (Apache, Nginx, Node.js и т.д.) и раздаются прямо клиентам без обработки.

2. Next.js (современный React framework)

В Next.js static файлы хранятся в папке public/:

next-app/
├── public/              <- Static files для Next.js
│   ├── favicon.ico
│   ├── logo.svg
│   ├── images/
│   │   └── hero.jpg
│   └── fonts/
│       └── custom.woff2
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── api/
├── components/
└── styles/

Доступ к файлам:

// В Next.js файлы из public/ доступны как /filename
<img src="/logo.svg" alt="Logo" />
<link rel="icon" href="/favicon.ico" />

3. Create React App (CRA)

cra-app/
├── public/              <- Static files
│   ├── index.html       <- Главный HTML файл
│   ├── favicon.ico
│   ├── images/
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── App.css
│   └── index.js
└── package.json

Доступ:

<img src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo" />
// или просто
<img src="/logo.png" alt="Logo" />

Хранилище во время разработки vs Production

Разработка (Development):

Файлы хранятся на локальном диске
Сервер разработки (webpack dev server, Next.js dev server) раздаёт их в реальном времени
Изменения видны сразу (hot reload)

// Во время разработки
npm run dev  // Запускает dev-сервер
// http://localhost:3000 раздаёт файлы из public/ и src/

Production (Боевой сервер):

Файлы собираются (bundled) в специальную папку (dist, build и т.д.)
Статические файлы оптимизируются (минификация, сжатие)
Выкладываются на веб-сервер или CDN

// Production сборка
npm run build  // Создает папку build/ или dist/
// Содержимое выкладывается на сервер

Где реально хранятся файлы на сервере

На веб-сервере Nginx:

server {
    listen 80;
    server_name example.com;
    
    # Папка, где хранятся static файлы
    root /var/www/example.com/public;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Кэширование статических файлов
    location ~* \.(css|js|jpg|png|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

На сервере Express.js:

const express = require('express');
const app = express();

// Папка public раздаётся как static
app.use(express.static('public'));

// Файлы из public/ доступны как /filename
// /public/logo.png -> /logo.png

CDN (Content Delivery Network)

В больших приложениях static файлы часто хранятся на CDN:

<!-- Вместо локального хранилища используем CDN -->
<script src="https://cdn.example.com/app.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/style.css">
<img src="https://cdn.cloudflare.com/images/logo.png" alt="Logo">

Популярные CDN:

Cloudflare
AWS CloudFront
Akamai
Fastly

Структура в различных framework'ах

Vue.js:

vue-app/
├── public/      <- Static files
└── src/
    ├── assets/  <- Assets для импорта в компоненты
    └── components/

Angular:

angular-app/
├── src/
│   ├── assets/     <- Static files
│   ├── index.html
│   └── styles.css
└── angular.json

Svelte:

svelte-app/
├── static/     <- Static files
├── src/
│   └── App.svelte
└── svelte.config.js

Практический пример в Next.js

// Используется файл из public/
import Image from 'next/image';

export default function Home() {
  return (
    <>
      {/* Способ 1: Обычный img */}
      <img src="/logo.png" alt="Logo" />
      
      {/* Способ 2: Next.js Image компонент (оптимизирован) */}
      <Image
        src="/logo.png"
        alt="Logo"
        width={200}
        height={200}
        priority
      />
      
      {/* Способ 3: Импорт в JS */}
      <link rel="icon" href="/favicon.ico" />
    </>
  );
}

Оптимизация статических файлов

// 1. Минификация
// Original: style.css (50KB)
// Минификация: style.min.css (15KB)

// 2. Сжатие (gzip, brotli)
// Server обслуживает .js.gz вместо .js

// 3. Хеширование для кэширования
// app.abc123.js - уникальный хеш помогает браузеру кэшировать

// 4. Lazy loading изображений
<img src="hero.jpg" loading="lazy" alt="Hero" />

// 5. WebP формат
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image">
</picture>

Где хранятся данные приложения (не static)

Важно не путать static файлы с данными:

Данные приложения хранятся:
1. В БД (PostgreSQL, MongoDB и т.д.)
2. В Redis (кэш)
3. На сервере приложения
4. В переменных окружения

Static файлы:
- В папке public/ (или assets/)
- На веб-сервере
- На CDN

Итого: Static файлы хранятся в специальной папке (обычно public/ или static/) в исходном коде проекта, а при деплое выкладываются на веб-сервер (Nginx, Apache) или CDN. Во время разработки dev-сервер раздаёт их прямо из папки, а в production они часто оптимизируются и кэшируются.