구름IDE를 통해 Flask 개발 환경을 구축해보자!

Ettopia 서비스 프론트엔드 단계까지의 개발은 Visual Studio Code와 Github을 이용하며 진행되었다. 백엔드 단계의 개발이 시작되면서, 웹 서버 구동이 필요했고 이를 위해 구름 IDE 개발 환경을 구축하게 되었다. 우리 펜타애플 팀은 공용으로 사용할 구글 계정 하나를 새롭게 만들어 함께 사용하였다. 

📌구름 IDE 란?

 구름IDE는 Python, JavaScript, C, C++ 등 다양한 언어를 지원하고 네트워크만 연결되어 있다면 자신에게 필요한 설정을 통해 손쉬운 개발 환경을 제공한다. 또한 오픈 소스 프로젝트 진행을 위해 강력한 협업 환경을 제공한다. 구글, 페이스북, 카카오톡, 네이버, GitHub, Bitbucket, 페이코 계정 등의 소셜계정을 이용하거나 이메일 주소를 이용해 가입할 수 있다. 

📌구름 IDE에서 개발 환경 구축하기_Flask

1️⃣ 컨테이너 생성하기

회원가입 및 계정 로그인 후, 컨테이너 콘솔의 '모든 컨테이너' 페이지 우측 상단의 +새 컨테이너 를 클릭한다.

ⓛ 이름

컨테이너 이름을 입력한다. 한 번 생성된 컨테이너 이름은 변경할 수 없으며 ‘알파벳, 숫자, _’만 입력할 수 있다.

② 설명 (선택사항)

컨테이너에 대한 설명을 입력한다. 

③ GPU

베타 기간 동안 한 계정당 최대 한 개의 GPU 컨테이너를 제공하는데, 보통 AI, 빅데이터 등 DX 플랫폼을 위한 항목이다.

//보통의 웹 어플리케이션을 개발하는 데에는 필요하지 않아 '사용하지 않음' 을 눌러도 된다.

④ 지역

네 가지의 지역 중 선택할 수 있는데, 현재 접속 환경에서 가장 최적화된 지역이 기본 지역으로 지정되어 있다. 

⑤ 공개 범위

컨테이너 공개 범위를 설정한다. Public으로 설정 시 컨테이너 허브에 공개되어 누구나 해당 컨테이너에 접속할 수 있다. 서버 비밀번호, API Key, 개인 정보 등을 다룰 경우 노출될 위험이 있으니 주의가 필요하다. Private으로 설정 시 링크 등을 통해 컨테이너를 공유할 수 있다. //보통 개인 프로젝트 진행시 Private로 많이 설정하는 것 같다. 또한 펜타애플 팀은 API key를 사용하기에 필수적으로 Private로 설정하였다.

⑥ 템플릿

템플릿을 사용해 기존에 작업하던 프로젝트를 쉽게 불러올 수 있다. ZIP/TAR 선택시 로컬에서 작업중이던 프로젝트를 가져올 수 있다. Github, Bitbucket, Git, Kakao Oven 선택시 각 소스코드 저장소를 통해 프로젝트를 가져올 수 있다.

⑦ 배포

‘Heroku’, ‘AWS Elastic Beanstalk’에 애플리케이션을 즉시 배포할 수 있는 인터페이스를 제공하고 있다. 또한, 컨테이너 내부에서 Cloud Foundry에 애플리케이션을 즉시 배포할 수 있다. //펜타애플 팀은 배포 기능은 사용하지 않았다.

⑧ 소프트웨어 스택

컨테이너에 설치할 언어를 선택할 수 있다. //백엔드 개발 단계로 진입하면서 웹 서버 구동이 목적이었던 펜타애플 팀은 FLASK 언어를 선택하였다. 컨테이너에 필요한 리눅스 OS 버전을 Ubuntu 18.04 LTS로 선택하였다.

⑨ 추가 도구

Visual Sudio Code는 모든 소프트웨어 스택에서 사용 가능하며, Jupyter Notebook은 Python 기반 소프트웨어 스택에서만 사용 가능하다. //펜타애플 팀은 추가 도구를 사용하지 않았다.

⑩ 추가 모듈/패키지

컨테이너 생성 시 제공하는 추가 모듈과 패키지를 함께 설치할 수 있는데, 다른 데이터베이스 사용시 선택하지 않아도 된다. //펜타애플 팀은 후에 따로 데이터베이스를 설치하였다.

위의 내용을 통해 자신이 필요한대로 옵션 설정을 완료한 후, 생성하기 (Crtl + M) 를 통해 컨테이너 생성을 완료하면, 개발 환경 구축을 완료한 것이다!

 

2️⃣ 웹 서버에 구동하기

우선 프로젝트 실행 URL 과 포트를 설정해 도메인 주소를 새로 형성한다.

URL 주소를 만들고, PORT를 5000으로 설정하여 등록한다. 기본으로 생성되어있던 포트 80 도메인 주소는 삭제해준다.

앞으로의 flask 코드, database 코드를 작업할 폴더 templates를 생성해주었다. 

port=int(sys.argv[1]) 코드를 삭제해주고,

from flask import Flask
import sys
application = Flask(__name__)


@application.route("/")
def hello():
    return "Hello goorm!"


if __name__ == "__main__":
    application.run(host='0.0.0.0', debug=True)

 

debug=True 코드를 추가해주어 위와 같은 application.py 를 작성한다.

python3 application.py

터미널에 해당 명령문을 입력해주어 웹 서버를 구동한다.

터미널 처리가 완료되면 미리보기 버튼을 눌러 새탭 혹은 작업공간에서 구동된 웹 페이지를 확인한다.

웹 서버 구동이 완료되었다! 이제 Flask 개발 환경 구축이 끝났고, 개발을 시작하면 된다.