AWS

[Trouble Shooting] Nginx proxy μ„€μ •

martinooo 2023. 2. 1. 12:28

🀷‍♂️ Proxy?

λ‹€λ₯Έ μ„œλ²„μ—μ„œ λ¦¬μ†ŒμŠ€λ₯Ό μ°ΎλŠ” ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ— λŒ€ν•œ μ€‘κ³„μž 역할을 ν•˜λŠ” μ„œλ²„μ΄λ‹€. λ”°λΌμ„œ ν”„λ‘μ‹œ μ„œλ²„λŠ” ν΄λΌμ΄μ–ΈνŠΈμ™€ ν΄λΌμ΄μ–ΈνŠΈκ°€ μ°Ύκ³  μžˆλŠ” 데이터λ₯Ό ν˜ΈμŠ€νŒ…ν•˜λŠ” μ‹€μ œ μ„œλ²„ 사이에 μœ„μΉ˜ν•œλ‹€. ν΄λΌμ΄μ–ΈνŠΈμ—κ²Œ ν”„λ‘μ‹œ μ„œλ²„λŠ” μ‹€μ œ λ°±μ—”λ“œ μ„œλ²„λ‘œ λ‚˜νƒ€λ‚˜κ³ , λ°±μ—”λ“œ μ„œλ²„μ—λŠ” ν”„λ‘μ‹œ μ„œλ²„κ°€ ν΄λΌμ΄μ–ΈνŠΈμ²˜λŸΌ 보인닀.

ν”„λ‘μ‹œλ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μœ λŠ” λ‹¨μˆœνžˆ λ³΄μ•ˆλ•Œλ¬Έλ§Œμ΄ μ•„λ‹ˆλΌ ν”„λ‘μ‹œ μ„œλ²„μ— μš”μ²­μ΄ 된 데이터듀을  [μΊμ‹œ]λ₯Ό μ΄μš©ν•΄ μ €μž₯ν•΄ λ‘‘λ‹ˆλ‹€. μΊμ‹œλ₯Ό ν™œμš©ν•΄μ„œ μš”μ²­μ‹œκ°„μ„ μ ˆμ•½ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.  

🀷‍♂️ Reverse Proxy?

ν•˜λ‚˜ μ΄μƒμ˜ λ°±μ—”λ“œ μ„œλ²„ μ•žμ— μœ„μΉ˜ν•˜μ—¬ 각 μš”μ²­μ— μ‚¬μš©ν•  λ°±μ—”λ“œ μ„œλ²„λ₯Ό κ²°μ •ν•˜λŠ” 것이닀.

 

Reverse Proxy μž₯점

  • λ™μ‹œμ„± : 닀쀑 연결을 더 잘 μ²˜λ¦¬ν•  수 μžˆλŠ” μ—­λ°©ν–₯ ν”„λ‘μ‹œλ₯Ό μΆ”κ°€ν•˜λ©΄ λ°±μ—”λ“œ μ„œλ²„ μ„±λŠ₯이 크게 ν–₯상될 수 μžˆλ‹€.
  • 볡원λ ₯ : λ°±μ—”λ“œ μ„œλ²„μ˜ μƒνƒœλ₯Ό λͺ¨λ‹ˆν„°λ§ν•˜κ³  μ„œλΉ„μŠ€κ°€ 재개될 λ•ŒκΉŒμ§€ μ‹€νŒ¨ν•œ μ„œλ²„μ— λŒ€ν•œ μš”μ²­ 전솑을 쀑지할 수 μžˆλ‹€. μ—­λ°©ν–₯ ν”„λ‘μ‹œκ°€ μ—¬μ „νžˆ μž‘λ™ 쀑인 λ°±μ—”λ“œ μ„œλ²„μ— μš”μ²­μ„ μžλ™μœΌλ‘œ 보내기 λ•Œλ¬Έμ— ν΄λΌμ΄μ–ΈνŠΈμ—λŠ” 였λ₯˜κ°€ ν‘œμ‹œλ˜μ§€ μ•ŠλŠ”λ‹€.
  • ν™•μž₯μ„± : μ—­λ°©ν–₯ ν”„λ‘μ‹œλŠ” λ°±μ—”λ“œ μ„œλ²„ 그룹에 λŒ€ν•œ 단일 “곡개 μ–Όκ΅΄"이기 λ•Œλ¬Έμ— λ³€ν™”ν•˜λŠ” νŠΈλž˜ν”½ λΆ€ν•˜μ— 따라 μ„œλ²„λ₯Ό μΆ”κ°€ 및 μ œκ±°ν•  수 μžˆλ‹€.
  • λ ˆμ΄μ–΄ 7λΌμš°νŒ… : μ—­λ°©ν–₯ ν”„λ‘μ‹œλŠ” λͺ¨λ“  μ„œλ²„λ‘œ ν–₯ν•˜λŠ” νŠΈλž˜ν”½μ„ 보고 ν•„μš”μ— 따라 μš”μ²­κ³Ό 응닡을 μˆ˜μ •ν•˜μ—¬ 각 μš”μ²­μ„ 보낼 μœ„μΉ˜μ— λŒ€ν•œ 지λŠ₯적인 결정을 내릴 수 μžˆλ‹€. μš”μ²­μ˜ νŠΉμ • HTTP 헀더, URL의 일뢀, ν΄λΌμ΄μ–ΈνŠΈμ˜ 지리적 μœ„μΉ˜ 등에 따라 λΌμš°νŒ… 결정을 내릴 수 μžˆλ‹€.
  • 캐싱 : μ—­λ°©ν–₯ ν”„λ‘μ‹œλŠ” 캐싱을 μˆ˜ν–‰ν•˜κΈ°μ— 쒋은 μž₯μ†Œμ΄λ‹€. 일반적으둜 λͺ¨λ“  μš”μ²­μ„ λ°±μ—”λ“œ μ„œλ²„λ‘œ 보내고 각 λ°±μ—”λ“œ μ„œλ²„κ°€ 자체 μΊμ‹œλ₯Ό κ΅¬μΆ•ν•˜λ„λ‘ ν•˜λŠ” 것보닀 μ½˜ν…μΈ λ₯Ό κ°œμ‹œν•˜λŠ” 것이 훨씬 더 νš¨μœ¨μ μ΄λ‹€.
  • 기타 κΈ°λŠ₯ : μ—­λ°©ν–₯ ν”„λ‘μ‹œλŠ” λ°±μ—”λ“œ μ„œλ²„ μ•žμ— μ•‰μŒμœΌλ‘œμ¨ λŒ€μ—­ν­ λ˜λŠ” μš”μ²­ 속도에 λ”°λ₯Έ νŠΈλž˜ν”½ ν˜•μ„±, μ—°κ²° μ œν•œ, λ‹€μ–‘ν•œ 인증 μ²΄κ³„μ™€μ˜ 톡합, ν™œλ™ λͺ¨λ‹ˆν„°λ§ λ“±κ³Ό 같은 λ‹€λ₯Έ κΈ°λŠ₯도 μˆ˜ν–‰ν•  수 μžˆλ‹€.

🀷‍♂️ Nginx proxy_pass μ„€μ •?

react niginx λ°°ν¬ν•˜κΈ° μ°Έκ³  [AWS EC2] EC2에 React μ•± + Node.js μ„œλ²„ 배포 2 - Nginx + React (tistory.com)

 

[AWS EC2] EC2에 React μ•± + Node.js μ„œλ²„ 배포 2 - Nginx + React

이전 κΈ€μ—μ„œ EC2λ₯Ό μœ„ν•œ VPC ꡬ성 및 λ³΄μ•ˆ 그룹을 μƒμ„±ν–ˆκ³  EC2λ₯Ό μƒμ„±ν•˜μ—¬ SSH둜 μ ‘μ†ν•˜λŠ” 방법을 μ•Œμ•„λ³΄μ•˜λ‹€. 이번 κΈ€μ—μ„œλŠ” 이전에 μƒμ„±ν•œ EC2에 Nginxλ₯Ό μ„€μΉ˜ν•˜κ³  React둜 μƒμ„±ν•œ ν”„λ‘œμ νŠΈλ₯Ό λΉŒλ“œν•˜

developerbee.tistory.com

 

νŒŒμΌλ‘œμ΄λ™

sudo vi /etc/nginx/sites-available/파일.conf

 

nginx server μ…‹νŒ…

server {
  listen 80;
  location / {
    root   /home/user/myapp/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  
  location /api/ {
    proxy_pass http://[μ„œλ²„ url];
  }
}

proxy_passλ₯Ό μ„€μ •ν•΄μ£Όκ³  λ‚˜λ©΄, ν”„λ‘ νŠΈμ—μ„œ μ„œλ²„μ— 직접 μš”μ²­ν•˜λŠ” 것이 μ•„λ‹ˆλΌ, μš”μ²­μ„ μžκΈ°μžμ‹  url둜 보내면 proxyμ—μ„œ μš”μ²­μ„ λ°›μ•„μ„œ μ‹€μ œ μ„œλ²„μ— μš”μ²­μ„ 보내고 데이터λ₯Ό λ°›λŠ”λ‹€. 

 

예λ₯Ό λ“œλ©΄ axios.get(" μ„œλ²„url ")둜 μ„œλ²„μ— μš”μ²­μ„ 보낼것이닀. ν•˜μ§€λ§Œ ν”„λ‘μ‹œ μ„€μ • 후에 μ„œλ²„url λŒ€μ‹  ν΄λΌμ΄μ–ΈνŠΈ url둜 λ°”κΏ”μ£Όλ©΄ proxyκ°€ μ‹€μ œ μ„œλ²„μ— μš”μ²­ 데이터λ₯Ό λ³΄λ‚΄μ„œ ν΄λΌμ΄μ–ΈνŠΈμ— 응닡을 ν•΄μ€€λ‹€ λ³΄μ•ˆμ μΈ μΈ‘λ©΄μ—μ„œ μ•ˆμ „ν•˜λ‹€.