SW 개발/Amazon Web Service

파일 μ—…λ‘œλ“œ μ›Ή νŽ˜μ΄μ§€ ꡬ좕: (5) AWS API Gateway 생성

DATA101 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
λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ 동일쑰건 (μƒˆμ°½μ—΄λ¦Ό)