[React] 포트번호 변경하는 방법

React 애플리케이션의 포트 번호 변경 및 외부 접속 설정

React 애플리케이션은 기본적으로 http://localhost:3000에서 실행됩니다. 포트를 80으로 변경하고 외부에서 접속할 수 있도록 하려면 몇 가지 설정을 해야 합니다. 아래에서 필요한 과정을 설명하겠습니다.

1. 포트 변경

포트를 80으로 변경하기 위해서는 두 가지 옵션이 있습니다.

1.1 package.json에 설정 추가

react-scripts를 사용 중인 경우, package.json 파일에서 다음과 같이 start 스크립트를 수정할 수 있습니다.

"scripts": {
  "start": "PORT=80 react-scripts start"
}

하지만, Windows 환경에서는 이 방법이 작동하지 않습니다. Windows에서는 cross-env라는 패키지를 사용해야 합니다.

npm install cross-env

그런 다음 package.json에서 start 스크립트를 다음과 같이 수정합니다.

"scripts": {
  "start": "cross-env PORT=80 react-scripts start"
}

1.2 환경 변수 설정

PORT 환경 변수를 직접 설정하는 방법도 있습니다. 이 방법은 운영체제에 따라 다릅니다.

• Linux / macOS:

  PORT=80 npm start

• Windows (PowerShell):

  $env:PORT=80; npm start

• Windows (CMD):

  set PORT=80 && npm start

2. 외부에서 접속 가능하도록 설정

기본적으로 create-react-app은 localhost에서만 애플리케이션을 실행합니다. 외부에서 접근할 수 있게 하려면 package.json에 다음 설정을 추가합니다.

"scripts": {
  "start": "HOST=0.0.0.0 PORT=80 react-scripts start"
}

이렇게 하면 0.0.0.0 인터페이스에서 애플리케이션을 실행하므로, 외부에서 접속할 수 있습니다.

3. 포트 80은 루트 권한이 필요

Linux와 macOS에서 포트 80과 같은 낮은 번호의 포트를 사용하려면 루트 권한이 필요합니다. 그러므로 포트 80에서 애플리케이션을 실행하려면 sudo 명령을 사용해야 합니다.

sudo PORT=80 npm start

4. 프로덕션 환경에서는 Nginx/Apache 사용 권장

개발 환경에서 포트를 80으로 바꾸는 것은 가능하지만, 프로덕션 환경에서는 Nginx나 Apache 같은 리버스 프록시 서버를 사용하여 포트 80에서 들어오는 요청을 React 애플리케이션으로 프록시하는 것이 일반적입니다.

이 경우, React 애플리케이션은 기본적으로 포트 3000 또는 다른 포트에서 실행되며, Nginx가 포트 80에서 요청을 받고 이를 React 애플리케이션으로 전달하게 됩니다.

4.1 Nginx 설정 예시

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000; # React 앱이 실행 중인 포트
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Nginx는 포트 80에서 요청을 받고, React 애플리케이션은 포트 3000에서 실행되며 Nginx가 프록시 역할을 합니다.

---

URL 접근

포트 번호를 변경한 후에는, 다른 클라이언트가 애플리케이션에 접근하기 위해 브라우저의 URL 창에 http://서버의-IP-주소:새-포트번호 형식을 사용해야 합니다.

예시:

http://223.194.135.40:5000

포트 번호가 80일 때는 HTTP 프로토콜의 기본 포트이기 때문에 URL에서 생략됩니다.

1. 서버의 IP 주소

서버가 인터넷에 연결되어 있고 공용 IP 주소를 가지고 있다면, 그 IP 주소를 사용해 접근할 수 있습니다.

예시:

• 서버의 IP 주소가 123.456.789.101이라면:

  http://123.456.789.101

포트를 80으로 설정했기 때문에 기본적으로 http://123.456.789.101로 접속하면 됩니다. 포트 80은 HTTP의 기본 포트이므로 따로 포트 번호를 입력할 필요가 없습니다.

2. 도메인 이름

만약 도메인 이름이 설정되어 있다면, 클라이언트는 그 도메인을 사용해 접속할 수 있습니다.

예시:

• 서버에 example.com이라는 도메인이 설정되어 있다면:

  http://example.com

마찬가지로, 포트 80에서 실행 중이므로 포트 번호를 따로 입력하지 않아도 됩니다.

3. 내부 네트워크에서의 접근 (로컬 네트워크)

만약 동일한 로컬 네트워크(예: 회사나 집의 Wi-Fi 네트워크)에 있는 다른 컴퓨터나 장치가 접근하려는 경우, 서버의 로컬 IP 주소를 사용해야 합니다.

예시:

• 로컬 네트워크에서 서버의 IP 주소가 192.168.1.100이라면:

  http://192.168.1.100

4. 서버 IP 주소 확인 방법

Windows에서 IP 주소 확인 방법:

1. 명령 프롬프트를 열고 ipconfig 명령을 입력합니다.
2. 네트워크 어댑터 정보 중 "IPv4 주소"에 해당하는 IP 주소를 찾습니다.

Linux/macOS에서 IP 주소 확인 방법:

1. 터미널에서 ifconfig 명령을 입력하거나, ip addr 명령을 사용해 IP 주소를 확인할 수 있습니다.

5. 포트 전달 (포트 포워딩)

만약 서버가 로컬 네트워크 내에 있고, 외부에서 접근할 수 있도록 하려면 포트 포워딩 설정을 해야 할 수 있습니다. 이는 주로 가정용 라우터에서 설정되며, 포트 80의 요청을 해당 서버로 전달하도록 라우터를 구성해야 합니다.

---

로컬 호스트(localhost)와 0.0.0.0 인터페이스의 차이

1. 로컬 호스트와 0.0.0.0의 주요 차이점

1.1 localhost (127.0.0.1)

• 본인 컴퓨터에서만 접근 가능.
• 다른 장치가 동일 네트워크에 있더라도, 해당 애플리케이션에 접속할 수 없음.
• 보안적인 이유로 개발 단계에서 주로 사용됨.

1.2 0.0.0.0

• 컴퓨터의 모든 네트워크 인터페이스에서 접속을 허용.
• 동일 네트워크에 있는 다른 장치나 외부 네트워크에서도 접속할 수 있음.
• 외부에서의 접근을 허용할 때 사용됨.

예시

• localhost:3000에서 실행: 본인 컴퓨터에서만 접근 가능. 다른 장치에서 접근 불가능.
• 0.0.0.0:3000에서 실행: 본인 컴퓨터뿐만 아니라 같은 네트워크에 연결된 다른 장치나, 공용 IP를 통해 인터넷을 통한 접속도 가능.

2. 왜 0.0.0.0을 사용하나요?

0.0.0.0으로 설정하면 외부의 네트워크 장치들도 해당 서버에 접속할 수 있기 때문에, 개발 중에 여러 장치에서 테스트를 하거나 네트워크 환경에서 접근을 허용할 때 유용합니다.

어떤 경우에 사용하는지 예시:

1. 로컬 네트워크에서 다른 장치로부터 애플리케이션 테스트

   • 예를 들어, React 애플리케이션을 localhost가 아닌 0.0.0.0에서 실행하면, 동일 네트워크에 있는 다른 컴퓨터나 스마트폰 등에서도 애플리케이션을 접속해볼 수 있습니다.

2. 서버에서 애플리케이션 실행

   • 프로덕션 환경에서 웹 애플리케이션을 서버에 배포한 후, 0.0.0.0에서 실행하면 해당 서버에 접속할 수 있는 다른 클라이언트들도 애플리케이션을 사용할 수 있게 됩니다. 이 경우 0.0.0.0을 사용해 외부 트래픽을 허용합니다.