Worm's Studium

• www.sitemark.co.kr/ 사이트의 가치를 평가해주는 사이트

• www.yougetsignal.com/tools/open-ports/ 열려있는 포트를 확인해주는 사이트

• docs.python.org/3.0/howto/webservers.html 웹에서 파이썬은 어떻게 사용할까?

우리가 부르는 통상적으로 부르는 '서버'는 두 가지로 나누어진다.

하나는 웹 서버 (Web Server) - WS

또 다른 하나는 웹 어플리케이션 서버(Web Application Server) - WAS 이다. 

일단 이렇게 웹 서버(WS)와 웹 어플리케이션 서버(WAS)로 나누어서 사용하는 이유는 효율성 때문이다.

웹 서버(WS)는 정적인 컨텐츠를 처리하며, 웹 어플리케이션 서버(WAS)는 주로 동적인 컨텐츠 처리를 담당하고 있다. 

그렇다면

정적인(Static) vs 동적인(Dynamic)

으로 나누어서 생각해보아야 한다.

정적인(Static)

일반적으로 이야기하는 정적(Static)의 의미는 만들어놓은 것 그대로 제공하는 것 자체를 정적이라 할 수 있다. 예를 들면, HTML 템플릿을 작성하고 홈페이지를 열어보면 이것 자체가 정적인 페이지가 되는 것이다. 정적인 웹사이트는 만들기 쉽기 때문에 처음에는 정적인 웹사이트를 만들어보며 사이트를 만든다.

( 다른 컴퓨터 혹은 클라이언트에서 접속해도 항상 같은 페이지를 보여주는 것을 정적 사이트라 한다.)

동적인(Dynamic)

동적의 의미는 상호작용을 통한 데이터 처리가 필요한 경우 동적인 페이지라 한다. 대표적으로 데이터베이스의 처리가 필요한 경우 '동적'이라는 말이 붙는다. (서버가 사용자의 '요청(Request)'에 따라 데이터를 가공처리한 뒤에 생성되어진 웹 페이지를 보여주는 것이다.)

웹 서버(Web Server)

웹 서버는 일반적으로 정적인 컨텐츠를 제공합니다.

• 클라이언트가 요청한 정적인 컨텐츠를 HTTP를 통해 제공해주는 서버입니다. 
• 클라이언트로부터 들어온 요청에 대해 사용자 인증을 처리하는 역할을 한다. 
• 요청한 파일이 없거나 문제가 발생하면 특정한 코드 값을 전달해준다. (대표적으로 404)

그렇다면 여기서 의문이 하나 듭니다. 정적인 컨텐츠를 처리해준다면, 동적인 컨텐츠는 어떻게 처리해야할지 생각해야 합니다.  여기서 웹 서버의 다른 역할이 있습니다.

• 동적인 요청 ( 예를 들면, 데이터베이스 쿼리문 처리 )가 들어오면 이 요청을 웹 서버에서는 처리가 불가능하므로 컨테이너(Container)에 보내주는 역할을 합니다. 

※ 웹 서버는 정적 처리만 하기 때문에, 웹 서버 혼자만은 처리가 불가능하므로 동적 처리를 위해 요청을 보내는 것이다. HTML 페이지 자체에서는 서버에 저장된 데이터를 가져오거나 저장하는 것이 불가능하므로 요청을 통해 데이터를 가져오거나 저장해야 한다.

웹 서버의 종류에는 NGINX, APACHE 등이 있습니다.

그렇다면 여기서 이야기하는 컨테이너(Container)란 무엇인가?

컨테이너는 서블릿의 생명 주기를 관리하고 JSP를 서블릿으로 변환하는 기능을 지닌 프로그램이다. 

(서블릿의 생명주기는 서블릿을 관리해주는 역할이라 생각하면 된다.)

컨테이너는 두 가지 종류가 있는데, 서블릿 컨테이너와 JSP 컨테이너가 있다.

(실상, 서블릿 컨테이너와 JSP 컨테이너는 같은 개념이다. JSP 자체가 PHP 처럼 스크립트 형식으로 동작하지 않고 서블릿으로 변경된 이후에 실행되기 때문이다. JSP를 서블릿으로 컴파일 해주는 것이 JSP엔진이다. 그런데 여기서 톰캣(TomCat)의 경우, 이러한 JSP엔진이 JSPServlet이다. JSP를 동작시켜주고 컴파일 하는 것이 JSPServlet이 담당하고 있으므로 어떠한 의미에서는 JSP컨테이너라고도 볼 수 있는 것이다.

• 서블릿 : 서블릿은 자바로 구현된 CGI를 의미한다. [자바를 사용하여 웹 페이지를 동적으로 생상하는 서버 측 프로그램을 이미한다.]
• CGI : 공용 게이트웨이 인터페이스 (Common Gateway Interface) 로 웹 서버와 프로그램 간의 교환방식을 의미한다. (정적 처리를 하는 웹 서버와 컨테이너를 연결하기 위한 통신 장치이다. 쉽게 생각해서 웹서버와 컨테이너 간의 통신을 도와주는 장치이다. )
• JSP(Java Server Pages) : 자바 서버 페이지는 HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다. 

JSP의 기본적인 동작 구조는 클라이언트에서 서비스가 요청되면 JSP의 실행이 된다. → JSP는 웹 어플리케이션 서버의 서블릿 컨테이너에서 서블릿 원시코드로 변환 → 서블릿 원시코드가 컴파일되어서 HTML 형태로 클라이언트에게 돌려준다.

※ 개인 홈페이지에서는 HTML, CSS, JavaScript만으로도 충분한 표현이 가능합니다. 하지만 요새는 트위터, 페이스북, 개인 쇼핑몰 운영 그리고 댓글이 달리는 기능이 있는 홈페이지와 같이 기능이 추가되어져서 웹 페이지를 만듭니다. 이러한 데이터는 데이터베이스 상에 저장되는데, HTML으로는 막대한 양의 데이터를 저장과 처리가 불가능하므로 이러한 데이터를 처리를 감당하기 위해 만들어진 곳이 동적 페이지 입니다. (대표적인 언어가 CGI, ASP, PHP, JSP 등이 있다.)

웹 어플리케이션 서버(Web Application Server)

웹 서버로부터 오는 동적인 요청을 처리하는 서버를 웹 어플리케이션 서버라 한다. 일반적으로 WAS라 한다.

위키백과에서 WAS는 이렇게 정의되고 있다. 인터넷 상의 HTTP를 통해 사용자 컴퓨터나 장치에 어플리케이션을 수행주는 미들웨어(소프트웨어 엔진)으로 볼 수 있다. 

WAS는 웹서버 + 컨테이너로 이루어진 서버라 생각하면 편하다.

[ko.wikipedia.org/wiki/%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98_%EC%84%9C%EB%B2%84]

웹 어플리케이션 서버 기능은

• 프로그램 실행 환경과 데이터베이스 접속 기능을 제공
• 여러 개의 트랜잭션을 관리
• 업무를 처리하는 비즈니스 로직 수행

웹 어플리케이션의 종류는 아파치 톰캣, 제우스, 제티(Jetty), 레진(Resin) 등이 있다.

더욱 자세한 내용은

rrhh234cm.tistory.com/456

gmlwjd9405.github.io/2018/10/29/web-application-structure.html

developer.mozilla.org/ko/docs/Learn/Common_questions/What_is_a_web_server

를 참조하도록 하자.

헤로쿠(Heroku)를 선택한 이유

홈페이지를 만들기 위해서는 서버가 반드시 필요하다. 그렇다면 일반적으로 우리가 홈페이지를 만들기 위해서 선택할 수 있는 선택지가 3가지 존재한다.

1. 직접 서버 구축하기

2. 아마존 웹 서비스를 활용해서 서버 구축하기

3. 헤로쿠(Heroku)를 활용한 서버 구축하기 ( *이하 헤로쿠라 지칭하겠다.)

정도로 생각할 수 있다.

여기서 가장 쉽게 접근할 수 있는 플랫폼이 헤로쿠를 활용한 홈페이지 구축하기가 가장 쉽다. 

1. 직접 서버 구축하기의 경우, 직접적으로 하드웨어를 사야함과 더불어 서버와 관련한 지식, 보안과 관련한 지식이 필요하기 때문에 가볍게 접근하기 어렵다. 만약에 개발자로써 이미 일을 하고 있으면서, 많은 지식을 보유한 사람이라면 가장 좋은 방법일 수도 있지만, 가볍게 시작하는 마음으로는 어렵다.

2. 아마존 웹 서비스(AWS)의 경우, 많이 쓰기도 하며 현업에서 많이 사용된다. 하지만 시스템에 대한 고려가 필요하며, 보안 문제로 인해 트래픽의 증가는 우리의 지갑을 위협하기도 하기에 불안하다.

( * 성능면에서는 당연히 아마존 웹 서비스(AWS)가 더 좋으며, 관련 기기를 대여하는 비용은 아마존 웹 서비스(AWS)가 더 저렴하다. 하지만 갑작스럽게 늘어난 트래픽을 감당하지 못하면 큰 비용을 내야할 수도 있기에 배우는 입장에서 AWS는 좋지 않은 선택이라 생각한다. - 언제까지나 가벼운 마음으로 접근하는 것이기에)

1번과 2번에 이유에 따라 헤로쿠를 사용하게 되었다.

* 가벼운 마음으로 간단한 프로젝트를 진행하면서 여러 가지 실험을 하고 싶은 경우* 포트폴리오를 제시하고 싶은 경우

우리는 이 두 가지에 해당하기에 헤로쿠로 진행하도록 한다. 

(헤로쿠는 PaaS 서비스이며, AWS는 IaaS, PaaS, SaaS를 다 제공하고 있으며 점차 시장을 확장해나가고 있다. 초기에는 IaaS를 통해 성장하였으며, 대표적으로 IaaS는 Amazon EC2 서비스가 있다. 오래된 기업인 만큼 신뢰도가 높다.)

* PaaS : Platform as a Service를 의미 - 서버를 위한 기기와 그에 따른 응용 프로그램을 개발할 수 있는 API까지 제공하는 환경을 PaaS라 합니다. (하드웨어와 소프트웨어를 주고서 알아서 관리해줍니다. 사용자는 프로그램 개발에 사용되는 애플리케이션과 데이터에 해당하는 부분만 신경쓰면 됩니다.)

* IaaS : Infrastructure as a Service를 의미 - 업체가 데이터센터를 구축해서 서버를 직접 관리해줍니다. 물리적 서버를 가상화 기술을 통해 여러개의 가상화 서버로 나누어서 제공합니다. 제공되는 업체가 관리해주는 서버 외에는 대부분의 필요한 시스템을 직접 구축해야 하므로 많은 지식이 필요합니다. (그래서 담당 인력이 필요하기도 합니다.)

* SaaS : Software as a Service를 의미 - 제공되는 업체에서 대부분의 요소를 제공해주고 관리해준다. 편하게 제공되는 서비스만 받아서 사용되는 것을 의미한다. (대표적으로 Google Docs, 네이버 이메일 등이 있다.)

사용자의 자유도에 따라 도식화해보자면 이런 느낌으로 그릴 수 있을 것이다. ▼

IaaS를 쓰면 자유도가 높지만 관리해야할 요소가 늘어나고 필요한 지식과 시간 그리고 인력이 필요하다.

클라우드 3대장 PaaS, IaaS, SaaS의 차이점 비교

2020/12/28 - [클라우드 및 서버] - [PaaS, IaaS, SaaS의 차이점]PaaS, IaaS, SaaS 너희들은 뭐니?

Heroku

헤로쿠의 가장 큰 장점은 무료로 쓸 수 있다는 점이죠! 

가장 기본이 되는 Free 버전을 제공해주고 있다. (완전하게 무료로 제공되고 있다. 550 - 1000시간을 쓸 수 있다. 신용카드 정보를 넣으면 1000시간을 쓸 수 있으며, 1달 - 30일 기준으로 720 시간이므로 우리가 잠들어 있는 시간을 감안한다면 충분하다. 부족하다면 신용카드 정보를 입력하면 1000시간을 제공받을 수 있으므로 상관없다. 물론 결제는 되지 않으니 안심해도 된다.)

유일한 단점이라면 30분 정도 입력이 없을 경우 Sleep에 들어간다는 점이다. 다시 접속했을 때 구동까지 4~5초 정도의 시간이 걸린다. (물론 더 걸릴 수도 있다.) 하지만 우리의 가벼운 프로젝트에는 이러한 점은 전혀 문제가 되지 않는다. 

* 여기에 한 달에 $7을 지불하면[Hoby버전] sleep 없이 서버를 운영할 수 있게 된다.

(무료 버전과 Hoby 버전에서의 주요 차이점은 SSL을 통한 HTTPS를 적용하는것이 가능해진다. 구글에서는 HTTPS를 권장하고 있으므로 구글 검색에 나오게 하려면 SSL를 통한 HTTPS 구현을 해두어야 한다. 

구글 크롬 기준으로 HTPPS 연결이 안 이루어지면 무시무시한 '주의요함' 이 뜬다.

어차피 연습해볼 기분으로 블로그를 만드는 것이기에 헤로쿠 Free 정도면 충분하다.

Dyno(다이노)?

헤로쿠에 들어가면 다이노(Dyno)가 존재한다. 우리가 사용하고자 하는 서비스도 다이노이다. 

다이노란 사용자가 쓰기 좋게 만들어놓은 가상화된 Unix의 컨테이너를 의미한다. 

가상화란?

가상화는 하나의 물리 하드웨어에 가상으로 소프트웨어를 여러 개로 나누어 놓는 것을 의미한다. 

실제가 존재하는 물리적 하드웨어는 한계가 존재한다. 예를 들면, 하드웨어 성능을 모두 다 활용하기 힘든 점을 들 수 있다. 100%의 성능 활용이 힘들다면 투자한 비용 대비 효용을 낼 수 없다. 그렇기에 하드웨어 성능을 모두 활용하기 위해 도입한 것이 가상화 기술이라 볼 수 있다.

물리적인 한계를 추상화를 통해 어느정도 극복하기 위한 기술이 가상화라 볼 수 있다.

(1대의 컴퓨터로 10대의 컴퓨터가 있는 것처럼 행동할 수 있는 것이다. 이는 많은 비용을 아껴주며 새로운 부가가치를 가져다 주는 것이다. )

* 이것 이외에도 가상화가 가져다 주는 이득은 다양하지만 간략하게만 설명했다. 

더 자세한 내용을 알고 싶다면 : www.redhat.com/ko/topics/virtualization

그래서 여기에 가상화 기술은 생각보다 실행하기에 무거운 부분이 있었는데, 이를 경량화 시킨 것이 컨테이너(Containers)이다. 대표적인 컨테이너가 Docker(도커)이다.

귀여운 고래 이미지를 가지고 있는 도커, 그리고 고래 위에 컨테이너가 있다.

컨테이너에 대한 자세한 이야기는 나중에 다루도록 한다. 간단하게 컨테이너는 우리가 특정 서비스를 제작하고자 할 때, 제작하고자 하는 서비스에만 집중할 수 있도록 도와준다는 의미로 생각해두자.

(+Keyword : 쿠버네티스(Kubernetes) - 컨테이너를 관리하는 도구)

Heroku

www.heroku.com/

회원가입(Sign up)을 하자. 

이후에 이메일 인증을 하고 나면 

비밀번호를 설정하면 된다.

그리고 

devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

우리는 Node.js를 활용해서 헤로쿠를 사용하려 한다. 그런데 헤로쿠는 명령어를 통해 작동되므로 이를 위한 프로그램을 설치해줘야 한다. [Heroku Command Line Interface (CLI)]를 설치해줘야 한다. 

대부분 사용자가 윈도우 이므로 64-bit installer를 설치하도록 하자. (윈도우10 기준 일반적으로 64-bit이다.)

[설치는 다음, 다음, 다음을 누르도록 하자.]

설치가 마무리 된 이후에는 hreoku명령어를 사용할  수 있다.

윈도우 검색창에

CMD라 입력하면 '명령 프롬프트'가 나온다. (git bash 혹은 Powershell을 이용해도 좋다.)

$ heroku login

을 입력하면

이러한 문구가 나온다. 그러면 Enter를 눌러주면 이후에 인터넷 창이 열린다.

이렇게 나오는데, 로그인을 눌러주면 된다. (로그인 이후에는 인터넷 창을 닫아도 된다.)

$ heroku logout

헤로쿠는 한번 로그인 되면 컴퓨터가 꺼져도 로그인이 지속됩니다. 그래서 로그아웃을 위해서는 로그아웃 명령어를 통해 로그아웃을 해줘야 합니다. 

기본적인 환경 구성

node.js와 git이 필요하므로 각각의 버전을 확인하면서 컴퓨터에 설치되었는지 확인해보도록 하자.

$ node --version
v14.15.1

$ npm --version
6.14.8

$ git --version
git version 2.92.2.windows.3

이러한 형태로 나온다면 모두 설치되어 있는 것이다. 만약에 설치가 안되어 있으면 설치해야 한다.

Node.js 설치

nodejs.org/ko/download/

Git 설치

git-scm.com/downloads

heroku 간단한 sample 만들어보기!

git은 내 컴퓨터에 있는 것을 버전관리 해주는 것이고, gitHub은 로컬에 있는 것을 클라우드로 올려서 버전관리를 할 수 있도록 도와주는 것이다. 우리는 git을 쓰므로 로컬에 있는 것을 활용할 것이다. 

간단하게 우리는 헤로쿠에서 제공하는 sample예제를 통해 진행해보도록 하자.

* heroku에 로그인되어 있는 상태에서 시작하면 된다. 

$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started

여기서 사용되는 clone은 https://github.com/heroku/node-js-getting-started.git 을 내 컴퓨터로 복사해오는 것이다. 

들어가서 확인하면 github로 들어가지며, heroku에서 제시한 예제를 구경할 수 있다.

일단은 그냥 따라하면서 진행하도록 하자.

두번째 줄에 써져 있는 

$ cd node-js-getting-started

cd 명령어는 특정 폴더로 이동하는 이동 명령어이다. 

해당 폴더에 있는 node-js-getting-started 폴더로 이동하라는 명령어이다.

간략한 명령어들

$ cd ..

을 해주게 되면 하위 폴더로 이동한다. 자주 쓰이는 명령어이므로 알아두도록 하자. 

C드라이브 말고 다른 드라이브로 이동하고 싶다면 

$ d:

를 타이핑 한 뒤 엔터를 누르면 D로 이동하는 것을 볼 수 있다.

D:\heroku 에 해당하는 폴더로 이동하고 싶다면

$ cd D:\heroku

를 쳐주면 해당하는 폴더로 이동하게 된다. 

이제 Heroku에 만들어 보도록 하자.

$ heroku create

실행하면 아래와 같이 나오게 된다.  gentle-cliffs-00258이 생성되었따는 소리이다.

$ Creating app... done, ⬢ gentle-cliffs-00258
$ https://gentle-cliffs-00258.herokuapp.com/ | https://git.heroku.com/gentle-cliffs-00258.git

https://gentle-cliffs-00258.herokuapp.com/ 이 부분은 실행하는 사람마다 다르게 나올 것이다. 

인터넷 창을 통해 주소를 적고 접속할 수 있다. 우리가 방금 만든 홈페이지에 접속할 수 있는 것이다.

gentle-cliffs-00258은 임시로 생성되는 우리의 주소라 생각하면 된다. (이는 나중에 도매인을 구매해서 자신만의 도매인으로 변경할 수 있다. )

헤로쿠 사이트에서 확인해보면 새로운 app이 추가됨을 확인할 수 있다.

(git을 통해서 조작한 것이다!)

이제 배포를 해보자!

$ git push heroku main

을 실행하면 스스로 슥슥슥슥~ 무언가가 나온다.

완료가 되면 실행하기만 하면 된다.

$ heroku ps:scale web=1

스케일이란 다이노의 성능을 올리거나 줄이는 형태를 이야기한다. (CPU, 메모리를 더 할당하거나 줄이는 것을 말한다.)

여기서는heroku ps:scale [다이노의 타입]=[다이노의 크기] 를 통해 입력하는 것이다. web 버전의 다이노 타입과 크기는 1을 입력했다.( * 항상 스케일을 사람이 일일이 하진 않는다. 오토 스케일링이 가능한데 이는 add-on을 통해 지원한다.)

$ heroku open

을 실행하면 우리가 만든 사이트가 열린다.

만약 서버를 닫고 싶다면 

$ heroku ps:scale web=0

를 입력하면 가동 중인 다이노의 갯수가 0개이므로 서버가 닫힌다.

마지막으로 로그를 확인하기 위한 명령어 logs

$ heroku logs

서버에서 무슨일이 일어났는지를 기록해둔 것이다.

서버에서 실행하는 것이 아닌 로컬에서 실행하기

로컬에서도 web 실행이 가능하다. 

$ heroku local web

을 한 뒤에, http://localhost:5000 주소창에 입력하면 우리가 아까 실행했던 페이지가 로컬로 실행된다. 

간단하게 메인 페이지를 변경해보도록 하자.

먼저 cool-ascii-faces을 먼저 설치해주도록 하자. 

$ npm install cool-ascii-faces

완료가 된 뒤에는 

node-js-getting-started 폴더에 들어있는 index.js를 편집기를 활용해서 실행하도록 하자. 

(IDE가 없다면 하나 설치하도록 하자. 무엇을 골라야 할지 모르겠다면, brackets.io/

를 설치하도록 하자. 설치한 뒤에는 아래의 코드를 입력하도록 하자. <기존의 코드를 바꿔서 입력해야 한다.>)

const cool = require('cool-ascii-faces');
const express = require('express');
const path = require('path');
const PORT = process.env.PORT || 5000;

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .get('/cool', (req, res) => res.send(cool()))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`));

그 뒤에는

$ npm install
$ heroku local

을 입력한 뒤에 

 http://localhost:5000/cool

에 접속하면 된다. 그렇다면 웹사이트에서 (　´･‿･｀)이러한 모양새를 볼 수 있다.

( F5를 누를 때마다 계속해서 표정이 바뀐다!)

방금까지 한 것은 내 컴퓨터(로컬)에 해당하는 부분을 변경했으니 이제는 서버에 적용해줘야 한다.

대부분의 헤로쿠 프로젝트는 이러한 방식으로 변경한다. 

[참고로 로컬 서버가 가동 중에는 명령어가 안 써질 수도 있으니 그런 경우라면 ctrl + c를 누르고 Y , Enter를 눌러주면 종료된다.]

$ git add .

git의 가상의 준비 영역인 Staging Area를 Idex라 부른다. 추가한다고 해서 바로바로 저장소로 올라가는 것이 아니라 임시 저장소를 하나 더 둠으로써 관리하기 용이하기 만들어 두었다. add . 명령어는 index 공간에 올려두는 것이다. 

$ git commit -m "Add cool face API"

이제 commit 명령어를 통해 index에 있는 것을 실제 저장소에 옮겨 공개하도록 한다. 여기서 특이사항을 메시지로 남겨서 어떤 점이 변경되었는지를 알려주는 역할을 한다. "Add cool face API"는 간단한 메시지를 남긴 것이다. [사실 이 특성은 헤로쿠의 특성보다는 git의 특성이다.]

$ git push heroku main

이제 헤로쿠에 올린다.

$ heroku open cool

실제 웹사이트에 잘 올라갔는지 확인해둔다. 아까 로컬에서 확인했듯이 실제 서버에서도 F5를 누를 때마다 표정이 바뀌는 것을 확인할 수 있다.

* 만약에 index에 올린 파일을 삭제하고 싶다면 

$ git rm --cached 파일이름

을 통해서 삭제가 가능하다. [git 다루는 내용이 아니므로 간략하게만 이야기하였다.]

간략하게 헤로쿠에 파일을 올려보고 웹사이트를 통해 확인하는 방법에 대해 알아보았다.

다음 시간에는 헤로쿠에다 만든 파일을 올려보고 JSON 파일 조작을 통해 내가 만든 웹사이트를 올리는 방법을 알아보도록 하자.