라즈베리파이의 웹서버를 데스크탑에서 접근하기

 

이번시간에는 라즈베리파이의 웹서버 사용 및 간단한 웹 페이지 구축을 해보고 웹서버를 데스크탑(외부)환경에서 접근하는 방법에 대해 알아보겠습니다.

 

일반적으로 공유기 설정을 통한 포트 포워드 방식이 아닌, 작은 프로젝트에서 간이로 사용하는 방법임을 말씀드립니다.

 

먼저, 실습에 사용할 웹서버를 알아보겠습니다.

 

라즈베리파이에서 웹서버를 구축하기 위해 다양한 방법이 존재합니다.

 

아파치, AWS, Nginx 등 많은 웹서버 구축 방법이 존재하는데, 이번시간에 알아볼 웹서버 환경은 "CherryPy" 입니다.

 

체리파이는 파이썬 프로그래밍 언어를 사용하는 객체지향 웹 프레임워크입니다.

다른 WAS, 프레임워크들에 비해 간단하고 신속하지만, 낮은 수준을 유지하고 오래되서 많이 쓰이진 않습니다. 

 

이제 설치단계부터 하나씩 알아보겠습니다.

 

우선 cmd창에 아래 명령어로 체리파이를 설치해줍니다.

 

sudo pip3 install cherrypy

 

이제 잘 설치되었는지 확인해야합니다.

소스코드작성은 라즈비안에 내장된 IDE인 Thonny를 쓸 것 입니다.

Thonny 실행 화면에서 상단의 Tools -> Manage packages.. 를 클릭합니다.

아래와 같이 패키지가 잘 뜨면 설치가 정상적으로 완료된 것입니다.

이제 간단하게 웹 브라우저에 텍스트를 찍어보겠습니다.

아래와 같이 소스코드 작성 후 상단의 시작 버튼을 클릭하면 쉘창에 서버가 시작되었다는 문구가 출력됩니다.

맨 하단의 두 줄을 보면 엔진서버가 127.0.0.1:8080이고 시작되었다고 나와있죠.

127.0.0.1 은 자기 pc의 IP주소, 즉 루프백 주소를 나타냅니다. 기본적으로 로컬 포트번호는 8080으로 지정되있습니다.

 

이제 라즈비안의 웹 브라우저를 키고 127.0.0.1:8080 를 입력하면 아래와 같이 문구가 뜨게됩니다.

서버를 멈추고 싶으면 실행 프로그램을 중지 시키면됩니다.

 

아래처럼 html 코드를 이용할 수도 있습니다.

1. static.html코드 작성

2. StaticPage.py작성

3. 결과

 

파이썬 언어 뿐만 아니라 기본적인 웹언어(html, css, js)를 모두 사용할 수 있습니다.

html로 기본 틀을 잡고 css로 디자인을 하는 등(ex) 부트스트랩)  모든 것이 가능합니다.

위의 예제 코드처럼 클래스 안에 html 코드를 작성 한 뒤 똑같이 cherrypy.quickstart(클래스 명)을 입력하면 웹에 정상적으로 출력됩니다.

 

아래는 weatherMap API를 이용하여 세계 도시의 기상정보를 웹에 출력한 화면입니다.

 

 

이제 본론으로 돌아와서 간단하게 외부환경에서 이 웹에 접근하는 방법에 대해 알아봅니다.

 

단순히 어떠한 설정 없이 데스크탑 크롬, 엣지, 익스플로어 등으로 127.0.1:8080을 입력하면 실행이 되지 않습니다.

 

이는 라즈베리-데스크탑의 망이 서로 다르기 때문인데 이는 포트포워딩 방법으로 외부방에서 내부방 접근을 허용하는 설정을 통해 해결할 수 있습니다.

 

우리는 이 방법을 쓰지않고 간단하게 외부에서 로컬 호스트로 접속하는 시도를 해보겠습니다.

이 방법은 내가 만든 프로젝트를 외부에서 접근하고싶을 때 간단하게 사용하는 방법입니다.

 

우선 라즈비안에서 웹 브라우저로 ngrok.com/download 에 접속하여 리눅스 버전 압축파일을 다운 받습니다.

cmd창에서 명령어로 다운받을 수 있지만 간혹 설치 에러가 발생하여 위 방법으로 진행하는 게 마음이 편합니다. 

다운을 받고 압축파일을 우클릭하여 압축을 풀어줍니다. 저는 똑같은 디렉토리에 압축을 해제했습니다.

실행파일이 정상적으로 저장되었음을 확인합니다.

이제 cmd창에서 파일 실행을 위해 파일이 저장된 디렉토리로 이동합니다.

(파일이 저장된 디렉토리로 이동하지 않으면 당연히 실행되지 않습니다.)

이제 "./ngrok http 8080" 를 입력합니다.

이 명령어는  ngrok을 실행하여 localhost에 8080포트를 열어 체리파이 index를 외부에서 접근하도록 한다는 의미입니다.

http 터널을 8080포트에 열어주기 위해 위 명령으로 실행하는 것입니다.

엔터 치고나면 프로그램이 진행되며 다음과 같은 정보들을 알려줍니다.

Session Expires의 7hours, 59munutes는 동작 시간이 최대 8시간임을 타나내는 것이고 빨간 박스부분이 포워딩된 웹 사이트의 주소가 됩니다.

이제 아까 위에서 보았던 날씨API 웹사이트 코드를 실행합니다. cherrypy를 이용하여 서버를 실행하게 되죠?

 

이제 위 사진에서 포워딩된 두 웹 주소 중 아무거나 데스크탑 환경의 크롬, IE, edge 등에서 띄워봅니다.

 

아래와 같이 잘 동작함을 알 수 있습니다!

(css를 적용하지 않고 html의 그리드로 수정했기 때문에 위에서 본 페이지와 디자인이 다릅니다.)