Recent Posts
Recent Comments
Archives
๋ฐ˜์‘ํ˜•
250x250
ยซ   2024/05   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Today
Yesterday

Total
05-15 00:01
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Hey Tech

ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (4) AWS S3 ์ƒ์„ฑ ๋ณธ๋ฌธ

SW ๊ฐœ๋ฐœ/Amazon Web Service

ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (4) AWS S3 ์ƒ์„ฑ

Tony Park 2022. 6. 10. 00:52
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ์‹œ๋ฆฌ์ฆˆ ํฌ์ŠคํŒ…

1.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (1) React ๊ธฐ๋ฐ˜ Frontend ๊ฐœ๋ฐœ
2.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (2) AWS IAM ์—ญํ•  ์ƒ์„ฑ
3.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (3) AWS Lambda ์ƒ์„ฑ
4.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (4) AWS S3 ์ƒ์„ฑ
5.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (5) AWS API Gateway ์ƒ์„ฑ
6.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (6) AWS Lambda ํ•จ์ˆ˜ ์ž‘์„ฑ
7.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (7) Axios ๊ธฐ๋ฐ˜ API Call
8.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (8) ํŒŒ์ผ ์—…๋กœ๋“œ ํ…Œ์ŠคํŠธ
9.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (9) AWS S3 ๊ธฐ๋ฐ˜ ์›น ํ˜ธ์ŠคํŒ…

๐Ÿ‘จ‍๐Ÿ’ป ๋“ค์–ด๊ฐ€๋ฉฐ

์ด์ „ 3๊ฐœ์˜ ํฌ์ŠคํŒ…์—์„œ๋Š” React ๊ธฐ๋ฐ˜์˜ ํŒŒ์ผ ์—…๋กœ๋“œ์šฉ ์›น ํŽ˜์ด์ง€ Frontend๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , AWS IAM ์—ญํ• ๊ณผ AWS Lambda ์ƒ์„ฑ ์ ˆ์ฐจ๋ฅผ ์†Œ๊ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋ณธ ํฌ์ŠคํŒ…์—์„œ๋Š” ํŒŒ์ผ ์ €์žฅ ์‹œ์Šคํ…œ์ธ AWS S3 ๋ฒ„ํ‚ท์„ ์ƒ์„ฑํ•˜๋Š” ์ ˆ์ฐจ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“š ๋ชฉ์ฐจ

1.  AWS ๊ธฐ๋ณธ ์„ธํŒ…
2.  AWS S3 ๊ฐœ๋…
3.  AWS S3 ์ƒ์„ฑ

1.  AWS ๊ธฐ๋ณธ ์„ธํŒ…

1.1.  ์„œ๋น„์Šค ๊ฐ€์ž…

๋จผ์ € AWS ํ™ˆํŽ˜์ด์ง€์— ๋ฐฉ๋ฌธํ•˜์…”์„œ ํšŒ์›๊ฐ€์ž…์„ ํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ๊ทธ๋ฆผ 1๊ณผ ๊ฐ™์ด ์ตœ์ดˆ ๊ฐ€์ž…ํ•œ ์ด๋ฉ”์ผ ๊ณ„์ •์œผ๋กœ 1๋…„๊ฐ„ ๋ฌด๋ฃŒ ์ฒดํ—˜ํŒ(a.k.a., ํ”„๋ฆฌ ํ‹ฐ์–ด)์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋ฌด๋ฃŒ์ธ ๋งŒํผ ์ €์‚ฌ์–‘ ์„œ๋น„์Šค ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํšŒ์›๊ฐ€์ž… ์‹œ ํ•ด์™ธ ๊ฒฐ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์‹ ์šฉ์นด๋“œ ๋“ฑ๋ก์ด ํ•„์ˆ˜์ž…๋‹ˆ๋‹ค. ์œ ํšจํ•œ ์‹ ์šฉ์นด๋“œ์ธ์ง€ 100์›์„ ๊ฒฐ์ œํ–ˆ๋‹ค๊ฐ€ ๊ณง๋ฐ”๋กœ ์Šน์ธ ์ทจ์†Œ๋˜๋‹ˆ ์œ ํšจํ•œ ์‹ ์šฉ์นด๋“œ๋ฅผ ์ค€๋น„ํ•ด ์ฃผ์„ธ์š”.

๊ทธ๋ฆผ 1. AWS ํ™ˆํŽ˜์ด์ง€

1.2.  ์„œ๋น„์Šค ์ง€์—ญ ๋ณ€๊ฒฝ

ํšŒ์›๊ฐ€์ž…๊นŒ์ง€ ์™„๋ฃŒํ•˜์…จ๋‹ค๋ฉด ํ˜„์žฌ PC๋ฅผ ์‚ฌ์šฉ ์ค‘์ธ ์ง€์—ญ๊ณผ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๊ฑฐ๋ฆฌ์— ์žˆ๋Š” ์„œ๋น„์Šค ์ง€์—ญ(Region)์„ ์„ ํƒํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ถ”ํ›„์— ์„œ๋น„์Šค ์š”๊ธˆ์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์ง€๋งŒ, ์„œ๋น„์Šค ์ง€์—ญ๋งˆ๋‹ค ๊ณผ๊ธˆ์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ๊ทธ๋ฆผ 2์ฒ˜๋Ÿผ, AWS ํ™ˆํŽ˜์ด์ง€ ์šฐ์ธก ์ƒ๋‹จ์— ์ง€์—ญ ์ด๋ฆ„์„ ํด๋ฆญํ•˜๋ฉด ์„œ๋น„์Šค ์ง€์—ญ์„ ๋ณ€๊ฒฝํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํ•œ๋ฏผ๊ตญ์— ๊ฑฐ์ฃผํ•˜๊ณ  ๊ณ„์‹œ๋‹ค๋ฉด Seoul์„ ์„ ํƒํ•ด ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 2. ์„œ๋น„์Šค ์ง€์—ญ ๋ณ€๊ฒฝ

2.  AWS S3 ๊ฐœ๋…

AWS S3๋Š” Simple Storage Service์˜ ์•ฝ์–ด์ž…๋‹ˆ๋‹ค. S๊ฐ€ 3๊ฐœ์—ฌ์„œ S3๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. S3๋Š” ์ด๋ฆ„์—์„œ๋ถ€ํ„ฐ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด, ํŒŒ์ผ ์„œ๋ฒ„์˜ ์—ญํ• ์„ ํ•˜๋Š” ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค. S3๋Š” ํŠธ๋ž˜ํ”ฝ์ด ๊ธ‰๊ฒฉํ•˜๊ฒŒ ์ฆ๊ฐ€ํ•˜๋”๋ผ๋„ ์žฅ๋น„๋ฅผ ์ถ”๊ฐ€ ์ฆ์„คํ•  ํ•„์š” ์—†์ด๋„ ํŒŒ์ผ ์„œ๋ฒ„๋ฅผ ๋ฌธ์ œ์—†์ด ๋™์ž‘์‹œํ‚ต๋‹ˆ๋‹ค. S3๋Š” ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํŒŒ์ผ์˜ ๊ฐœ์ˆ˜ ์ œํ•œ์ด ์—†๊ณ , ์ตœ์†Œ 1๋ฐ”์ดํŠธ๋ถ€ํ„ฐ ์ตœ๋Œ€ 5 ํ…Œ๋ผ๋ฐ”์ดํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ์„œ๋น„์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3.  AWS S3 ์ƒ์„ฑ

์ด์ œ S3 ๋ฒ„ํ‚ท์„ ์ƒ์„ฑํ•˜๋Š” ์ ˆ์ฐจ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

1) S3 ์ฝ˜์†” ์ ‘๊ทผ

AWS ๊ฒ€์ƒ‰์ฐฝ์— S3๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ณ  S3 ์ฝ˜์†”์— ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋ฆผ 3).

๊ทธ๋ฆผ 3. S3 ์ฝ˜์†” ์ ‘๊ทผ

2) ๋ฒ„ํ‚ท ์ƒ์„ฑ

๊ทธ๋ฆผ 4์˜ ์šฐ์ธก์— "๋ฒ„ํ‚ท ๋งŒ๋“ค๊ธฐ"๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 4. ๋ฒ„ํ‚ท ๋งŒ๋“ค๊ธฐ ํด๋ฆญ

3) ๋ฒ„ํ‚ท ์ด๋ฆ„ ์„ค์ •

์ง๊ด€์ ์œผ๋กœ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋Š” ์ด๋ฆ„์œผ๋กœ ๋„ค์ด๋ฐํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋ฆผ 5).

๊ทธ๋ฆผ 5. ๋ฒ„ํ‚ท ์ด๋ฆ„ ์„ค์ •

4) ๋ฒ„์ „ ๊ด€๋ฆฌ ๋ฐ ์•”ํ˜ธํ™” ํ™œ์„ฑํ™”

์•„๋ž˜์˜ ๊ทธ๋ฆผ 6์ฒ˜๋Ÿผ, ๋ฒ„ํ‚ท ๋ฒ„์ „ ๊ด€๋ฆฌ ๋ฐ ์„œ๋ฒ„ ์ธก ์•”ํ˜ธํ™”๋ฅผ ํ™œ์„ฑํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ด์ œ ๋งจ ์šฐ์ธก ํ•˜๋‹จ์— "๋ฒ„ํ‚ท ๋งŒ๋“ค๊ธฐ"๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 6. ๋ฒ„์ „ ๊ด€๋ฆฌ ๋ฐ ์•”ํ˜ธํ™” ํ™œ์„ฑํ™”

์ด์ œ S3 ์ƒ์„ฑ์ด ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ๋Š” AWS API Gateway๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃน๋‹ˆ๋‹ค.

๐Ÿ“Œ ์‹œ๋ฆฌ์ฆˆ ํฌ์ŠคํŒ…

1.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (1) React ๊ธฐ๋ฐ˜ Frontend ๊ฐœ๋ฐœ
2.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (2) AWS IAM ์—ญํ•  ์ƒ์„ฑ
3.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (3) AWS Lambda ์ƒ์„ฑ
4.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (4) AWS S3 ์ƒ์„ฑ
5.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (5) AWS API Gateway ์ƒ์„ฑ
6.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (6) AWS Lambda ํ•จ์ˆ˜ ์ž‘์„ฑ
7.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (7) Axios ๊ธฐ๋ฐ˜ API Call
8.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (8) ํŒŒ์ผ ์—…๋กœ๋“œ ํ…Œ์ŠคํŠธ
9.  ํŒŒ์ผ ์—…๋กœ๋“œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์ถ•: (9) AWS S3 ๊ธฐ๋ฐ˜ ์›น ํ˜ธ์ŠคํŒ…

ํฌ์ŠคํŒ… ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ๋ณด์™„ํ•  ์ ์ด ์žˆ๋‹ค๋ฉด ์•„๋ž˜์— ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์„ธ์š”!

๊ทธ๋Ÿผ ์˜ค๋Š˜๋„ ๋ฉ‹์ง„ ํ•˜๋ฃจ ๋งŒ๋“œ์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค :)

๊ณ ๋ง™์Šต๋‹ˆ๋‹ค๐Ÿ˜Š

728x90
๋ฐ˜์‘ํ˜•
Comments