[서버] 로컬 서버에 외부 접속하기

 

내가 개발한 서비스 사용해보기!

 

얼추 개발된 사이드 프로젝트를 모바일(안드로이드) 기기에서 테스트 해보려고 apk를 설치해서 실행을 해보았다. 당연히 api 요청이 안되었다. 나는 프론트엔드를 개발하면서 Docker를 사용해서 로컬 서버를 열어서 api 요청을 해왔다. (아직 api 서버가 없는것같다..) 개발 후 테스트는 당연히 에뮬레이터를 사용해왔고 그래서 외부에서 접속한적은 한번도 없었다. 터치 반응도 보고 반응형 UI도 체크해보고 무엇보다 같이 사이드 프로젝트를 진행중인 팀원분들에게 내가 한 것들을 보여주고 피드백을 받고 싶었다. 

 

내가 해본 방법은 총 3개 이다. 

 

1. Web으로 배포

2. ngrok 사용

3. adb

 

 

1. Web으로 배포하기 

flutter는 크로스 플랫폼 앱으로 안드로이드 & ios 등의 앱개발 뿐만아니라 웹 개발도 용이하다. 

앱 개발 디렉토리에 차례로 아래의 명령어를 입력해주면 된다.

$flutter create flutter_web
$cd flutter_web #웹 배포를 하고 난 후는 이렇게 바꿔야함 $flutter build web --base-href "/web/"
$flutter run -d chrome

그러면 build 폴더에 web이 생기고 그 파일만 있으면 github를 통해서 배포를 할 수가 있다.

 

github로 웹 배포하기를 간단히 설명을 하면

 

1. 새로운 레포를 생성

2. settigns > pages 클릭

3. Branch 에서 브랜치를 main , /(root) 로 지정후 save

 

이게 끝이다. 배포된 사이트로 들어가면 내가 개발한게 모바일 버전이 아니라 웹페이지 형태로 띄워지는걸 볼 수 있다. 

.

.

.

끝난줄 알았지?

 

 

 

다 끝난줄 알았는데.. 문제가 있었다. 

 

말로만 듣던 CORS 에러다. 웹에서 요청하는거라 사실 제일 쉬울줄 알았다. 그냥 로컬 서버를 사용하면 되는것이니까.

그런데 (쪼랩인 나에게는) 악명높은 거대한 보스 빌런을 만나버린 것이었다.

여견상 백엔드 쪽에서 해결하기는 어려울것 같아서 nginx 를 사용해서 프록시 서버를 구축하여 요청을 우회하려고 했다. 네트워크쪽은 기본 지식이 아예 없어서 너무 어려웠다. 반나절에서 하루동안 끙끙대다가 일단은 우선순위가 아니기도 하고 웹배포는 내 쪽이 아니기도 하고, 좀더 공부를 하고 접근을 하는게 나을것 같아서 포기했다.. (아예 포기한건 아니고 꼭 해결해서 cors 정책을 따로 정리해서 올릴것이다.)

일단은 임시방편으로 아래의 명령어를 입력하여 웹 보안을 비활성화 한 후 새로운 크롬창을 켜서 진행을 하였다. 단 보안을 푸는 것이기 때문에 개발이나 디버깅 , 테스트의 목적으로만 사용해야 한다. 아래는 GPT에게 물어본 명령어 정리 글이다. 

$open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

 

• open -na Google\ Chrome --args:
  • open: macOS의 명령어로, 애플리케이션을 실행할 때 사용됩니다.
  • -na: -n은 이미 실행 중인 애플리케이션이 있어도 새로운 인스턴스를 열도록 합니다. -a는 애플리케이션 이름을 지정합니다. 여기서는 Google Chrome을 지정합니다.
  • --args: open 명령어 뒤에 오는 모든 것을 Google Chrome에 인수로 전달합니다.
• --user-data-dir=/tmp/temporary-chrome-profile-dir:
  • 이 옵션은 Chrome이 사용자 데이터를 저장할 디렉토리를 지정합니다. /tmp/temporary-chrome-profile-dir 디렉토리를 사용하여 임시 프로필을 생성합니다. 이를 통해 기존 브라우저 설정에 영향을 주지 않고 새로운 환경에서 브라우저를 실행할 수 있습니다.
• --disable-web-security:
  • 이 옵션은 웹 보안을 비활성화합니다. 주로 CORS(Cross-Origin Resource Sharing) 정책과 같은 보안 기능을 비활성화하여 개발자가 다른 출처에서 리소스를 쉽게 요청하고 테스트할 수 있도록 합니다. 이 옵션은 개발 및 디버깅 목적으로만 사용해야 하며, 보안에 심각한 위험을 초래할 수 있으므로 실제 사용 환경에서는 절대 사용하지 말아야 합니다.
• --disable-site-isolation-trials:
  • 이 옵션은 사이트 격리 시험 기능을 비활성화합니다. 사이트 격리는 각 사이트가 별도의 프로세스에서 실행되도록 하여 보안을 강화하는 기능입니다. 이 옵션을 사용하면 개발 중에 여러 사이트 간의 상호작용을 쉽게 테스트할 수 있지만, 보안상 취약해질 수 있습니다.

 

아무튼 성공..!

 

 

 

2. ngrok 사용

 ngrok란 ?

로컬 호스트를 퍼블릭 인터넷에 공개하는 터널링 도구이다. 포트포워딩을 직접하지 않아도 되는 아주 간편한 툴이다. 

 

사용방법

ngrok 설치 및 세팅 후 cmd 창에

$ngrok http [포트]   #로컬서버의 포트 번호를 입력 (ex. ngrok http 8080)

 

이 명령어를 입력을 해주면 끝이다.

그러면 아래와 같이 뜨는데 

빨간색으로 색칠한 부분이 

 https://0000-000-000-000-00.ngrok-free.app -> http://localhost:[포트] 

이런식으로 나온다. 그럼 로컬서버를 실행하고 제공된 URL에 접속하면 사용자의 로컬 환경으로 포워딩해준다. 라우터에서 포트 포워딩을 설정하여 로컬 서버의 포트를 외부로 공개하는 작업보다 훨씬 간단하게 접근할수 있다. 다만 무료버전은 40분인가? 까지만 열린다고 한다.

 

api를 요청할때 기존 orgin값 대신 넣어준 후 웹이나 모바일 기기에 빌드하면 사용가능 하다. 하지만 너무 짧아서 매번 수정 후 빌드후 테스트하기에는 어려움이 있다. 

 

2. ADB (Android Debug Bridge) 사용

ADB 란 ?

안드로이드 장치와 통신하여 디버깅 등의 작업을 진행하는 commend lind tool이라고 한다. Android SDK를 설치하면 그 안에 포함되어있다.

 

사용방법

adb reverse 기능은 usb를 연결하여 모바일 기기의 로컬을 컴퓨터 로컬로 바꾸게 해주는 기능이다.

Android SDK를 다운 받은후 환경변수를 입려한 후 cmd 창에 

$adb reverse tcp:[포트] tcp:[포트]

 

위의 명령어를 입력하면 된다. 서버가 연결이 되면 포트 번호가 뜨고 그러면 연결이 완료된것이다.

모바일 기기에서는 개발자 도구를 활성화 한 후 USB 디버깅 허용을 체크하면 된다. 앱 개발하면서 Android 세팅은 다 되어있어서 사실상 나에게는 제일 간편한 방법이었다. 

 

 

마치며..

처음으로 에뮬레이터가 아닌 안드로이드 폰에 내가 만든 앱을 다운 받아서 실행해보니 마치 출시를 한것 같은 느낌이었다....! 얼른 백엔드 서버 배포도 끝나서 인터넷만 있으면 앱을 실행시킬수 있게 하고 싶다.