팀프로젝트 서버 설정

https://github.com/miny-genie/MS-DT-SCHOOL-3rd-project-DrawBridge?tab=readme-ov-file

GitHub - miny-genie/MS-DT-SCHOOL-3rd-project-DrawBridge: Microsoft Data School 3차 프로젝트, Drawbridge 깃허브입니다.

Microsoft Data School 1기 최종 프로젝트가 끝이 났다.

감사하게도 1등을 할 수 있었고, 운영국에서 인상 깊게 봐주셔서 좋은 제의를 주셨다.

바로 해당 프로젝트를 일부 보완해서, 페르소나로 설정한 점핏 사이트에 제안서를 내보는 것이 어떻냐는 것이다.

그리하여 localhost:3000이나 cloudflare를 활용한 임시 DNS로 접속하는 게 아니라, 고정 DNS가 필요하다고 판단했다.

이건 내가 서버를 설정하기까지의 이야기다.

 

고정 도메인으로 사람을 불러들이기 위해서는 당연하게도 도메인이 필요하다.

가비아, 호스팅케이알, 닷네임 등의 국내 사이트와 네임칩, 고대디, 포크번 등의 해외 사이트가 있다.

가격은 전체적으로 해외 사이트가 싸고, xyz, fit, chat, is처럼 잘 안 쓰는 도메인들도 많다.

잘 쓰지 않는다는 건 싸다는 뜻이기에 해외 사이트를 찾아보았고, 그중 가장 가격이 싼 네임칩에서 도메인을 구매했다.

 

팀명이자 서비스명인 drawbridge로 검색해보니 별 도메인이 다 나온다.

그중 fit이라는 도메인은 처음으로 보는 단어지만, 프로젝트 취지(핏한 정보를 제공)와는 딱 맞는다.

이벤트로 1년 이용 가격이 $3, 한화로 약 4,500원정도이기에 해당 도메인으로 골랐다.

(참고로 위에서 Add to cart가 아니라 Make offer인 이유는 이미 구매했기 때문이다.)

 

How to set up DNS records for your domain in a Cloudflare account - Hosting - Namecheap.com

도메인을 구매한 다음 cloudflare를 통해 서버를 연결하는 방법이다.

밑에서 설명하는 cloudflare와 namecheap 연결 방법은 위 링크에서 상세히 볼 수 있다.

 

도메인을 구매한 다음 본인 account의 Dashboard로 들어가서 Domain List를 확인한다.

여기서 본인이 구매한 도메인 목록 중에 연결한 도메인의 Manage로 들어간다.

 

구매한 도메인에서 NAMESERVERS 탭에서 Custom DNS로 바꿔준다.

그럼 이미 2개에 도메인이 존재할 텐데, 해당 값을 Cloudflare 값으로 바꿔줘야 한다.

 

Cloudflare에 로그인하여 우상단의 Connect a domain으로 들어간다.

그리고 본인이 구매한 도메인 주소를 입력하고 간단한 설정 입력을 해준다.

 

그렇게 도메인 등록을 하고 빠르면 10분 늦어도 2~3시간 안에, 도메인 사용이 가능해진다.

사용 등록이 끝나면 메일로 안내가 날아오고, cloudflare 본인의 도메인 Overview에 위와 같이 화면이 뜬다.

 

좌측 탭에서 DNS > Records로 들어가 가장 아래에 있는 Cloudflare Nameservers를

아까 위에서 언급했던 namecheap의 NAMESERVERS에 넣어주면, namecheap과 cloudflare 연동은 끝이 난다.

 

그 다음 구매한 도메인이 내 컴퓨터로 들어올 수 있게 추가해줘야 한다.

Add record 버튼을 눌러 2개의 값을 추가해야 한다.

하나는 Type(A), Name(@), IPv4 Address(내 외부 IP)에 해당하고

다른 하나는 Type(A), Name(내가 구매한 도메인), IPv4 Address(내 외부 IP)에 해당한다.

이 과정을 거치지 않으면 도메인에 접속해도 내 컴퓨터로 들어올 수 없다.

 

내 컴퓨터의 외부 IP 주소는 네이버에서 쉽게 알 수 있다.

이제 내 컴퓨터로 들어오는 길을 명시했으니, 문을 열어줄 차례다.

즉 포트포워딩을 해야 한다.

 

현재 상황은 게이트웨이를 거치고 LG 공유기를 거쳐서, 집안 기기들에 내부 IP를 할당해서 사용하고 있다.

핸드폰은 와이파이로 공유기에 물려서 사용하지만, 데스크탑 같은 경우는 게이트웨이에 직접 물려서 사용하고 있다.

최종 목적 PC가 내 데스크탑이기에 게이트웨이 포트포워딩을 하면 되지만, 사람마다 다르니 잘 확인하고 포트포워딩하자.

 

참고로 iptime 공유기를 사용한다면 192.168.0.1 주소로, LG 공유기라면 192.168.219.1로 들어가면 된다.

다른 통신사와 공유기 모델들의 공유기 관리자 URL과 포트포워딩은 모른다. 쉬우니 포트포워딩 정도는 알아서 하자.

 

여담이지만 게이트웨이를 추가한지 얼마 안 됐는데, 추가하기 전에는 PC를 무선랜카드로 공유기에 물려서 사용하고 있었다.

심지어 공유기도 통신사 기본 제공 공유기도 아니라 더 나은 성능의 iptime 공유기를 구매해서 사용하고 있었다.

그러다보니 습관적으로 LG 공유기 설정에 들어가서 NAT로 모드를 바꾸고보니 PC로 접속이 안 되는 기현상이 일어났다.

생각해보니 게이트웨이에 랜선으로 직접 연결해서, 무선으로 공유기에 안 들어가지고 암튼 좀 이상해졌다.

핵심은 본인의 상황과 목적 PC 환경을 잘 알고 포트포워딩하자는 거다.

 

돌아와서 본인 컴퓨터로 들어오는 라우터에 NAT 설정을 해주자.

포트는 80(HTTP)와 HTTPS(443) 2개만 하면 된다.

 

상세 화면은 위와 같다.

들어오는 포트는 80~80, 그리고 443~443으로 하고 내부 포트는 서비스 포트와 동일하게 설정한다.

그리고 해당 포트로 들어올 때, 어느 내부 IP 주소로 이어줄지를 적어야 한다.

 

들여보낼 컴퓨터에서 cmd > ipconfig로 내부 IPv4 주소를 확인해서 넣어주자.

 

라우터에서 포트포워딩 설정을 마무리한다.

 

netstat -ano | findstr ":80 "
netstat -ano | findstr ":443 "

이후 powershell이나 cmd에서 두 명령어를 통해 80과 443 포트가 LISTENING 상태인지 확인한다.

 

GitHub - ZoeyVid/NPMplus: improved fork of nginx-proxy-manager

이제 마지막 단계다.

Namecheap에서 도메인을 등록(구매)했고, Cloudflare를 통해서 구매한 도메인(drawbridge.fit)을 외부 IP로 연결했고,

외부 IP 중 80 혹은 443 포트로 들어온다면, 내 컴퓨터의 포트로 들어오게 연결했다.

그럼 내 컴퓨터의 80 혹은 443 포트로 들어온다면, 이제 실행 중인 웹을 보여줘야 한다.

이렇게 이어주는 것을 리버스 프록시(reverse proxy)라고 한다.

 

프록시(Proxy), 리다이렉션(Redirection) 등의 설정을 GUI 기반으로 쉽게 할 수 있는 Github 자료가 있다.

NPMPlus라고 Nginx Proxy Manager의 역할을 쉽게 할 수 있다.

이를 소개해준 수강생 박우재님께 감사드린다.

 

흐름을 정리하면 아래와 같다.

1. 사용자가 도메인(https://drawbridge.fit)에 접속

2. Cloudflare DNS가 외부IP를 알려줌

3. 패킷이 게이트웨이/공유기 포트포워딩 통해 내 PC의 80/443 → NPMplus로 전달

4. NPMplus가 192.168.219.xx:3000(Next.js 서버)로 프록시

5. React/Next.js 페이지 보여짐

 

NPMPlus는 docker 기반으로 동작하는 linux 기반 코드다.

즉 docker를 설치하고 compose.yaml 파일을 다운받아 내게 맞는 설정으로 바꿔준다.

그리고 docker compose up -d 명령어로 docker에서 실행하면 된다.

 

Github 설명서에도 나와있지만 우선 크게 2개를 설정해야 한다.

TZ(timezone)을 본인이 속한 나라의 TZ로 설정하고, 추후 인증서 완료나 변경 고지를 받은 이메일을 적어준다.

 

직접 돌려보니 이외에도 2개를 더 손봐야 한다. 하나는 volumes고 다른 하나는 ports다.

docker에 올리면 data 폴더가 필요한데 이게 주석처리 되어 data 폴더가 생기지 않았다.

그래서 volumes:를 추가하여 "이전 경로 : /data"를 추가해줘야 한다.

그리고 NPMPlus를 실행하기 위해서는 81번 포트가 필요하고, 외부에서 접속하기 위해서는 80과 443 포트가 필요하다.

그렇기에 하단에 ports:를 추가하여 포트들을 명시해줘야 한다.

 

services:
  npmplus:
    container_name: npmplus
    image: docker.io/zoeyvid/npmplus:latest # or ghcr.io/zoeyvid/npmplus:latest
    restart: always
    volumes:
      - "./data:/data"
    environment:
      - "TZ=Asia/Seoul"
      - "ACME_EMAIL=<YOUR_EMAIL>"
    ports:
        - "81:81"                # Admin UI
        - "80:80"                # (옵션) HTTP
        - "443:443"              # (옵션) HTTPS
        - "443:443/udp"          # (옵션) HTTP/3

필요한 부분만 정리하자면 compose.yaml 파일 코드는 위처럼 된다.

 

yaml 파일을 "./data : /data"로 설정해뒀기 때문에 compose.yaml이 있는 같은 위치에 빈 data 폴더를 하나 만들어둔다.

그게 아니라면 앞의 "./data"를 바꾸고 본인이 편할대로 설정해도 되고,

docker의 기본 경로에 data 폴더가 이미 있거나 만들었다면 /opt 경로를 사용해도 무방하다.

 

docker desktop에서 docker compose up -d를 통해 컨테이너를 실행하면 된다.

docker에서 별다른 에러 사항이 없거나, 에러를 해결하고 난 다음에 localhost:81으로 접속하면 된다.

초기 81번 사이트의 아이디는 admin@example.org고 비밀번호는 로그에 찍혀나온다.

 

docker-compose up -d && docker logs <컨테이너이름> | findstr password

docker Terminal에서 findstr(윈도우 기준) 명령어로 패스워드를 찾아야만 로그인 할 수 있다.

 

로그인해서 초기 아이디와 비밀번호까지 설정을 마치고 나면 위와 같은 화면을 볼 수 있다.

여기서 가장 왼쪽의 메뉴에서 proxy를 설정한다.

 

Add Proxy Host를 하여 본인의 리버스 프록시 설정을 하나 추가한다.

좌측의 메뉴에서 Domain/IP + optional path에는 내 컴퓨터의 내부 IPv4 주소를 적어준다.

Port에는 현재 3000이 들어가있는데, react + next.js 기반의 웹이기 때문에 3000으로 포트를 적어주었다.

만약 다른 쪽으로 이어주고 싶다면 거기에 맞게 포트 번호를 적어줘야 한다.

 └ Vue.js(8080), Vite(5173), Flask(5000), FastAPI(8000), Django(8000), PostgreSQL(5432), MongoDB(27017) 등

그래야 내가 구매한 도메인으로 들어오면, 내가 실행 중인 localhost:port_number로 매핑된다.

 

추가하고 STATUS가 Online이라면 성공이고, 아니라면 실패다.

포트가 열려있는지, 인증서 설정은 제대로 했는지, scheme가 http는 맞는지, 포트 번호를 맞게 썼는지 확인해보자.

 

이제 내가 구매한 도메인으로 접속해보자. NPMPlus의 기본 성공 화면이 뜰 것이다.

웹을 열어서 페이지를 보여주면 끝이다.

 

react + next.js에서 실행하는 환경 코드인 package.json에서 start를 변경한다.

127.0.0.1이 아니라 모든 host가 들어올 수 있게 0.0.0.0으로 잡고 start 할 수 있게끔 한다.

개발 환경을 테스트할 거라면 npm run dev를, 실제 서비스를 한다면 npm run start로 웹을 가동한다.

 

드디어 누구나 접속할 수 있는 고정 도메인의 웹 페이지를 여는데 성공했다.