> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 포트

> Replit 앱에서 네트워크 포트를 구성하고 관리하는 방법을 알아보세요.

Replit은 프로젝트를 클라우드 환경에서 실행하기 때문에 로컬 컴퓨터와는 포트가 다르게 동작합니다. (TCP 포트가 무엇인지 더 기본적인 설명이 필요하다면 [여기부터 시작하세요](https://www.reddit.com/r/explainlikeimfive/comments/1t9s5a/eli5_what_are_ports_ex_tcp_port/).)

컴퓨터에서는 포트 관리 계층이 하나뿐입니다. 즉, 프로그램이 리스닝할 포트를 정의하면, 인터넷에서 컴퓨터의 해당 포트로 들어온 트래픽이 적절한 프로세스로 라우팅됩니다.

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/computer.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=6e8edcd0ec3e450bdef6c32289d36dcc" alt="컴퓨터" width="1323" height="786" data-path="images/ports/computer.png" />
</Frame>

`0.0.0.0` 부분은 주소, 즉 호스트입니다. 프로세스가 `0.0.0.0`을 리스닝한다는 것은 모든 네트워크 인터페이스에서 리스닝한다는 의미입니다. 즉, 다른 컴퓨터(인터넷상의)가 여러분 컴퓨터의 IP 주소로 요청을 보내면 그 요청을 볼 수 있습니다. 따라서 0.0.0.0을 리스닝한다는 것은 (컴퓨터가 인터넷에 연결되어 있다면) 해당 프로세스가 퍼블릭 인터넷에서 접근 가능하다는 의미입니다.

대부분의 프로그래밍 프레임워크는 개발 중일 때 `0.0.0.0`을 리스닝하지 *않습니다*. 개인 정보 보호와 보안을 위해 작업 중인 내용을 반드시 외부에 노출시키고 싶지는 않기 때문입니다. 대신, `127.0.0.1`이라는 다른 주소, 흔히 `localhost`라고 불리는 주소를 리스닝합니다. 이는 같은 컴퓨터에서만 해당 포트에 요청을 보낼 수 있다는 의미입니다.

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/computer-localhost.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=96a818c90fd879a814a647e18b506f7c" alt="localhost 포트는 이를 호스팅하는 컴퓨터에서만 볼 수 있습니다." width="1467" height="786" data-path="images/ports/computer-localhost.png" />
</Frame>

Replit에서는 실행 중인 프로세스가 웹뷰나 외부 요청을 통해 접근 가능하려면 **외부 포트**가 정의되어 있어야 합니다. 이는 프로세스가 일반적으로 사용하는 "내부 포트"가 Replit이 제공하는 샌드박스 클라우드 환경 내부에서만 보이기 때문입니다. 프로그램에 올바른 트래픽을 전달하려면 해당 내부 포트를 외부에서 접근 가능한 포트에 연결해야 합니다. 프로세스가 일반적으로 퍼블릭에 공개되는 0.0.0.0 같은 포트를 리스닝하더라도, 여전히 외부 포트에 바인딩되어야 합니다.

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/replit.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=9162e125c12faa1b6f896cc394957a85" alt="외부 포트는 프로그램이 리스닝하는 내부 포트로 트래픽을 전달합니다." width="1641" height="870" data-path="images/ports/replit.png" />
</Frame>

Replit은 외부 포트를 특정 내부 포트에 바인딩하는 방식으로 이를 처리합니다. 예를 들어 위 다이어그램에서 외부 포트 `:80`은 내부 포트 `:3000`에 바인딩되어 있습니다. 즉, 해당 Replit App이 포트 80으로 받는 모든 트래픽은 내부 포트 3000으로 전달됩니다.

이 구성은 .replit 구성 파일의 \[\[ports]] 섹션에 기록됩니다.

기본적으로 Replit은 처음 열린 포트를 기본 외부 포트 80에 바인딩하여, 해당 프로세스를 포트 주소 없이 도메인에서 사용할 수 있도록 합니다(예: customdomain.com:3000/ 대신 customdomain.com/). 이후에 열리는 추가 내부 포트는 다른 사용 가능한 외부 포트에 바인딩됩니다(전체 목록은 아래를 참조하세요).

## 프리뷰

**프리뷰** 도구에서는 도메인을 클릭하고 다른 포트를 선택하여 웹뷰가 렌더링하는 외부 포트를 변경할 수 있습니다. "설정" 아이콘에서 네트워킹 도구를 열어 더 자세한 정보를 확인할 수도 있습니다.

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/webview_dropdown.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=35f188e6a98287c45e1c5a4b811e9794" alt="웹뷰에서 도메인을 클릭하면 볼 포트를 선택할 수 있습니다." width="862" height="534" data-path="images/ports/webview_dropdown.png" />
</Frame>

## 기본 포트

포트 :80은 http 트래픽의 "기본 포트"이므로, 루트 도메인으로 전송된 http 트래픽은 자동으로 포트 80으로 라우팅됩니다. 이런 이유로 포트 80에서는 URL에 포트 경로가 표시되지 않습니다. :`80` 이외의 포트는 도메인 경로에 표시됩니다(예: customdomain.com:4200/). (Replit은 기본적으로 TLS를 제공하므로 실제로는 https의 기본 포트인 443을 통해 전송됩니다. 실질적으로는 두 포트를 서로 바꿔서 사용할 수 있다고 생각해도 됩니다.)

## 네트워킹 도구

포트 구성과 네트워킹에 대한 자세한 내용을 확인하려면 네트워킹 도구를 열 수 있습니다. 이 도구는 Replit App에서 열려 있는 포트의 상태, 각 포트가 바인딩된 외부 포트, 그리고 구성을 추가하거나 제거할 수 있는 기능을 보여줍니다.

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/networking_tool.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=61b24a896e5dc920ed70f3603228d33f" alt="네트워킹 도구는 포트 구성을 보여줍니다." width="1412" height="558" data-path="images/ports/networking_tool.png" />
</Frame>

## 게시

Autoscale 및 Reserved VM 배포는 하나의 외부 포트만 노출하는 것을 지원하며, 해당 내부 포트가 `localhost`를 사용하지 않아야 합니다. 포트를 여러 개 노출하거나 localhost에서 단일 포트를 노출하면 게시한 앱이 실패합니다. Autoscale 배포가 예상대로 동작하도록 하는 쉬운 방법은 인터넷에서 접근하려는 서비스의 포트를 제외한 모든 `externalPort` 항목을 구성에서 제거하는 것입니다.

## 디버깅

예상대로 동작하지 않는 흔한 원인 중 하나는 포트 구성은 올바른 것처럼 보이지만 실제로 프로그램이 다른 포트를 보고 있는 경우입니다. 예를 들어 구성이 다음과 같다면:

```
[[ports]]
internalPort = 3000
externalPort = 80
```

포트 80으로 들어오는 인터넷 트래픽은 내부 포트 3000으로 전달됩니다. 그러나 프로그램이 실제로 포트 3000이 아니라 다른 포트(예: 8080)를 리스닝하고 있다면, 트래픽이 전혀 통과하지 않는 것처럼 보입니다. 이는 코드에서 포트를 변경하면서 구성의 해당 포트를 함께 변경하지 않았거나, 한 프로젝트의 구성을 다른 프로젝트에 복사-붙여넣기 했을 때 발생할 수 있습니다.

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/replit-wrong_port.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=42510d0331118fcf4a5cba7c812d09ee" alt="프로그램은 리스닝하는 포트를 변경할 수 있습니다." width="1641" height="870" data-path="images/ports/replit-wrong_port.png" />
</Frame>

프레임워크마다 기본으로 리스닝하는 포트가 다릅니다. 예를 들어 Flask는 5000, React는 3000, Laravel은 8000입니다. 올바른 포트가 구성되어 있는지 확인하세요!

## 환경설정

Replit App에서 포트가 열리면 Replit이 자동으로 사용 가능한 외부 포트에 바인딩하고, 그 바인딩을 .replit 구성 파일에 기록합니다.

하지만 localhost에서 열리는 내부 포트에서는 기본적으로 이런 동작이 일어나지 않습니다. localhost에서 실행되는 서비스는 일반적으로 프로세스를 실행 중인 동일한 컴퓨터에서만 접근 가능하다고 가정하기 때문입니다(localhost 포트는 해당 프로세스를 실행 중인 컴퓨터에서만 볼 수 있습니다). 즉, 이러한 서비스는 퍼블릭 인터넷에 공개될 것을 가정하고 만들어진 서비스보다 보안 수준이 낮은 경우가 많습니다.

노출하고 싶은 포트에 대해 `exposeLocalhost` 구성 옵션을 `true`로 설정하면 언제든 이 동작을 재정의할 수 있습니다.

localhost 포트를 기본적으로 *항상* 노출하고 싶다면 사용자 설정 도구에서 "자동 포트 포워딩" 설정을 "모든 포트"로 설정할 수 있습니다.

열려 있는 포트에 대한 구성을 *절대* 자동으로 만들지 않고, Replit App의 모든 포트 구성을 직접 관리하고 싶다면 이를 "안 함"으로 설정할 수 있습니다.

## 지원되는 포트

Replit App은 첫 포트가 열릴 때 기본적으로 포트 80을 외부 포트로 정의합니다. Replit App은 추가 외부 포트로 3000, 3001, 3002, 3003, 4200, 5000, 5173, 6000, 6800, 8000, 8008, 8080, 8081을 노출할 수 있습니다.

포트 22와 8283은 내부적으로 사용되므로 포워딩할 수 없습니다.

## `[[ports]]` .replit 구성

타입: `{localPort, externalPort, exposeLocalhost}`

`[[ports]]` 구성을 사용하면 웹 출력에 노출할 HTTP 포트를 설정할 수 있습니다. 기본적으로 호스트가 0.0.0.0인 노출된 모든 HTTP 포트는 Replit App의 웹 출력으로 노출됩니다.

기본 포트를 재정의하지 않고 추가 포트를 서비스하려면 .replit 파일에 새로운 \[\[ports]] 항목을 추가하세요. localPort와 externalPort 항목을 모두 지정해야 합니다. 아래에 정의된 대로 .replit 파일에 여러 개의 \[\[ports]] 항목을 추가하여 여러 개의 추가 포트를 추가할 수 있습니다.

### localPort

Replit이 어떤 포트를 외부 포트에 바인딩할지를 결정합니다.

### externalPort

해당 로컬 포트를 위해 퍼블릭에 접근 가능한 포트로 노출할 포트를 결정합니다.

```toml theme={null}
[[ports]]
localPort = 3000
externalPort = 80
```

특정 포트를 *절대* 노출하고 싶지 않다면 `localPort` 구성은 유지하고 `externalPort`는 추가하지 않으면 됩니다.

```toml theme={null}
[[ports]]
localPort = 3000
```

### exposeLocalhost

`localhost`를 사용하는 내부 포트를 외부 포트에 바인딩할 수 있는지를 결정합니다. `true`, `false`, 또는 null이 가능합니다.

```toml theme={null}
[[ports]]
localPort = 3000
externalPort = 80
exposeLocalhost = true
```
