์ ์ ํ์ผ ์๋น
๊ฐ์
์ ์ ํ์ผ ์๋น์ด๋ Nginx๊ฐ ํด๋ผ์ด์ธํธ์ ์์ฒญ์ ๋ฐ๋ผ ์ด๋ฏธ ์ ์ฅ๋ ํ์ผ(HTML, CSS, JS, ์ด๋ฏธ์ง ๋ฑ)์ ๊ทธ๋๋ก ์ ๋ฌํ๋ ๊ธฐ๋ฅ์ด๋ค. ์ด๋ Nginx๊ฐ ๊ฐ์ฅ ์ํ๋ ์ผ์ด๋ฉฐ, ๋์ ์์ฒญ๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๊ณ ๊ฐ๋ณ๋ค.
Nginx์ ์ง์ ํ ๊ฐ์น๋ ์ ์ ํ์ผ ์๋น์ ์์ด์. ์น ์๋ฒ์ ๋ชฉ์ ์ด ๊ฒฐ๊ตญ ์ด๊ฑด๋ฐ, Nginx๋ ์ด๊ฑธ ์ ๋ง ์ํด์! Apache๋ ๋ค๋ฅธ ์๋ฒ๋ค๊ณผ ๋น๊ตํ์ ๋ ๋ช ๋ฐฐ ์ด์ ๋น ๋ฅด๊ฒ ํ์ผ์ ์ ๋ฌํ ์ ์๊ฑฐ๋ ์.
์๋ํ๋ฉด Nginx๋ ํ์ผ์ ๋ฌผ๋ฆฌ์ ์ผ๋ก ์ฝ์ ๋ OS ์ปค๋์ ๋์์ ๋ฐ๊ฑฐ๋ ์(sendfile). ์ด๋ค ํ๋ก์ธ์ฑ๋ ์ ํ๊ณ , ๊ทธ๋ฅ "์ด ํ์ผ์ ์ ๊ธฐ๋ก ๋ณด๋ด!" ํ๋ ๋จ์ํ ์์
์ OS ๋ ๋ฒจ์์ ์์ฃผ ๋น ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋ ๊ฑฐ์์. ๋ง์น ์๋์ฐจ ์์ง์ ๊ณตํ์ ์ด ์๋ฌด๊ฒ๋ ์ ํ ๋ ๊ฐ์ฅ ํจ์จ์ ์ธ ๊ฒ์ฒ๋ผ์!
์ ์ ํ์ผ ์๋น์ ํน์ง
graph TD
A["์ ์ ํ์ผ ์๋น์<br/>ํต์ฌ ํน์ง"] --> B["โก ์ด๊ณ ์"]
A --> C["๐พ ๋ฎ์ ๋ฆฌ์์ค"]
A --> D["๐ ์บ์ฑ ์ฉ์ด"]
A --> E["๐ก๏ธ ์์ "]
B --> B1["๋์คํฌ ์ฝ๊ธฐ๋ง ํจ<br/>ํ๋ก์ธ์ฑ ์์"]
C --> C1["CPU ์ฌ์ฉ๋ฅ ๊ฑฐ์ 0%<br/>๋ฉ๋ชจ๋ฆฌ๋ ์ต์"]
D --> D1["๋ธ๋ผ์ฐ์ ์บ์<br/>CDN ์บ์ ์ฌ์ฉ ๊ฐ๋ฅ"]
E --> E1["์๋ฒ ์ฝ๋ ๋
ธ์ถ ์์<br/>์์ ํ ํ์ผ๋ง ์ ๊ณต"]
style A fill:#FFD700
style B fill:#90EE90
style C fill:#90EE90
style D fill:#90EE90
style E fill:#90EE90Mermaid
๋ณต์ฌ
ํญ๋ชฉ | ์ ์ ํ์ผ ์๋น | ๋์ ์์ฒญ ์ฒ๋ฆฌ |
์ฒ๋ฆฌ ์๋ | ||
๋ฆฌ์์ค ์ฌ์ฉ | ๊ทน์๋ | ๋ง์ (DB ์กฐํ, ๋ก์ง ์คํ) |
์๋ฒ ๋ถํ | ๊ฑฐ์ ์์ | ๋์ |
์บ์ฑ | ๋งค์ฐ ํจ๊ณผ์ | ์ ํ์ |
์ฝ๋ ๋
ธ์ถ ์ํ | ๊ฑฐ์ ์์ | ์๋์ ์ผ๋ก ๋์ |
ํ์ฅ์ฑ | ๊ฑฐ์ ๋ฌดํ๋ | ์๋ฒ ์ฑ๋ฅ์ ์ ํ |
์ ์ ํ์ผ ์๋น์ ์๋ฌด๋ฆฌ ๋ง์ ์ฌ์ฉ์๊ฐ ์ ์ํด๋ ์๋ฒ ๋ถํ๊ฐ ๊ฑฐ์ ์ฆ๊ฐํ์ง ์์์!
Nginx ์ ์ ํ์ผ ์๋น ๊ตฌ์กฐ
graph LR
A["๐ค ํด๋ผ์ด์ธํธ<br/>๋ธ๋ผ์ฐ์ "] -->|"GET /logo.png<br/>GET /style.css"| B["๐ฅ๏ธ Nginx"]
B -->|๋์คํฌ์์ ์ฝ๊ธฐ| C["๐ ์น ๋ฃจํธ<br/>/var/www/html/"]
C --> D["logo.png<br/>style.css<br/>index.html<br/>..."]
B -->|"ํ์ผ ๋ด์ฉ ์ ๋ฌ"| A
style B fill:#90EE90
style C fill:#87CEEBMermaid
๋ณต์ฌ
๊ธฐ๋ณธ ์ ์ ํ์ผ ์๋น ์ค์
server {
listen 80;
server_name example.com;
# ์น ๋ฃจํธ ๋๋ ํ ๋ฆฌ ์ง์ โ ๋ชจ๋ ํ์ผ์ด ์ฌ๊ธฐ์ ์ฐพ์
root /var/www/html;
# ๊ธฐ๋ณธ ๋ฌธ์
index index.html index.htm;
# / ๊ฒฝ๋ก โ index.html ๋๋ 404
location / {
try_files $uri $uri/ =404;
}
}
Plain Text
๋ณต์ฌ
root vs alias
๊ตฌ๋ถ | root | alias |
์ง์ ๋ฐฉ์ | location ๋ฐ์์๋ ๊ฐ๋ฅ | location ๋ธ๋ก ๋ด์์๋ง ์ฌ์ฉ |
๊ฒฝ๋ก ์ฒ๋ฆฌ | location ๊ฒฝ๋ก + ํ์ผ๋ช
| alias ๊ฒฝ๋ก + ํ์ผ๋ช
|
์ฌ์ฉ ์ | root /var/www/html | alias /var/www/html/assets |
์์ฒญ | /style.css โ /var/www/html/style.css | /assets/style.css โ /var/www/html/assets/style.css |
# root ์ฌ์ฉ (๊ถ์ฅ)
server {
root /var/www/html;
location / {
try_files $uri $uri/ =404;
}
}
# alias ์ฌ์ฉ (ํน์ํ ๊ฒฝ์ฐ)
server {
location /static/ {
alias /var/www/static/; # ๋์ / ํ์!
}
}
Plain Text
๋ณต์ฌ
try_files ์ง์์ด ์์ธ ๋ถ์
flowchart TD
A["์ฌ์ฉ์ ์์ฒญ<br/>GET /about"] --> B{"step1: ํ์ผ ์กด์ฌ?<br/>$uri"}
B -->|Yes| C["โ
ํ์ผ ๋ฐํ<br/>์์ฒญ ์๋ฃ!"]
B -->|No| D{"step2: ๋๋ ํ ๋ฆฌ ์กด์ฌ?<br/>$uri/"}
D -->|Yes| E["โ
๋๋ ํ ๋ฆฌ์ index ๋ฐํ"]
D -->|No| F{"step3: ๊ธฐ๋ณธ ์ฒ๋ฆฌ<br/>=404"}
F --> G["โ 404 ์๋ฌ ๋ฐํ"]
style C fill:#90EE90
style E fill:#90EE90
style G fill:#FFB3B3Mermaid
๋ณต์ฌ
# ๊ธฐ๋ณธ ํํ
try_files $uri $uri/ =404;
# ํด์:
# 1๋จ๊ณ: $uri ํ์ผ ์๋? (์: /about ํ์ผ)
# 2๋จ๊ณ: $uri/ ๋๋ ํ ๋ฆฌ ์๋? (์: /about/ ๋๋ ํ ๋ฆฌ)
# 3๋จ๊ณ: ์์ผ๋ฉด 404 ์๋ฌ
# React/Vue ๊ฐ์ SPA
try_files $uri $uri/ /index.html;
# ํด์:
# 1๋จ๊ณ: $uri ํ์ผ ์๋?
# 2๋จ๊ณ: $uri/ ๋๋ ํ ๋ฆฌ ์๋?
# 3๋จ๊ณ: ์์ผ๋ฉด /index.html์ ๋ฐํ (React Router๊ฐ ์ฒ๋ฆฌ)
Plain Text
๋ณต์ฌ
ํ์ผ ์ ํ๋ณ ์ค์
server {
root /var/www/html;
# ============================================
# HTML ํ์ผ (์บ์ฑ ์ต์)
# ============================================
location ~* \\.html$ {
expires -1; # ์บ์ฑ ์ ํจ
add_header Cache-Control "no-cache";
add_header Cache-Control "must-revalidate";
}
# ============================================
# CSS, JavaScript (ํด์ ํฌํจ๋๋ฉด ์ฅ๊ธฐ ์บ์ฑ)
# ============================================
location /static/css/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location /static/js/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# ============================================
# ์ด๋ฏธ์ง ํ์ผ (์ค๊ธฐ ์บ์ฑ)
# ============================================
location ~* \\.(jpg|jpeg|png|gif|ico|webp|svg)$ {
expires 30d;
add_header Cache-Control "public";
access_log off; # ๋ก๊ทธ ๊ธฐ๋ก ์ ํจ (๋ก๊ทธ ํฌ๊ธฐ ์ ์ฝ)
}
# ============================================
# ํฐํธ ํ์ผ (์ฅ๊ธฐ ์บ์ฑ)
# ============================================
location ~* \\.(woff|woff2|ttf|eot|otf)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*"; # CORS
}
# ============================================
# ๋์์ ํ์ผ (๋ฒ์ ์์ฒญ ์ง์)
# ============================================
location ~* \\.(mp4|webm|ogg)$ {
expires 30d;
mp4; # MP4 pseudo-streaming
}
# ============================================
# ๊ธฐ๋ณธ ์ ์ ํ์ผ (๋ชจ๋ ๊ฒฝ๋ก)
# ============================================
location / {
try_files $uri $uri/ =404;
}
}
Plain Text
๋ณต์ฌ
์ฑ๋ฅ ์ต์ ํ ์ค์
http {
# ํ์ผ์ ์ปค๋์์ ์ง์ ์ ์ก (๋ฉ๋ชจ๋ฆฌ ๋ณต์ฌ ์ ๊ฑฐ)
sendfile on;
# ํจํท์ ๋ชจ์์ ํ ๋ฒ์ ์ ์ก (๋คํธ์ํฌ ํจ์จ)
tcp_nopush on;
# ์์ฃผ ์ ๊ทผํ๋ ํ์ผ ์ ๋ณด๋ฅผ ๋ฉ๋ชจ๋ฆฌ ์บ์ฑ
open_file_cache max=10000 inactive=20s;
open_file_cache_valid 30s;
open_file_cache_min_uses 2;
# ์์ฒญ ์๋ฃ ํ ์ฐ๊ฒฐ ์ ์ง
keepalive_timeout 65;
server {
root /var/www/html;
index index.html;
location / {
try_files $uri $uri/ =404;
}
# ์ ์ ํ์ผ์ gzip ์์ถ
location ~* \\.(css|js|svg|txt|woff|woff2)$ {
gzip on;
gzip_types text/css application/javascript image/svg+xml;
try_files $uri =404;
}
}
}
Plain Text
๋ณต์ฌ
๊ฐ ์ต์ ํ ์ต์ ํจ๊ณผ
์ต์
| ํจ๊ณผ | ๊ฐ์ ๋ |
sendfile on | ๋ฉ๋ชจ๋ฆฌ ๋ณต์ฌ ์ ๊ฑฐ | 2~3๋ฐฐ ๋น ๋ฅธ ์ ์ก |
tcp_nopush on | ํจํท ์ต์ ํ | ๋คํธ์ํฌ ์ฒ๋ฆฌ๋ 30% ์ฆ๊ฐ |
open_file_cache | ํ์ผ ๋ฉํ๋ฐ์ดํฐ ์บ์ฑ | ๋์คํฌ I/O 50% ๊ฐ์ |
keepalive_timeout | TCP ์ฌ์ฌ์ฉ | ์ฐ๊ฒฐ ์๋ฆฝ ์ค๋ฒํค๋ ์ ๊ฑฐ |
gzip on (CSS/JS) | ์๋ต ํฌ๊ธฐ ์์ถ | 50~70% ํฌ๊ธฐ ๊ฐ์ |
๋ณด์ ์ค์
server {
root /var/www/html;
# ============================================
# ์จ๊น ํ์ผ ์ฐจ๋จ
# ============================================
location ~ /\\. {
deny all;
access_log off;
log_not_found off;
}
# ํน์ ํ์ฅ์ ์ฐจ๋จ (.env, .sh, .git ๋ฑ)
location ~ \\.(env|sh|swp|bak)$ {
return 403;
access_log off;
}
# ============================================
# ์คํ ๋ถ๊ฐ ํ์ฅ์
# ============================================
location ~ \\.(php|asp|aspx|jsp)$ {
return 403;
}
# ============================================
# ์ ์ ํ์ผ ์ ๊ณต
# ============================================
location / {
try_files $uri $uri/ =404;
}
}
Plain Text
๋ณต์ฌ
์ ์ ํ์ผ ์๋น ์ฒดํฌ๋ฆฌ์คํธ
ํญ๋ชฉ | ์ค์ | ํจ๊ณผ |
์น ๋ฃจํธ | root /var/www/html | ํ์ผ ์์น ์ ํํ |
๊ธฐ๋ณธ ๋ฌธ์ | index index.html | / ์ ์ ์ ์๋ |
ํ์ผ ๋งตํ | try_files | ๊ฒฝ๋ก๋ณ ์ ํํ ์ฒ๋ฆฌ |
HTML ์บ์ฑ | expires -1 | ํญ์ ์ต์ ๋ฒ์ |
์์
์บ์ฑ | expires 1y | ๋ธ๋ผ์ฐ์ ์บ์ |
gzip ์์ถ | gzip on | ์ ์ก ํฌ๊ธฐ ๊ฐ์ |
sendfile | sendfile on | ๋น ๋ฅธ ์ ์ก |
์จ๊น ํ์ผ | location ~ /\\. | ๋ณด์ ๊ฐํ |
ํ์ผ ์บ์ฑ | open_file_cache | ๋ฉํ๋ฐ์ดํฐ ์บ์ฑ |
์ ์ ํ์ผ ์๋น ์ค์ต
โข
๋๋ฉ์ธ : ๊ตญ๋ฃฐ.com
โข
์น ๋ฃจํธ : /var/www/krules
์ค์ต ์์
1.
/var/www/krules ๋๋ ํ ๋ฆฌ ์์ฑ
2.
index.html ํ์ผ ์์ฑ (๊ฐ๋จํ HTML ์์ฑ)
3.
Nginx ์ค์ ํ์ผ ์์ฑ (์ ์์ ์ฐธ๊ณ )
โข
/etc/nginx/sites-available/krules.conf
1.
์ฌ๋ณผ๋ฆญ ๋งํฌ ์์ฑ
โข
/etc/nginx/sites-enabled/krules.conf
sudo ln -s /etc/nginx/sites-available/krules.conf /etc/nginx/sites-enabled/
Plain Text
๋ณต์ฌ
1.
Nginx ์ค์ ํ
์คํธ ๋ฐ ์ฌ์์
2.
krules.conf
server {
listen 80;
server_name ๊ตญ๋ฃฐ.com;
root /var/www/krules;
index index.html;
location / {
try_files $uri $uri/ /index.html; # SPA ๋ผ์ฐํ
๋์
}
location /static/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
Plain Text
๋ณต์ฌ
์ค์ ์ฝ๋ ์ค๋ช
โข
listen 80; : HTTP ๊ธฐ๋ณธ ํฌํธ์์ ์์ฒญ ์์
โข
โข
root /var/www/krules; : ์น ๋ฃจํธ ๋๋ ํ ๋ฆฌ ์ค์
โข
index index.html; : ๊ธฐ๋ณธ ๋ฌธ์ ์ค์
โข
location / { ... } : ๋ชจ๋ ๊ฒฝ๋ก์ ๋ํด try_files๋ก ํ์ผ ์กด์ฌ ์ฌ๋ถ ํ์ธ
โข
$uri : ์์ฒญ๋ ๊ฒฝ๋ก (์: /about)
โข
$uri/ : ์์ฒญ๋ ๊ฒฝ๋ก ๋ค์ / ๋ถ์ธ ๊ฒ (์: /about/)
โข
/index.html : ํ์ผ์ด๋ ๋๋ ํ ๋ฆฌ๊ฐ ์์ผ๋ฉด index.html ๋ฐํ (SPA ๋ผ์ฐํ
๋์)
โข
location /static/ { ... } : /static/ ๊ฒฝ๋ก์ ๋ํด ์ฅ๊ธฐ ์บ์ฑ ์ค์ (JS, CSS, ์ด๋ฏธ์ง ๋ฑ)
โข
try_files $uri $uri/ /index.html; : ์์ฒญ๋ ๊ฒฝ๋ก๊ฐ ์ค์ ํ์ผ์ด๋ ๋๋ ํ ๋ฆฌ๊ฐ ์์ผ๋ฉด index.html์ ๋ฐํํ์ฌ React Router๊ฐ ํด๋ผ์ด์ธํธ ์ธก ๋ผ์ฐํ
์ ์ฒ๋ฆฌํ๋๋ก ํจ
โข
/static/ ๊ฒฝ๋ก๋ ์ ์ ์์
์ด๋ฏ๋ก ์ฅ๊ธฐ ์บ์ฑ ์ค์
โข
expires 1y; : ๋ธ๋ผ์ฐ์ ๊ฐ 1๋
๋์ ์บ์ํ๋๋ก ์ง์
โข
add_header Cache-Control "public, immutable"; : ์บ์๊ฐ ๊ณต์ฉ์ด๋ฉฐ ๋ณ๊ฒฝ๋์ง ์๋ ๋ฆฌ์์ค์์ ๋ช
์ํ์ฌ ์บ์ฑ ํจ์จ ๊ทน๋ํ
ํต์ฌ ์ ๋ฆฌ
์ ์ ํ์ผ ์๋น = Nginx์ ๊ฐ์ฅ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ, ์ด๊ณ ์ + ์ ๋ถํ
root ์ง์์ด๋ก ์น ๋ฃจํธ ์ค์ , try_files๋ก ์ ํํ ํ์ผ ๋งตํ
ํ์ผ ์ ํ๋ณ ์บ์ฑ: HTML(์์) โ CSS/JS(1๋
) โ ์ด๋ฏธ์ง(30์ผ)
sendfile + tcp_nopush: ์ปค๋ ๋ ๋ฒจ ์ต์ ํ๋ก 2~3๋ฐฐ ์ฑ๋ฅ ํฅ์
์ ์ ํ์ผ์ gzip ์์ถ: ํ
์คํธ ๊ธฐ๋ฐ(CSS, JS)์ 30~70% ํฌ๊ธฐ ๊ฐ์
๋ณด์: ์จ๊น ํ์ผ(.), .env, .php ๋ฑ ์ฐจ๋จ ํ์



