๊ด€๋ฆฌ ๋ฉ”๋‰ด

Hey Tech

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

SW ๊ฐœ๋ฐœ/Amazon Web Service

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

Tony Park (ํ† ๋‹ˆ) 2022. 6. 10. 01:33
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 ๊ธฐ๋ฐ˜ ์›น ํ˜ธ์ŠคํŒ…

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

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

๐Ÿ“š ๋ชฉ์ฐจ

1.  API Gateway ๊ฐœ๋…
2. API Gateway ์ƒ์„ฑ 

1.  API Gateway ๊ฐœ๋…

์•„๋งˆ์กด ์›น ์„œ๋น„์Šค(AWS)์˜ API Gateway๋Š” HTTP, REST, WebSocket API๋ฅผ ์ƒ์„ฑ, ๊ฒŒ์‹œ, ์œ ์ง€, ๋ชจ๋‹ˆํ„ฐ๋ง, ๋ณดํ˜ธํ•ด ์ฃผ๋Š” ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๊ฐœ๋… ์„ค๋ช…์€ AWS์˜ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/welcome.html

 

Amazon API Gateway๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? - Amazon API Gateway

์ด ํŽ˜์ด์ง€์— ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค๋Š” ์ ์„ ์•Œ๋ ค ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์‹ค๋ง์‹œ์ผœ ๋“œ๋ ค ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ž ๊น ์‹œ๊ฐ„์„ ๋‚ด์–ด ์„ค๋ช…์„œ๋ฅผ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋ง์”€ํ•ด ์ฃผ์‹ญ์‹œ์˜ค.

docs.aws.amazon.com

2.  API Gateway ์ƒ์„ฑ

1) API Gateway ์ฝ˜์†” ์ ‘๊ทผ

๋จผ์ € AWS ํ™ˆํŽ˜์ด์ง€ ๋‚ด ๊ฒ€์ƒ‰์ฐฝ์—์„œ API Gateway๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ ํ•ด๋‹น ์ฝ˜์†”๋กœ ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋ฆผ 1).

๊ทธ๋ฆผ 1. API Gateway ์ฝ˜์†” ์ ‘๊ทผ

2) REST API ๊ตฌ์ถ•

์ฝ˜์†” ํ•˜๋‹จ์— REST API ๊ตฌ์ถ•์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋ฆผ 2).

๊ทธ๋ฆผ 2. REST API ๊ตฌ์ถ• ์„ ํƒ

3) API ๋„ค์ด๋ฐ

์•„๋ž˜์˜ ๊ทธ๋ฆผ 3์ฒ˜๋Ÿผ, "์ƒˆ API" ์„ ํƒํ•œ ํ›„, ์ง๊ด€์ ์ธ ์ด๋ฆ„์œผ๋กœ API๋ฅผ ๋„ค์ด๋ฐํ•˜๊ณ  ์šฐ์ธก ํ•˜๋‹จ์— "API ์ƒ์„ฑ" ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 3. API ๋„ค์ด๋ฐ

4) ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ

์•„๋ž˜์˜ ๊ทธ๋ฆผ 4์ฒ˜๋Ÿผ, "์ž‘์—…"์„ ํด๋ฆญํ•˜๊ณ  "๋ฆฌ์†Œ์Šค ์ƒ์„ฑ"์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 4. ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ

5) ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ์˜ต์…˜

๋ฆฌ์†Œ์Šค ๋„ค์ด๋ฐํ•˜๊ณ  API Gateway CORS ํ™œ์„ฑํ™”๋ฅผ ์ฒดํฌํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋ฆผ 5).

๊ทธ๋ฆผ 5. ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ์˜ต์…˜

6) ๋ฉ”์„œ๋“œ ์ƒ์„ฑ

๋‹ค์‹œ ์•„๋ž˜์˜ ๊ทธ๋ฆผ 6์ฒ˜๋Ÿผ "์ž‘์—…" ๋ฒ„ํŠผ ํด๋ฆญ ํ›„ "๋ฉ”์„œ๋“œ ์ƒ์„ฑ" ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 6. ๋ฉ”์„œ๋“œ ์ƒ์„ฑ

7) POST ๋ฉ”์„œ๋“œ ์ƒ์„ฑ

์•„๋ž˜์˜ ๊ทธ๋ฆผ 7์ฒ˜๋Ÿผ "POST"๋ฅผ ์„ ํƒํ•˜๊ณ  ์ฒดํฌ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 7. POST ๋ฉ”์„œ๋“œ ์ƒ์„ฑ

8) POST ๋ฉ”์„œ๋“œ ์„ค์ •

์•„๋ž˜์˜ ๊ทธ๋ฆผ 8์ฒ˜๋Ÿผ, ํ†ตํ•ฉ ์œ ํ˜•์€ Lambda ํ•จ์ˆ˜๋ฅผ ์„ ํƒํ•˜๊ณ , Lambda ํ”„๋ก์‹œ ํ†ตํ•ฉ ์‚ฌ์šฉ์„ ์ฒดํฌํ•ฉ๋‹ˆ๋‹ค. ์ด์ „ ํฌ์ŠคํŒ…์—์„œ ์ƒ์„ฑํ–ˆ๋˜ Lambda ํ•จ์ˆ˜ ์ด๋ฆ„์„ ์ž…๋ ฅํ•˜์—ฌ ํ•ด๋‹น ๋žŒ๋‹ค ํ•จ์ˆ˜๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 8. POST ๋ฉ”์„œ๋“œ ์„ค์ •

9) API ๋ฐฐํฌํ•˜๊ธฐ

์•„๋ž˜์˜ ๊ทธ๋ฆผ 9์ฒ˜๋Ÿผ, ๋‹ค์‹œ "์ž‘์—…" ๋ฒ„ํŠผ ํด๋ฆญ ํ›„ "API ๋ฐฐํฌ" ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 9. API ๋ฐฐํฌํ•˜๊ธฐ

10) API ๋ฐฐํฌ ์Šคํ…Œ์ด์ง€ ์„ค์ •

๋ฐฐํฌ ์Šคํ…Œ์ด์ง€๋Š” [์ƒˆ ์Šคํ…Œ์ด์ง€]๋กœ ์„ ํƒํ•˜๊ณ  ์•„๋ž˜์— ์Šคํ…Œ์ด์ง€ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค(๊ทธ๋ฆผ 10).

๊ทธ๋ฆผ 10. API ๋ฐฐํฌ ์Šคํ…Œ์ด์ง€ ์„ค์ •

์ด์ œ API Gateway ์ƒ์„ฑ ๋ฐ ๊ธฐ๋ณธ์ ์ธ ์„ธํŒ…์ด ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ๊ทธ๋ฆผ 11์ฒ˜๋Ÿผ ๋ฐฐํฌ๋œ URL์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ถ”ํ›„ ํ•ด๋‹น URL๋กœ ํŒŒ์ผ์„ axios๋ฅผ ํ™œ์šฉํ•ด POST ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๊ทธ๋ฆผ 11. API Gateway URL

๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฐฑ์—”๋“œ ์—ญํ• ์˜ Lambda ํ•จ์ˆ˜ ์ž‘์„ฑ ์ ˆ์ฐจ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

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

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
๋ฐ˜์‘ํ˜•