[TIL] Ngrok 사용하여 로컬에서 서버 실행

오늘은 어제 만들었던 TODO List 프로젝트를
로컬환경에 띄우고 외부에서 접속할 수 있도록 하려한다.
AWS EC2같은 클라우딩 서비스에 배포를 하지 않아도
외부에서 접속이가능하니 프론트엔드쪽과 협업할때 매우 좋을 것 같다.

Ngrok 설치 및 사용

우리가 사용중인 네트워크 방화벽과 NAT를 손보면
외부IP에서 우리의 로컬환경에 접속이 가능하다. 하지만 그렇게 될 경우
보안적으로는 매우 위험할 것이고, 이러한 상황에 Ngrok라는 툴을 사용하면
상대적으로 안전하게 개발환경을 구축할 수 있다.

Ngrok은 네트워크 설정을 하지 않아도
방화벽을 넘어 외부에서 로컬 환경에 접근할 수 있게 해주는 터널링 프로그램이다.
무료 플랜의 경우 연결 세선이 2시간 가량 유지 된다고한다.

Ngrok 설치방법은 하이퍼링크를 참조하자.
Mac 유저인 경우는 homebrew로 설치도 가능하고
ZIP파일을 다운받아 사용도 가능하다.

ZIP파일을 다운 받으면 다운받은 경로에서
관리자 권한으로 unzip을 해주면 된다.

sudo unzip ~/Downloads/ngrok-v3-stable-darwin-amd64.zip -d /usr/local/bin

나와 같은 경우는 ~/Desktop/Download의 경로에 파일이 있었기에
앞에 경로만 변경해서 sudo unzip을 실행해주면 된다.

설치가 완료되고

ngrok -h

를 입력하면 옵션에 대한 설명이 나올 것이다.

그렇다면 정상적으로 설치가 완료된 것이다.

터미널에서

ngrok http 8080

을 입력해주게 되면 http://localhost:8080로 연결해주는

url을 하나 제공해준다. 해당 url로 협업하는 프론트엔드 측에
서버를 띄워주면 이것으로 임시적으로 테스트가 가능하다.

해당 세션은 2시간이고, 종료했다 다시 시작하면 2시간이 채워지니
한번씩 껏다키는 번거로움을 제외하고는 정말 좋은 프로그램인 것 같다.

http://127.0.0.1:4040/ 로 접속하게 된다면
현재 요청,응답에 대한 내용들이 보기 편하게 나오니 참고해보면 좋을 것 같다.

Tomcat 서버 띄우기

위에서 Ngrok를 사용해 외부에서 내 로컬서버로 터널링하는 것을 배웠다.
근데 만약 내가 개발중이라면 계속 스프링 부트 애플리케이션을 실행 시켜놓을 수는
없는 셈이다.. 그래서 톰캣 서버를 하나 띄워 임시 애플리케이션을 배포해두면
프론트엔드 측에서도 API 요청 체크가 가능하고, 백엔드 쪽에서도 개발을 진행할 수 있다.

톰캣 공식 사이트에서 tar.gz (pgp, sha512)를 다운받으면 된다.
(나는 MacOS를 사용하므로 위에 파일을 받은 것이다)

bin폴더에 스크립트 파일을 이용해 톰캣서버를 실행시킬 수 있다.

./startup.sh

종료시에는 아래 스크립트를 실행시키면 된다.

./shutdown.sh

톰캣서버가 실행되면 기본 포트는 localhost:8080으로 접속이 가능하다.

톰캣서버의 설정을 변경하는 경로는 아래와 같다.

conf > server.xml

해당 xml파일을 열어 포트번호를 변경한다든가… 혹은
내가 빌드한 .war파일의 경로를 설정한다든가 할 수 있다.

우선 포트번호를 변경하는 방법이다.
아래와 같이 Connector 태그로 기존에 코드가 작성되어있다.

<Connector port="8090" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />

변경하고자하는 포트로 변경. (8080->8090)
이제 localhost:8090으로 서버를 띄울 수 있다.

그리고 webapps 폴더에 내가만든
애플리케이션을 놓고 해당 애플리케이션을 실행 시키고 싶을 경우
기존에 작성되어있는 Host태그를 찾아서 코드를 추가해야한다.

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
            <!-- webapps 내 War파일 실행 -->
            <Context path="/" docBase="todolist-0.0.1-SNAPSHOT"  reloadable="false" > </Context>

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />

      </Host>

이라고 적힌 아래의
Context태그의 내용을 추가해주면 된다.
여기서 docBase의 이름은 내가 빌드한 .war파일의 이름이다.

마지막으로 정리해보자면

내가 만든 어플리케이션을 빌드
빌드한 파일을 톰켓 서버하나를 만들어 배포 (localhost:8090)
Ngrok을 이용해 로컬과 터널링하여 연결
프론트엔드쪽에서 API 요청 테스트가 가능

오늘은 이렇게 만든 애플리케이션을
프론트엔드에서 사용할 수 있게 터널링을 해주는 방법을 배웠다.
docker를 이용해 사용을 해줄 수도있을 것 같다는 생각이든다.

오늘 공부는 여기서 끝!

오늘의 커피량: ☕️
오늘의 점심: 라면, 밥