> ## 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 App에서 네트워크 포트를 구성하고 관리하는 방법을 알아보세요.

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="computer" 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 ports are only visible on the computer that is hosting them." 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="External ports forward traffic to internal ports, which programs listen to." 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/). 추가로 열리는 내부 포트는 사용 가능한 다른 외부 포트에 바인딩됩니다(전체 목록은 아래 참조).

## Preview

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

<Frame>
  <img src="https://mintcdn.com/replit/AZ1L8RlIroSxuJDa/images/ports/webview_dropdown.png?fit=max&auto=format&n=AZ1L8RlIroSxuJDa&q=85&s=35f188e6a98287c45e1c5a4b811e9794" alt="Clicking the domain in the webview will let you choose what port to view." 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="The networking tool shows your port configuration." 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="Programs can change the ports they listen to." width="1641" height="870" data-path="images/ports/replit-wrong_port.png" />
</Frame>

각 프레임워크는 서로 다른 기본 포트에서 수신 대기합니다. 예를 들어 Flask는 5000, React는 3000, Laravel은 8000입니다. 올바른 포트가 구성되어 있는지 확인하세요!

## 환경 설정

Replit은 Replit App에서 열린 포트를 자동으로 사용 가능한 외부 포트에 바인딩하고 해당 바인딩을 .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
```
