NGINX 이용해 내 PC를 웹서버로 만들기

https://cowhacker.tistory.com/87

// 공유기, 가상머신 포트포워딩 설정부터 ip 세팅까지 다 설명해줌 (감사합니다감사합니다)

https://phsun102.tistory.com/47

// 리버스 프록싱 설정

 

기본 개념

외부 Network에서 내 공유기의 공인(외부) ip로 접근

 

↓  ( 공유기 포트포워딩하여 내부 ip로 접근)

 

내 데스크탑

ipconfig /all

 

↓ ( Vmware에서 가상 게이트웨이 역할을 하는 VMnet8 [NAT] 를 이용해 포트포워딩, 우분투 가상머신 내부 ip로 접근  )

 

Ubuntu 22.04 Vmware 가상머신

ifconfig

Nginx 웹 서버 동작중

 

↓  ( 특정 포트에서 동작중인 nodejs application으로 리버스 프록시)

 

pm2 (node.js 프로세스 관리자)에 의해 실행중인 Node.js Application 접근

 

포트포워딩 필요한 이유

https://velog.io/@leesomyoung/%ED%8F%AC%ED%8A%B8%ED%8F%AC%EC%9B%8C%EB%94%A9%EC%9D%84-%ED%86%B5%ED%95%B4-%EC%99%B8%EB%B6%80%EC%97%90%EC%84%9C-phpinfo%EC%97%90-%EC%A0%91%EC%86%8D%ED%95%98%EA%B8%B0

- 같은 공유기에 연결된(랜선, 와이파이) 디바이스들은 동일한 외부(공인) IP 주소를 공유함

- 공유기와 그에 연결된 디바이스들을 식별하기 위해 사설 IP가 각각 부여됨

- 공유기에 연결된 특정 디바이스를 찾아가려면 외부 IP 주소로 접근 후 특정 디바이스의 사설 IP 주소로 접근하면 됨

- 포트포워딩: 공인 IP의 특정 포트로 들어온 요청을 정확한 기기의 사설 IP와 포트로 연결해주는 것

(공유기를 사용하지 않으면 포트포워딩이 필요없겠지)

 

Nginx 리버스 프록시

https://velog.io/@chickenfondue/nginx-docker-compose%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%9C -%EA%B5%AC%EC%84%B1

 - 클라이언트의 요청을 대신 받아 내부 서버로 전달해주는 것

- 내부 서버의 ip 및 포트 번호를 숨길 수 있고, 사용자의 요청을 분산(로드밸런싱)할 수 있다

 

nginx의 경우 /etc/nginx/sites-enabled/default 파일을 수정해 reverse proxy 기능을 수행한다

server {
    listen 80;

    location /my_ISOT/ {
        proxy_pass http://localhost:2001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

나는 위와 같이 세팅했다. socket.io 통신을 위해서 proxy_pass 뿐 아니라 다른 설정들도 지정해줘야 한다고 하더라

sudo service nginx stop
sudo service nginx start

혹은 

sudo service nginx restart

를 통해 nginx 서버를 재시작해주어야 한다

sudo systemctl status nginx

로 nginx 서버 상태 확인 가능하다

sudo systemctl enable nginx
sudo systemctl disable nginx

를 통해 서버 부팅 시 자동으로 시작하도록 세팅할 수도 있다

 

웹서버 구축 및 nodejs application 호스팅 시 발생한 이슈들

1. pm2 사용 방법

pm2 start server.js --name "my_ISOT"
pm2 list
pm2 logs my_ISOT
pm2 delete my_ISOT  # pm2 delete 0

 

pm2를 이용해 nodejs application을 실행할 수 있다. 에러 발생 시 로그 확인해 분석한다

나는 this.options = options ?? {};  이런 에러가 mongodb 라이브러리에서 발생했다.

pm2 show my_ISOT

를 통해 pm2 프로세스에 대한 정보를 확인한다.

사용하는 nodejs 버전이 낮아 발생한 문제로 18 lts 버전 다운받은 후, delete하고 다시 start 하면 해결

pm2 save
pm2 startup

하면 시스템 재부팅 시 자동으로 실행됨

 

2. node.js 애플리케이션 경로 문제

- server.js 에서 res.redirect() 할 때 nginx 리버스 프록시를 고려한 경로 입력

ex)  localhost:80/my_ISOT -> localhost:1234/  이므로 localhost:1234/login 가고 싶으면 res.redirect("/my_ISOT/login")

- 클라이언트에서 요청 보낼 때 nginx 리버스 프록시를 고려한 경로 입력

ex) 특정 url로 get/post 요청 보낼 때 $.get("./signup"),  $.post("./delete_memo")

ex) 정적 파일 가져올 때 /my_ISOT/public~~ 이렇게 src/href 경로 입력

 

3. websocket 문제

- 클라이언트 측 코드만 일부 수정해주면 된다

https://curryyou.tistory.com/352

- socket.io 모듈은 기본적으로 /socket.io를 default path로 하여 각종 통신을 수행한다

 

var socket = io();

클라이언트에서 이렇게 세팅하면 localhost:80/socket.io 로 통신하려 함. 근데 우리가 통신하려는 nodejs 서버 상에서 설정된 경로는 localhost:1234/socket.io 일 것.

// nginx 리버스 프록시 설정에서 /socket.io 엔드포인트에 대해서는 세팅 안했으므로 404 에러 뜸

var socket = io({
    path: '/my_ISOT/socket.io/'
});

 이렇게 바꿔주기만 하면 localhost:80/my_ISOT/socket.io/  ->  localhost:1234/socket.io/ 로 잘 통신이 되더라..

 

성공!