이번 글은 네트워크 쪽을 다루려고 한다.

네트워크에 완전 전문가가 아니기에, 전문가가 보기에 적절치 못한 비유가 있을 수도 있지만 참고만 해주면 감사하겠습니다. (많은 태클은 언제나 환영입니다.)

기본적으로는 아래와 같은 플로우로 흘러가게 된다.

graph TD
    %% 노드 정의
    User([👤 User / Client])
    DNS["🌐 Domain (DNS)<br/>jay-gemini.com"]
    Router["🏠 Router (Public IP)<br/>1.234.56.78<br/>(Port Forwarding)"]

    %% Mini PC 내부 구조 (Subgraph)
    subgraph MiniPC ["🖥️ Mini PC (Private IP: 192.168.0.x)"]
        direction TB
        Nginx["🟩 Nginx (Reverse Proxy)<br/>SSL / 80 -> 443"]
        App["⚙️ Target Server<br/>Application (Port 3000)"]
    end

    %% 연결 흐름 정의
    User -->|Request| DNS
    DNS -->|Resolve IP| Router
    Router -->|Forwarding 80/443| Nginx
    Nginx -->|proxy_pass Localhost| App
    

사실 하나씩 생각해보면 상당히 쉽다.

1. 내 도메인을 인터넷에 쳤을 때, 어디로 가야할 지 모르니, DNS 서버에 무슨 IP와 연결되어있는지 찾는다.
2. 찾은 IP를 따라 들어가니, 집에 설치해놓은 공유기가 나온다.
3. 공유기는 이제 들어온 네트워크가 어디로 가야할지 모르니, 미리 설정해놓은 포트포워딩을 통해서 미니PC로 갈 수 있도록 설정을 해준다.
4. 이제 미니PC까지 들어온 네트워크가 Nginx라는 통로를 무조건 통하게 되는데, Nginx가 최종 어느 서버로 갈지를 결정한다. ex) jay-gemini.com으로 80포트로 들어왔으니, 이거는 프론트엔드 서버인 3000번 포트로 향하게 하자와 같이 설정해준다.
5. 그러면 최종적으로 jay-gemini.com 이라는 도메인으로 들어왔을 때, 내가 만들어놓은 프론트엔드를 볼 수 있게 되는 것이다.

---

실제로는 Nginx에서 SSL 인증서를 적용하고, jay-gemini.com으로 들어와도, 특정 URL 조건에서는 WordPress 인 8080 포트로 향하게 하는 등 조금 더 복잡하게 설정이 되어있지만, 본질은 동일하다.

우선 내가 산 가비아에서부터 설정들을 하나씩 살펴보고자 한다.

1. 가비아 도메인 구입 및 도메인 공인 IP 할당 설정

가비아에서 DNS 관리 페이지에 들어가면 아래와 같이 볼 수 있을 것이다.

구매한 도메인을 클릭 후, “DNS 설정”에 들어가면, 아래와 같이 볼 수 있을 것이다.

공인 IP 들은 모두 나의 공유기인 동일한 공인 IP를 바라보고 있다.

새로운 서비스 ex) english.jay-gemini.com 이라는 것을 만들어도, 공유기를 통해서 미니PC를 바라보게 해야하기 때문에 모두 같은 공인IP를 바라보게 되는 것이다.

jay-gemini.com 이라는 URL은 → 3000포트의 프론트엔드로 가게 하고,

english.jay-gemini.com 는 → 4000번 포트의 서버로 가게 하는 것은 Nginx의 담당이다.

---

2. 공유기 설정

지금까지 설정들이 완료되었다면 공유기에서 들어온 네트워크들을 미니PC로 접속할 수 있도록 포트포워딩을 해야한다.

KT를 기준으로는 http://homehub.kt.com:8899/login.asp 로 접속을 해서 로그인을 한다.

초기값은 아마 ktuser / homehub 이었던 것으로 기억한다.

오른쪽의 메뉴로 접속을 하고, (장치설정 > 트래픽 관리 > 포트 및 포워딩 설정)

아래 사진과 같이 적으면 된다.

내부 IP의 경우에는 Windows의 경우에는 ipconfig로 찾으면 되고,

Linux의 경우에는 로그인하면 아래와 같이 IP가 뜨는 것을 볼 수 있고, 혹은 hostname -I 를 통해서 찾을 수 있다.

---

3. Nginx 설정

마지막 설정인 Nginx 설정이다.

Nginx의 경우에는 미니PC로 들어온 네트워크를 어느 포트로 향하게 할지를 설정하는 단계이다.

SSL 인증을 적용하기 전의 Nginx 파일로 설명하고자 한다.

# Main frontend application
server {
    listen 80;
    server_name jay-gemini.com www.jay-gemini.com;

    location / {
        proxy_pass <http://localhost>:<프론트엔드 포트>;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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;
    }
}

# Backend Server
server {
		listen 80;
    listen <백엔드 포트>;
    server_name api.jay-gemini.com;

    location / {
        proxy_pass <http://localhost>:<백엔드 포트>;
        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;
    }
}

우선 2개의 예시를 적어두었다.

1. server가 두 개가 있는 것을 볼 수 있을 것이다.
   1. 들어온 네트워크이자, server_name 인 jay-gemini.com 과 api.jay-gemini.com 에 따라서 최종 목적지가 달라지게 된다.
2. jay-gemini.com 및 www.jay-gemini.com 의 경우
   1. http://localhost:<프론트엔드 포트> 로 향하게 된다.
   2. 만약 프론트엔드 서버를 3000 포트로 띄워두었다면 3000 포트로 향하게 된다.
3. api.jay-gemini.com 의 경우
   1. http://localhost:<백엔드 포트> 로 향하게 된다.
   2. 만약 백엔드 서버를 8080 포트로 띄워두었다면 8080 포트로 향하게 된다.

---

이것으로 기본적인 네트워크 설정은 마쳤다.

만약, 서비스를 계속 개발하게 되어서 새로운 서브 도메인을 사용해야한다면, 그에 맞추어 Nginx 설정을 통해 개발한 특정 서버를 바라보게 하면 된다.

다음 2탄에서는 WordPress 및 Vite 앱 통합에 대해서 적어보고자 한다.

Jenkins 자동배포까지 적어보려 했으나, Jenkins는 Optional 한 것이기도 하고, 별도의 블로그를 통해서 다루고자 한다.