Reverse proxy

리버스 프록시

One public entry point routes requests to internal services by path.

···
html
<div class="n-demo"><div class="n-head"><strong>PATH ROUTING MAP</strong><span>LIVE TRACE</span></div><div class="n-stage"><div class="rp"><div class="rp-left n-box">app.test</div><div id="rp-switch" class="rp-hub">PROXY</div><div class="rp-right"><div id="rp0" class="n-box">/api → API</div><div id="rp1" class="n-box">/media → FILES</div></div></div></div><div class="n-foot">tap to step · auto replay</div></div>
css
.n-demo{width:min(94vw,760px);height:min(88vh,324px);padding:clamp(9px,2.2vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.3vmin,10px);font:600 clamp(12px,2.4vmin,16px)/1.3 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;overflow:hidden}.n-head,.n-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.n-head strong{color:var(--accent)}.n-head span,.n-foot{font-size:12px}.n-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vmin,10px)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.n-box{padding:clamp(5px,1.5vmin,11px);border:1px solid var(--line);border-radius:8px;background:var(--bg);text-align:center}.n-on{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.n-muted{color:var(--muted)}@media(max-width:400px){.n-head span{display:none}}.rp{width:96%;display:flex;align-items:center;gap:5px}.rp-left{width:28%}.rp-hub{width:22%;padding:10px 1px;text-align:center;border:2px solid var(--accent);border-radius:50%;color:var(--accent)}.rp-right{width:46%;display:grid;gap:7px}.rp-right .n-box{padding:7px 3px;text-align:left}
js
let step=0;function advance(){for(let i=0;i<2;i++)document.getElementById('rp'+i).classList.toggle('n-on',i===step);document.getElementById('rp-switch').style.background=step?'color-mix(in srgb,var(--accent-2) 15%,var(--surface))':'color-mix(in srgb,var(--accent) 15%,var(--surface))';step=(step+1)%2}
const clickTarget=document.querySelector('.n-demo');if(clickTarget&&typeof advance==='function'){advance();const timer=setInterval(advance,1050);clickTarget.addEventListener('pointerdown',()=>{clearInterval(timer);advance()})}

A reverse proxy accepts client requests and forwards them to internal servers before returning responses. It can choose a target by path or host and handle TLS termination or shared policy.

The demo routes /api and /media under one origin to different services. Proxy availability and forwarded headers need care because all routes pass through it.

When to use

Use it to expose several services behind one origin or apply common TLS and routing policy.

Open as page ↗