24.9.5. 개발일지 // virtual box에 배포하기 , nat, bridge, ufw방화벽, nginx

* virtual box에 배포하기

• 먼저 nat와 bridge의 차이를 알야아한다.
• nat방식을 쓰면, 외부 클라이언트는 반드시 host pc(내 pc) 를 통해서만 가상 우분투에 접속 가능하다.
• 따라서, 포트 포워딩이 필요하다.

nat 방식

브릿지

• 반면, 브릿지는 내pc와 동등한위치에서 직접 외부와 연결이 가능하다.
• 간단한 브릿지 방식을 사용하고자 한다.

 

* 내 환경확인

• 우분투에서 ifconfig 결과 => 1.200.x.x로 나오는걸로봐서, 나는 공유기방식이 아니고 직접 isp와 연결된것으로 추측.
• 즉, 3000번포트만 열어준후, 1.200.x.x:3000으로 접속하면 외부클라에서 내 우분투로 접속이 가능하다!
• + listen 수정도 필요한듯 하다.

//Node.js 애플리케이션이 모든 인터페이스에서 요청을 받을 수 있도록 설정합니다:
listen() {
    this.app.listen(this.port, '0.0.0.0',() => {
        console.log(`Todo app listening at http://localhost:${this.port}`);
        // console.log(`App listening on the port ${this.port}`);
    });
}

내폰의 lte에서 접속한모습

내 호스트pc (내 윈도우pc)에서 일부러 방화벽 허용삭제후에도 잘접속된다.

• 즉, 브릿지 방식이 호스트pc와 네트워크면에서는 완전히(?) 독립된 구성임을 다시한번 확인했다.

 

* 방화벽 열고닫기

 

* nginx : web server 구성

• nginx 설치

sudo apt-get install nginx

• nginx의 포트는 80번인듯하다 -> ufw allow 80 해줘야 들어가진다.

그냥 ip주소만 치면 기본값으로 80번 포트 입력됨을 추측!

아, 80번포트 -> nginx -> 내부포워딩으로 3000번 포트로 보내면 더 안전하겠군?

3000번 포트는 잠구는게 좋을듯!

443(https), 80(http)요청을 nginx에서 걸러준후 3000번 was로 보내는 구조!

설정파일로 이동

 

* nginx.conf 수정하기

• 문제 : vim 에서 수정하기는 너무빡세다.
• 해결 : 인텔리제이에서 원격으로 sftp로 연결후 수정하고자 함

우클릭 > change permission으로 수정 권한 줘야함

• nginx conf > http 맨 밑에 추가

server {
       listen 80;
       server_name 1.x.x.x;  # 또는 서버 IP 주소

       location / {
           proxy_pass http://127.0.0.1:3000;
           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;
       }
   }

1.x.x.x로 들어오는 요청을 127.0.0.1:3000으로 보냄!

시스템 시작시 nginx 자동실행

3000번 포트 잠근후 test

3000번 포트는 잠궈놨기때문에 들어갈수없다.

80번포트 (http 기본포트)로 접근시 nginx가 허락후 3000번 포트로 접근가능하다.

아키텍쳐

* 시스템 시작시 자동으로 nginx, nodejs 실행되도록 구현

virtualbox 딸깍후 기다리면 app 이 켜진다.

 

* todo 

•  
• 배포 자동화 구현
• https 설정
• nginx에서 간단한 정적파일은 직접제공
• db나 was 사망시 error page 제공 구현
• load balance 학습

 

* 레퍼런스

https://inpa.tistory.com/entry/VM-%F0%9F%92%BF-NAT-Bridge-Adapter-%EA%B0%9C%EB%85%90-%EB%B0%8F-%EC%84%A4%EC%A0%95

[Virtual Box] 💿 NAT / Bridge Adapter 개념 및 설정

https://www.youtube.com/watch?v=8IGgeaLlYW8

https://www.youtube.com/watch?v=6TYwnURF09w