<스파르타 웹개발> 5주차 개발일지 (完)

내가 만든 페이지를 인터넷에 올리는 것 까지 5주간의 과정이 모두 끝났다. 

 

다만, 해당 페이지는 이번 과정에서 공통적으로 만들어 본 페이지이고,

코멘트를 남기는 것 외에 별다른 기능이 없고 이전 글에서도 계속 보여졌기 때문에 따로 도메인을 공개하지는 않을 예정이며 앞으로 좀더 나의 needs에 맞는 페이지를 만들어 볼 생각이다.

 

미니프로젝트

마지막 주에는

지금까지 배운 내용들을 가지고 한가지 미니 프로젝트를 진행하였고 결과물은 대략 다음과 같다.

버킷리스트에 담고 싶은 내용을 기록하면 DB에 저장해주고, 아래에 표시해주며

완료를 누르면 취소선이 그어지면서 완료했음을 알려주는 간단한 웹 페이지이다. 

 

마찬가지로 지금까지 배운 내용과 크게 다른 내용은 없었기 때문에 따로 언급하지는 않겠다. 

 

 

웹 서비스를 공개하기

이번주에 배운 것 중 가장 중요한 것은 바로, 내가 만든 웹페이지를 모두가 access할 수 있도록 하는 것이다.

지금까지 한 내용들을 도식화하면 다음과 같다. 

 

 

 

로컬 환경

 

이때, 지난주까지는 

서버도 내 컴퓨터에서 돌리고, 클라이언트(browser)도 내 컴퓨터에서 돌리는 local 환경에서 모든 페이지들을 시험했었다. 

 

따라서 우리가 서버를 구동할 때 보여지는 페이지를 내 컴퓨터에서 실행한 browser(크롬)으로 보려면

localhost:5000과 같은 주소를 사용하였다. 

여기서 localhost의 위키백과에서의 정의를 살펴보면, 

라고 한다. 

 

다시 말해 127.0.0.1 이라는 주소를 브라우저에 입력해도, 내 자신의 컴퓨터에 접속하는 셈이 된다.

 

 

 

포트 :5000

localhost 뒤에 붙는 :5000은 어떤 의미일까?

이를 port라고 한다. 

 

간단히 말해 IP주소는 컴퓨터를 찾는 데에 쓰인다면

포트번호는 컴퓨터 안에서 어떤 프로그램을 찾을지(프로그램에 할당된 포트에 따라) 결정한다고 생각하면 될 것 같다.

 

우리는 왜 5000번 포트를 이용해서 지난번까지의 웹페이지를 볼 수 있었을까?

답은 간단하다. 

 

서버를 구동하는 app.py 파일을 살펴보면

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

이와 같은 구절을 볼 수 있고 이때 port를 5000번으로 설정하였기 때문에 이 5000번 포트를 통해 서버에 접근할 수 있는 것이다.

 

그렇다면 강의에서는 왜 하필 5000번 포트를 사용하였을까?

다시한번 위키백과를 참고하면

TCP/UDP란 컴퓨터와 컴퓨터 사이의 정보를 주고받는 프로토콜의 종류라고만 알고 넘어가자.

 

어쨌든 IANA라는 곳에서 포트 번호를 대략 이럴 땐 이 번호의 포트를 쓰자고 정해둔 것이 있고(꼭 따를 필요는 없지만)

왜 5000번을 썼는지는 잘 모르겠지만 잘 안쓰는 포트라서 썼을 거라고 추정이 가능하다.

 

예를 들어 80번 포트에는 다음과 같은 약속이 되어 있다. 

80번 포트는 웹페이지 전송에 쓰인다는 암묵적인 룰이 있기 때문에

 

네이버와 같은 페이지에 접속할 때

naver.com:80

으로 접속하여도 마찬가지로 네이버 메인 페이지를 볼 수 있다. 

 

 

 

그렇다면 이제 문제는 무엇일까?

현재 상태는 내 컴퓨터에서 서버를 구동하는 것이다.

이때의 문제는 다음과 같다. 

 

1. 웹페이지가 제공되려면 내 컴퓨터가 1년 365일 24시간 켜져 있어야 한다.
2. 공개 IP주소를 통해, 그리고 5000번 포트를 통해 누구나 접근 가능해야 한다.
3. 공개 IP주소는 숫자라서 인간이 외우기가 어려운 단점이 있다. 

 

이를 하나씩 해결해보자. 

 

1) 웹페이지가 제공되려면 내 컴퓨터가 1년 365일 24시간 켜져 있어야 한다.

이는 아마존에서 제공하는 AWS의 EC2를 이용하여 해결한다.

다행히 나는 모종의 프로그램을 돌리는 과정에서 EC2를 자주 사용해보았기 때문에 큰 어려움이 없었다.

쉽게 말해 그냥 남의 컴퓨터를 돈 지불하고 빌려다 쓴다고 생각하면 된다.

 

이때 빌려오는 컴퓨터의 운영체제는 Linux를 선택하였다.

왜? 이유는 모른다.(스파르타코딩클럽의 장점이자 단점..) 가벼워서?

 

즉 이러한 제 2의 서버용 컴퓨터를 빌려옴으로써 1)의 문제를 해결할 수 있고

내 프로젝트 파일들을 이 서버용 컴퓨터로 넘겨주고 (FileZilla라는 프로그램을 이용한다.)

 

서버용 컴퓨터에 원격으로 접속하여 서버용 컴퓨터에서 프로젝트 파일을 구동하면 끝난다.

 

서버 컴퓨터에 원격 접속하는 방법은 다음과 같다.

AWS의 컴퓨터에 접속할 때에는 SSH라는 보안 프로토콜을 통해 접속하는데 (Secure Shell Protocol)

윈도우에서는 기본적으로 SSH를 제공하지 않아 다음과 같은 방법으로 접속한다. 

 

1. Git bash 실행

 

2. 다음 명령어를 실행하여 SSH를 실행한다. 이때 키페어는 EC2를 만들때 생성한 키페어를 사용한다.

ex)

 

3. 우리 프로젝트는 python 3을 기반으로 코딩했기 때문에 이를 위해 python과 pip를 설치해준다.

맨 아래에 있는 update-alternatives 명령어는

pip3, python3의 뒤의 3 붙이기 귀찮기 때문에 설정해주는 역할을 한다.

 

 

4. Filezilla를 이용하여 내 컴퓨터의 프로젝트 파일들을 서버용 컴퓨터에 넘겨준다.

왼쪽은 내 컴퓨터

오른쪽은 서버용 컴퓨터이다.

 

drag & drop을 통해 원하는 파일을 원하는 디렉터리에 옮겨주면 간편하게 끝난다.

 

 

4. 원격으로 서버용 컴퓨터에서 파일을 실행한다.

 

git bash를 통해 서버용 컴퓨터에 접근하였다면 다음과 같은 리눅스 기본 명령어들을 이용하여 내 프로젝트가 담긴 디렉터리로 이동하여 app.py를 실행한다.

다만, 이때 서버용 컴퓨터에는 우리가 사용한 package들이 깔려있지 않기 때문에

깔아주면 된다.

 

 

5. 이대로 끝??? (nohup)

우리는 SSH를 이용하여 서버용 컴퓨터에 접속해서

Filezilla를 이용해 옮겨준 파일을 실행했다.

 

이때 SSH 접속을 끊으면? 파일 실행이 종료되어 버린다.

 

이를 방지하기 위해 사용하는 것이 nohup이다. 

 

위의 python app.py 명령어 대신 다음의 명령어를 사용하여 실행/종료가 가능하며

이렇게 실행하면 SSH 연결이 끊어져도 app.py가 계속 구동된다.

nohup으로 실행

종료

 

이러한 과정들을 거치면

내 컴퓨터를 24시간 켜두지 않아도 서버의 구동이 가능하다!!

 

 

 

2) 공개 IP주소와 5000번 포트를 통해 누구나 접근 가능해야 한다.

공개 IP주소는 어려울 것이 없다.

AWS의 EC2 관리 화면에 들어가면 Public IP address를 확인할 수 있기 때문에 이를 사용하면 되고

몇 가지의 포트를 열어주고 채널링하는 과정이 필요한데 이를 Port forwarding이라고 한다.

 

EC2의 보안 탭에 들어가보면 아래 화면과 같은 보안 그룹이 표시되며

inbound 규칙 목록을 볼 수 있다. 

 

초기에는 오로지 22번 포트만 기록되어있으며

왜???

그냥 그렇게 정해놨다. 

 

우리 프로젝트의 서버를 열어둘 5000번 포트와

위에서 나왔듯 웹페이지를 주고받는 80번 포트를 추가적으로 열어주면 된다.

위와 같이 인바운드 규칙을 추가해주면, 아래와 같이 80번과 5000번 포트가 추가로 열린다.

 

남들이 브라우저를 통해 서버에 접근하면, 

위에서 여러번 살펴봤듯 기본적으로 웹페이지에 접근하는 80번 포트를 사용하여 접근하게 되는데

우리의 프로젝트 서버는 5000번 포트를 통해 열려 있다. 

 

즉, 80번으로 접근하는 사람들을 5000번으로 Redirect해줘야 하는데

이를 Port Forwarding이라고 한다.

 

이는 Linux에서 다음과 같은 간단한 명령어로 해결할 수 있다.

 

 

 

3) 공개 IP주소는 숫자라서 인간이 외우기가 어려운 단점이 있다

위의 과정을 거치면

남들도 브라우저를 이용하여 내 AWS 컴퓨터의 public domain으로 웹페이지를 볼 수 있다. (80번 -> 5000번 포트)

 

단, 이는 숫자로 되어 있어 직관적이기 않기 때문에

가비아에서 원하는 도메인을 구매하여 서버의 public domain과 연결시켜 주면 모두 해결된다.

 

예시

이러한 과정을 통해 내가 구입한 특정 도메인과

AWS의 IP를 매칭시켜서

 

남들이 영어로 된 웹페이지 주소를 입력하면 AWS 서버로 접근할 수 있게 되었다.

 

뭐 크게 특별할 것 없는 웹페이지라서

도메인은 아직 공개하지 않을 것이고, 친구에게 카카오톡으로 첨부한 사진만 공개한다.

이와 같이 전세계 모두가 내가 만든 웹페이지로 접근할 수 있게 되었다!!

 

 

 

소회

이렇게 길다면 길고 짧다면 짧은 5주간의 과정이 모두 끝났다. 

웹페이지가 어떻게 만들어지고 어떻게 배포되는지 그 과정을 이해한 것에 대해 큰 뿌듯함을 느끼고

이번에 얻은 지식들을 잘 활용하여 추후 좋은 웹페이지나 웹서비스를 만들 수 있도록 잘 연구하고 공부해야겠다. 

 

좋은 강의를 제공해주신 스파르타코딩클럽과 의사창업개발자모임에도 감사의 말씀을 전한다.