[Flask.3] pyngrok로 외부에서 Flask 접속하기

0. 들어가기에 앞서.

지금까지는 http://localhost:5000/와 http://127.0.0.1:5000/를 통해서 Flask에 접속을 했다. 이 주소는 Flask local 서버의 PC에서만 접속이 가능한 주소이다. 개발용으로 제공하면 모르겠으나 REST API 혹은 프로젝트로 용으로 하기에는 적합하지 않은 사용 방법이다. 따라서 이 글에서는 ngrok, 엄밀히 말하자면 Pyngrok로 외부에서 Flask를 접속할 수 있도록 만들 것이다.

 

1. flask-ngrok 설치.

우선 pyngrok를 설치해야 한다. Anaconda Prompt에 아래 보이는 명령어를 입력하여 설치하면 된다. 

(flaskBlog) c:\flaskBlog>conda install -c conda-forge pyngrok

 

 

2. pyngrok 설정.

다음은 메인 파일인 app.py 파일에 pyngrok를 추가해 주어야 한다. 다음 app.py 코드에서 주석이 있는 코드 부분을 추가하면 된다.

- import 부분

from pyngrok import conf, ngrok

- app = Flask(__name__) 문장 하단

http_tunnel = ngrok.connect(5000) # ngrok 시작 및 Port 번호 전달
tunnels = ngrok.get_tunnels() # ngrok forwording 정보

for kk in tunnels: # Forwording 정보 출력
    print(kk)

우리가 지금까지 구동한 환경의 Port#는 5000 이었다. 그래서 ngrok.connect()의 매개변수로 Port# 인 5000을 입력한 것이다.

- app.py

from flask import Flask,render_template
from pyngrok import ngrok #추가된 부분

app = Flask(__name__)

http_tunnel = ngrok.connect(5000) #추가된 부분
tunnels = ngrok.get_tunnels() #추가된 부분

for kk in tunnels: #추가된 부분
    print(kk) #추가된 부분

@app.route("/")
...

 

3. 실행.

명령 프롬포트에서 flask run을 통해 ngrok 서버를 구성할 수 있다.  다만 이는 파일을 직접적으로 실행시키는 것이 아니므로 디버그 모드로 실행되지는 않는다.

(flaskBlog) C:\flaskBlog>flask run

만약 정상적으로 실행이 되었다면 Terminal에 아래와 같이 표시 되었다면 성공한 것이다.

 

사이트에 접속을 해 보면 다음과 같은 시뻘건 화면이 맞이 해 줄 것이다. 우리는 우리가 만든 사이트니 신뢰가 있을 것이다. 세부 정보 -> 이 안전하지 않은 사이트를 방문을 클릭하여 우리가 만든 사이트에 접속해 준다.

 

그러면 아래 화면과 같이 또 다른 난관을 맞이할 것이다. 늘 그렇듯 가장 끌리는 Sign up for an ngrok account 를 클릭해서 ngrok에 회원가입을 진행해 주자. ngrok는 무료로 최대 8시간까지 서버 구동이 가능한 인증키를 준다. 우리는 가난한 개발자이니 지불은 나중에 하고 무료로 이용해 주자.

 

4. ngrok 설정.

아래 사진에서 보이는 것처럼 ngrok는 이메일, Github, Google로 회원 가입이 가능하다. 자신의 입맛에 맞추어 알아서 회원가입을 진행해 주면 된다.

 

회원가입을 진행하면 다음과 같은 Dashboard 화면이 나오게 된다. 여기서 2. Connect your account의 authtoken 뒤에있는 아주 긴 문구는 개인 고유의 인증키 이므로 유출되지 않게 조심하자. 허나 우리는 이게 필요하다. 이 키를 입력하지 않으면 계속 인증하라는 화면이 나올 테니 이 인증키를 통해 설정을 해주자. 이 키를 복사하여 다음 단계를 따르자 

 

이제 앞서 복사한 코드를 사용해야 한다. 인증키를 사용하기 위해서는 두 부분을 수정해 주어야 한다. 우선 첫번째로 import 부분이다. 기존에는 ngrok만 이용하기 위해서 ngrok만 import 했지만 이제 설정을 해 주어야 한다. 따라서 conf 도 import를 해야 한다. pyngrok의 import 부분을 다음과 같이 수정해 주자

- Before 

from pyngrok import ngrok

- After

from pyngrok import conf, ngrok

 

앞서 추가로 import 한 conf를 이용하며 인증키를 입력해 주자. 아래의 문장을 http_tunnel = ... 위에 추가하자.

conf.get_default().auth_token = "{인증키}"

- app.py

from flask import Flask,render_template
from pyngrok import conf, ngrok # 수정된 부분
 
app = Flask(__name__)

conf.get_default().auth_token = "{인증키}" # 추가된 부분
http_tunnel = ngrok.connect(5000)
tunnels = ngrok.get_tunnels()

for kk in tunnels:
    print(kk)
...

 

5. 설정 이후 실행.

이제 앞서 실행되고 있던 app.py 를 Ctrl+C 를 눌러 종료시키고 다시 아래의 명령어를 통해서 실행을 시켜 보자. 다시 시뻘건 화면이 뜨기는 하지만 우린 우리를 믿으니 모두 무시하고 우리의 사이트로 들어가 보면 아래와 같이 위험 문구와 함께 성공적으로 실행된 것을 확인할 수 있다.

 

모바일에서 LTE로 확인을 해 봐도 비록 안전하지 않다고 나오지만 사이트는 정상적으로 나오는 것을 확인 할 수 있다.

6. 추가 설정.

pyngrok을 처음 접해본 내가 아주 조금 겉할기를 했을 때 추가로 설정을 해주면 좋을 것을 가져왔다. 이는 내가 알아가면 알아갈수록 점점 더 추가해 나갈 계획이다. 자세한 설명서가 필요하면 Pyngrok Docs와 Ngrok Docs를 참고하기를 바란다.

- 지역 설정

Ngrok docs - region

Ngrok에서 설정 가능한 서버는 위 사진과 같다. 기본적으로 지역은 미국으로 되어 있다. 한국에서 작업을 하는 내가 미국까지 서버를 연결하려면 매우 멀다. 그러면 오래 걸릴 것이 뻔하니 조금이나마 가까운 일본 서버를 이용하자. 앞서 인증키를 추가한 부분 위에 아래의 문장을 추가하면 된다.

conf.get_default().region = "jp"

*지역을 설정하면 url이 *.ngrok.io에서 *.jp.ngrok.io로 변경된다. 이점 참고하자.

 

7. 전체 코드.

- app.py

from flask import Flask,render_template
from pyngrok import conf, ngrok

app = Flask(__name__)

# Ngrok
conf.get_default().region = "jp"
conf.get_default().auth_token = "{인증키}"
http_tunnel = ngrok.connect(5000)
tunnels = ngrok.get_tunnels()

for kk in tunnels:
    print(kk)

@app.route("/")
def hello_world():
    return render_template('index.html')

@app.route("/new")
def new_link():
    return render_template('new.html')

if __name__ == '__main__':
    app.debug = True
    app.run()