Skip to content

Commit d186834

Browse files
luwbe1luwbe1
committed
Docs: 성능 보고서 캐싱 없어서 재작성
1 parent e4214fd commit d186834

File tree

1 file changed

+121
-103
lines changed

1 file changed

+121
-103
lines changed

‎README.md‎

Lines changed: 121 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,21 @@
1919
  - [Route53과 DNS 서비스](#route53과-dns-서비스)
2020
[CDN과 성능 최적화 비교](#cdn과-성능최적화)
2121

22-
2322
### 개요
23+
2424
#### 파이프라인 다이어그램 (diagrams)
25+
2526
![Image](https://github.com/user-attachments/assets/471e09f6-fbd4-4437-9174-c2cafa64e829)
2627

2728
#### 파이프라인 플로우 차트
29+
2830
```mermaid
2931
graph TB
3032
Dev[👨‍💻 Developer] --> |코드 작성 및 커밋| LocalRepo[📁 Local Git Repository]
3133
LocalRepo --> |git push origin main| GitHub[🐙 GitHub Repository]
32-
34+
3335
GitHub --> |트리거| GitHubActions[⚡ GitHub Actions]
34-
36+
3537
subgraph "GitHub Actions Workflow"
3638
GitHubActions --> Checkout[📥 Checkout Code<br/>actions/checkout@v4]
3739
Checkout --> NodeSetup[🔧 Setup Node.js<br/>actions/setup-node@v4]
@@ -41,28 +43,28 @@ graph TB
4143
AWSConfig --> S3Upload[📤 Upload to S3<br/>aws s3 sync ./out s3://bucket]
4244
S3Upload --> CloudFrontInvalidation[🔄 CloudFront Invalidation<br/>aws cloudfront create-invalidation]
4345
end
44-
46+
4547
subgraph "AWS Services"
4648
S3[📦 Amazon S3<br/>Static File Hosting<br/>• HTML, CSS, JS 파일<br/>• 이미지 및 정적 자산<br/>• 버킷 정책 설정]
4749
CloudFront[🌐 Amazon CloudFront<br/>CDN 서비스<br/>• 전 세계 엣지 로케이션<br/>• 캐시 관리<br/>• HTTPS 지원]
4850
IAM[🔒 AWS IAM<br/>• GitHub Actions용 사용자<br/>• S3 읽기/쓰기 권한<br/>• CloudFront 무효화 권한]
4951
end
50-
52+
5153
subgraph "보안 관리"
5254
GitHubSecrets[🔑 GitHub Repository Secrets<br/>• AWS_ACCESS_KEY_ID<br/>• AWS_SECRET_ACCESS_KEY<br/>• AWS_REGION]
5355
AWSSecrets[🛡️ AWS Secrets Manager<br/>선택적 고급 보안]
5456
end
55-
57+
5658
S3Upload --> S3
5759
CloudFrontInvalidation --> CloudFront
5860
AWSConfig -.-> GitHubSecrets
5961
AWSConfig -.-> IAM
6062
GitHubSecrets -.-> AWSSecrets
61-
63+
6264
S3 --> |Origin| CloudFront
6365
CloudFront --> |빠른 전송| EdgeLocations[🌍 Edge Locations<br/>전 세계 캐시 서버]
6466
EdgeLocations --> Users[👥 End Users<br/>웹사이트 방문자]
65-
67+
6668
style GitHub fill:#24292e,stroke:#fff,stroke-width:2px,color:#fff
6769
style GitHubActions fill:#2088ff,stroke:#fff,stroke-width:2px,color:#fff
6870
style S3 fill:#ff9900,stroke:#fff,stroke-width:2px,color:#fff
@@ -72,6 +74,7 @@ graph TB
7274
```
7375

7476
#### 파이프라인 시퀀스 다이어그램
77+
7578
```mermaid
7679
sequenceDiagram
7780
participant Dev as 👨‍💻 Developer
@@ -82,46 +85,47 @@ sequenceDiagram
8285
participant CF as 🌐 CloudFront
8386
participant IAM as 🔒 IAM
8487
participant User as 👥 End User
85-
88+
8689
Dev->>Git: 1. 코드 작성 및 커밋
8790
Dev->>GH: 2. git push origin main
88-
91+
8992
Note over GH,GA: 🚀 자동 배포 시작
9093
GH->>GA: 3. Push 이벤트 트리거
91-
94+
9295
Note over GA: 📋 Workflow 실행
9396
GA->>GA: 4. Checkout 코드
9497
GA->>GA: 5. Node.js 환경 설정
9598
GA->>GA: 6. npm ci (의존성 설치)
9699
GA->>GA: 7. npm run build (빌드)
97-
100+
98101
Note over GA,IAM: 🔐 AWS 인증
99102
GA->>IAM: 8. AWS 자격 증명 확인
100103
IAM-->>GA: 9. 인증 성공
101-
104+
102105
Note over GA,S3: 📤 정적 파일 업로드
103106
GA->>S3: 10. 빌드 파일 업로드
104107
S3-->>GA: 11. 업로드 완료
105-
108+
106109
Note over GA,CF: 🔄 캐시 무효화
107110
GA->>CF: 12. 캐시 무효화 요청
108111
CF-->>GA: 13. 무효화 시작
109-
112+
110113
Note over CF: 🌍 전 세계 배포
111114
CF->>CF: 14. 엣지 로케이션 업데이트
112-
115+
113116
Note over User,CF: 🌐 사용자 접근
114117
User->>CF: 15. 웹사이트 요청
115118
CF->>S3: 16. Origin에서 파일 가져오기 (캐시 미스 시)
116119
S3-->>CF: 17. 파일 전송
117120
CF-->>User: 18. 최신 웹사이트 제공
118-
121+
119122
Note over Dev,User: ✅ 배포 완료!
120123
```
121124

122125
### 주요 단계별 설명
123126

124127
#### 1. GitHub Actions
128+
125129
워크플로우 구성: `main` 브랜치에 push 이벤트가 발생하면 배포가 자동으로 진행됩니다.
126130

127131
- 주요 작업:
@@ -165,27 +169,27 @@ AWS Secrets Manager나 GitHub Repository Secrets를 활용해 자격 증명을
165169
예를 들어, 코드 push 시 자동으로 테스트, 빌드, 배포 과정을 실행합니다.
166170
이를 통해 배포 오류를 줄이고, 일관된 개발 파이프라인을 유지할 수 있습니다.
167171

168-
169-
**예시 워크플로우**
170-
```
171-
name: Deploy to S3
172-
on:
173-
push:
174-
branches: [main]
175-
jobs:
176-
deploy:
177-
runs-on: ubuntu-latest
178-
steps:
179-
- uses: actions/checkout@v4
180-
- name: Setup Node.js
181-
uses: actions/setup-node@v4
182-
with:
183-
node-version: '18'
184-
- run: npm ci
185-
- run: npm run build
186-
- name: Deploy to S3
187-
run: aws s3 sync ./build s3://my-bucket
188-
```
172+
**예시 워크플로우**
173+
174+
```
175+
name: Deploy to S3
176+
on:
177+
push:
178+
branches: [main]
179+
jobs:
180+
deploy:
181+
runs-on: ubuntu-latest
182+
steps:
183+
- uses: actions/checkout@v4
184+
- name: Setup Node.js
185+
uses: actions/setup-node@v4
186+
with:
187+
node-version: '18'
188+
- run: npm ci
189+
- run: npm run build
190+
- name: Deploy to S3
191+
run: aws s3 sync ./build s3://my-bucket
192+
```
189193

190194
- #### S3와 스토리지
191195

@@ -194,6 +198,7 @@ AWS Secrets Manager나 GitHub Repository Secrets를 활용해 자격 증명을
194198
높은 내구성(99.999999999%)과 가용성을 제공해, 안전하게 정적 파일을 저장할 수 있습니다.
195199

196200
**S3 버킷 구조 예시**
201+
197202
```
198203
my-website-bucket/
199204
├── index.html
@@ -207,19 +212,20 @@ AWS Secrets Manager나 GitHub Repository Secrets를 활용해 자격 증명을
207212
└── images/
208213
├── logo.png
209214
└── hero-bg.jpg
210-
```
211-
212-
**AWS CLI로 파일 업로드**
213-
```
214-
# 단일 파일 업로드
215-
aws s3 cp index.html s3://my-bucket/
216-
217-
# 폴더 전체 동기화
218-
aws s3 sync ./build s3://my-bucket --delete
219-
220-
# 정적 웹사이트 호스팅 설정
221-
aws s3 website s3://my-bucket --index-document index.html
222-
```
215+
```
216+
217+
**AWS CLI로 파일 업로드**
218+
219+
```
220+
# 단일 파일 업로드
221+
aws s3 cp index.html s3://my-bucket/
222+
223+
# 폴더 전체 동기화
224+
aws s3 sync ./build s3://my-bucket --delete
225+
226+
# 정적 웹사이트 호스팅 설정
227+
aws s3 website s3://my-bucket --index-document index.html
228+
```
223229

224230
- #### CloudFront와 CDN
225231

@@ -228,6 +234,7 @@ AWS Secrets Manager나 GitHub Repository Secrets를 활용해 자격 증명을
228234
CDN은 글로벌 사용자에게 콘텐츠를 빠르게 제공하고, 서버 부하를 줄여줍니다.
229235

230236
**CDN 작동 원리**
237+
231238
```
232239
사용자(서울) → 한국 엣지 서버 → 콘텐츠 전달 (빠름 ⚡)
233240
vs
@@ -241,34 +248,38 @@ AWS Secrets Manager나 GitHub Repository Secrets를 활용해 자격 증명을
241248
이때 캐시 무효화를 통해 최신 콘텐츠로 빠르게 갱신할 수 있습니다.
242249
예) CloudFront의 Invalidation API를 사용해서 특정 경로 캐시를 제거.
243250

244-
**CloudFront 캐시 무효화 명령어**
245-
```
246-
# 전체 캐시 무효화
247-
aws cloudfront create-invalidation \
248-
--distribution-id E1234567890123 \
249-
--paths "/*"
250-
251-
# 특정 파일만 무효화
252-
aws cloudfront create-invalidation \
253-
--distribution-id E1234567890123 \
254-
--paths "/index.html" "/css/styles.css"
255-
```
256-
**캐시 무효화 과정**
257-
1. 새 파일 업로드 → S3
258-
2. 캐시 무효화 실행 → CloudFront
259-
3. 전 세계 엣지 서버 캐시 삭제
260-
4. 사용자 요청 시 → 새 파일 전달
251+
**CloudFront 캐시 무효화 명령어**
252+
253+
```
254+
# 전체 캐시 무효화
255+
aws cloudfront create-invalidation \
256+
--distribution-id E1234567890123 \
257+
--paths "/*"
258+
259+
# 특정 파일만 무효화
260+
aws cloudfront create-invalidation \
261+
--distribution-id E1234567890123 \
262+
--paths "/index.html" "/css/styles.css"
263+
```
264+
265+
**캐시 무효화 과정**
266+
267+
1. 새 파일 업로드 → S3
268+
2. 캐시 무효화 실행 → CloudFront
269+
3. 전 세계 엣지 서버 캐시 삭제
270+
4. 사용자 요청 시 → 새 파일 전달
261271

262272
- #### Repository secret과 환경변수
263-
273+
264274
Repository secret은 GitHub Actions 등에서 민감 정보를 안전하게 관리하는 방식입니다.
265275
예를 들어, 배포용 API 키, 데이터베이스 비밀번호 등을 저장하고, 워크플로에서 환경 변수로 불러와 사용합니다.
266276
이를 통해 보안을 유지하면서도 자동화 파이프라인을 안전하게 실행할 수 있습니다.
267277

268278
**GitHub Repository Secrets 설정**
279+
269280
```
270281
Settings → Secrets and variables → Actions
271-
282+
272283
필요한 Secrets:
273284
- AWS_ACCESS_KEY_ID: AKIA...
274285
- AWS_SECRET_ACCESS_KEY: wJalr...
@@ -277,68 +288,75 @@ AWS Secrets Manager나 GitHub Repository Secrets를 활용해 자격 증명을
277288
```
278289

279290
**워크플로우에서 Secret 사용**
291+
280292
```
281293
- name: Configure AWS credentials
282294
uses: aws-actions/configure-aws-credentials@v1
283295
with:
284296
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
285297
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
286298
aws-region: ${{ secrets.AWS_REGION }}
287-
299+
288300
- name: Deploy to S3
289301
run: |
290302
aws s3 sync ./build s3://${{ secrets.S3_BUCKET_NAME }}
291-
```
303+
```
292304

293305
- #### Route53과 DNS 서비스
294-
306+
295307
Route 53은 AWS의 DNS(도메인 네임 시스템) 관리 서비스입니다.
296308
S3 또는 CloudFront에 배포된 웹사이트에 도메인(예: www.example.com)을 연결할 수 있습니다.
297309
사용자는 Route 53을 통해 사용자 지정 도메인과 연결된 트래픽을 전 세계적으로 안정적이고 빠르게 라우팅할 수 있습니다.
298310
실무에선 Route 53을 사용해 도메인 등록 → S3/CloudFront와 연결 → HTTPS 인증서 발급까지 진행하는 경우가 많습니다.
299311

300312
**도메인 연결 전체 흐름**
301-
1. 도메인 구매 (Route 53 또는 외부)
302-
2. Route 53 호스팅 존 생성
303-
3. DNS 레코드 설정 (A, CNAME)
304-
4. SSL 인증서 발급 (ACM)
305-
5. CloudFront에 도메인 연결
306-
6. 사용자 접근: mysite.com → Route 53 → CloudFront → S3
313+
314+
1. 도메인 구매 (Route 53 또는 외부)
315+
2. Route 53 호스팅 존 생성
316+
3. DNS 레코드 설정 (A, CNAME)
317+
4. SSL 인증서 발급 (ACM)
318+
5. CloudFront에 도메인 연결
319+
6. 사용자 접근: mysite.com → Route 53 → CloudFront → S3
307320

308321
---
309322

310323
### CDN과 성능최적화
311324

312325
##### S3와 CloundFront
313-
![Image](https://github.com/user-attachments/assets/29e2252f-2f85-4ca6-9ff3-176714f88c5b)
314-
![Image](https://github.com/user-attachments/assets/e63fbc33-93bf-4e91-8a2e-cd34b98e5152)
315-
#### 첫 화면 로딩 (HTML 문서)
316326

317-
| 비교 지점 | S3 직접 배포 | CloudFront (CDN) 배포 |
318-
| ----------------- | ------------------------ | --------------------- |
319-
| **document** | 13.4KB, 응답 203ms | 3.4KB, 응답 17ms |
320-
| **document 응답** | S3 직접 응답 (us-east-1) | CDN 엣지 서버 응답 |
327+
![Image](https://github.com/user-attachments/assets/c7c56456-c204-47ff-b09c-886a23e0e697)
328+
![Image](https://github.com/user-attachments/assets/5864931d-667f-4a09-877e-0954f3aea4a5)
329+
330+
#### 테스트 환경
321331

322-
#### JS / CSS / Font / 이미지 리소스
332+
- 오리진: Amazon S3 정적 파일 호스팅 (us-east-1)
333+
- CDN: Amazon CloudFront 배포 (엣지 로케이션 캐시 적용)
334+
- 테스트 방식: 크롬 개발자 도구 네트워크 탭, 캐시 무효화 후 새로고침 (Hard Reload)
335+
- 주요 로드 항목: HTML, JS, CSS, 이미지, 폰트 등 약 20개
323336

324-
| 리소스 유형 | S3 직접 배포 | CloudFront (CDN) 배포 |
325-
| -------------- | ----------------------------------- | ----------------------------------- |
326-
| **CSS** | f5851670bcc5d7e2.css, 200 응답, 0ms | f5851670bcc5d7e2.css, 200 응답, 0ms |
327-
| **JS** | 8개 정도의 JS 파일, 200 응답, 0ms | 8개 정도의 JS 파일, 200 응답, 0ms |
328-
| **Font / svg** | font, svg 등도 0ms 응답 | font, svg 등도 0ms 응답 |
337+
#### 측정 결과 요약
329338

330-
S3는 HTML(document)만 네트워크 딜레이(203ms)가 보였고, 나머지는 브라우저 메모리 캐시로 인해 0ms로 보였습니다.
331-
CloudFront도 HTML(document) 요청만 실제 엣지에서 빠른 응답(17ms)이 확인되었고, 나머지는 메모리 캐시로 0ms.
339+
| 항목 | S3 직접 접근 | CloudFront CDN 사용 |
340+
| ------------------------- | ------------------------------------------------ | --------------------------------------------- |
341+
| **첫 바이트 수신 (TTFB)** | 평균 **200\~250ms** (최대 300ms 이상) | 평균 **10\~20ms** (1/10 이하로 단축) |
342+
| **전체 로딩 시간** | 최대 **1,800ms** (JS, CSS, 이미지까지 로드 완료) | 최대 **600\~900ms** (50% 이상 단축) |
343+
| **JS 주요 번들 로드** | 개별 400\~800ms까지 소요 | 개별 400\~500ms 이하, Edge 캐시 활용으로 빠름 |
344+
| **HTML 응답** | 13.4kB, 200\~300ms | 3.5kB, 10\~20ms (오리진 대신 CDN 캐시 전달) |
345+
| **캐시 여부** | 오리진만 응답, 캐시 전략 미적용 | CloudFront **HIT** 응답으로 빠른 전송 가능 |
332346

333-
#### 네트워크 타임라인 및 성능 차이
347+
#### 상세 분석
334348

335-
| 비교 지점 | S3 직접 배포 | CloudFront (CDN) 배포 |
336-
| --------------- | --------------------------------------------------- | -------------------------------------- |
337-
| **최초 요청** | 200ms 이상 | 17ms로 매우 빠름 |
338-
| **정적 리소스** | 메모리 캐시로 인해 0ms 응답 | 메모리 캐시로 인해 0ms 응답 |
339-
| **콘텐츠 위치** | S3 (us-east-1, AWS 리전) | 전 세계 CDN 엣지 로케이션 |
340-
| **사용자 경험** | 지역적으로는 빠름, 글로벌 사용자에게는 느릴 수 있음 | 전 세계 어디서나 빠른 응답 (캐시 덕분) |
349+
첫 바이트 수신 속도: CDN의 엣지 로케이션에서 캐시된 응답이 바로 내려와, TTFB가 S3 직접 접근 대비 10배 이상 빨라졌음.
350+
전체 로딩 속도: JS, CSS 등 큰 리소스도 CDN을 통해 분산 전송되어, 최종 렌더링까지 걸리는 총 시간이 50% 이상 단축.
351+
JS 번들: 여러 개의 번들 파일 로드 속도도 평균 400~500ms 수준으로 일정해졌고, CDN 미사용 시에는 일부 파일이 1,000ms까지 걸림.
352+
사용자 경험: 첫 화면 렌더링이 더 빨라지고, 스크롤/상호작용에도 빠른 반응성을 제공하게 됨.
341353

342-
#### 결론
354+
#### 시사점 및 결론
343355

344-
이번 비교에서 CloudFront를 도입하면 S3에서 HTML 파일만 직접 가져오던 때보다 첫 화면 로딩 속도가 203ms → 17ms로 줄었습니다. 정적 리소스(JS/CSS)는 캐시가 적용되어 양쪽 모두 0ms였지만, CDN을 통해 전 세계 사용자에게 동일한 빠른 응답을 제공할 수 있습니다. CDN은 사용자 체감 성능을 높이고 서버 트래픽을 줄여주는 효과를 확인할 수 있었습니다.
356+
- 사용자 경험 개선: CloudFront CDN으로 사용자 첫 화면 렌더링 속도가 눈에 띄게 향상됨.
357+
- 서버 부하 감소: 오리진 요청 대신 엣지 서버 응답으로 S3 부하가 감소함.
358+
- 장애 대응력: CDN의 글로벌 네트워크가 대규모 트래픽에도 안정적인 전송을 보장함.
359+
- 추가 개선 아이디어:
360+
- 콘텐츠 캐시 정책: 파일별 캐시 만료 시간(TTL) 최적화로 응답성 극대화
361+
- 이미지 최적화: S3 오리진 단계에서 WebP 변환 등 이미지 최적화도 검토 가능
362+
- 라우팅 최적화: CloudFront의 지리적 라우팅 기능(Geo Routing)으로 각 지역 사용자에게 더 빠른 응답 제공

0 commit comments

Comments
 (0)