000 - 사전스터디 5주차 강의 발표

 

저희 사전스터디 16조는 웹개발 종합강의 3회차 회독하며 서로 공부한 주차를 팀원들에게 발표할 시간을 가졌으며

해당 글은 제가 맡은 5주차를 정리한 글입니다.

 

 

 

5주차 강의 목적

• 버킷리스트를 만들어보며 기존의 사용해본 기술을 복습
• 팬명록을 클라우드에 올려 실제로 배포하기

 

 

---

버킷리스트 만들기

기본내용은 4주차와 동일하여 다른 부분인 진행상황 항목 부분을 중심으로 설명

 

1. 버킷리스트 기록하기

* 기능 파악 : bucket을 기록하는 기능
url	/bucket
요청방식	POST
클라 (ajax) > 서버 (flask)	이루고 싶은 것을 입력해서 서버에 전달
서버  > DB (mongoDB)	1. bucket 내용 전달   2. 항목을 구분하기 위해 버킷리스트 순서를 생성 DB에 전달       (DB 데이터 전체 개수 + 1)   3. 진행사항 디폴트 값 0 (#미완료) 전달
서버 (flask) > 클라 (ajax)	완료 메세지를 클라에 전달
클라	화면 새로고침

app.py )

# 버킷리스트의 개수를 알아내는 
bucket_list = list(db.bucket.find({},{'_id':False}))
count = len(bucket_list) + 1

 

 

2. 버킷리스트 보여주기 

* 기능 파악 : 저장된 bucket을 모두 가져와 보여주는 기능
url	/bucket
요청방식	GET
클라 (ajax) > 서버 (flask)	(전달할 것 없음 / 서버단 함수만 호출)
서버  > DB (mongoDB)	1. DB에서 원하는 데이터를 전체 받아옴   2. 서버에 json화해서 리턴
서버 (flask) > 클라 (ajax)	json 데이터를 전달
클라	1.가져온 데이터를 해제하고 하나하나 필요한 데이터를 뽑기   2.데이터를 해제하면서 데이터당 html 리스트를 붙이는 작업   + 진행상태 여부 따라 완료버튼 출력 처리하기

index.html )

if (done == 0) {
    temp_html = `<li>
                    <h2>✅ ${bucket}</h2>
                    <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                </li>`
} else {
    temp_html = `<li>
                    <h2 class="done">✅ ${bucket}</h2>
                </li>`
}

 

3. 버킷리스트 완료하기

* 기능 파악 : 진행상황을 변경
url	/bucket/done
요청방식	POST
클라 (ajax) > 서버 (flask)	완료하려는 대상 bucket의 넘버를 전달  (2번 보여주기 temp_html코드 확인)
서버  > DB (mongoDB)	1. 대상 bucket과 같은 넘버의 데이터를 찾는다   2. 데이터의 done 값을 1 (#완료) 로 바꾼다
서버 (flask) > 클라 (ajax)	완료 메세지를 클라에 전달
클라	화면 새로고침

index.html )

function done_bucket(num) {
	// <button onclick="done_bucket(${num})"를 보면 함수안에서 숫자를 가지고 태어남.
    // 그래서 id에서 빼오지 않더라고 이경우 해당 숫자가 바로 num 매개인수로 넘어옴. 
	// 따라서 num을 바로 써주기 가능
	$.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {num_give: num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

app.py)

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    # form에서 넘어오는 num_receive는 숫자처럼 보여도 문자임 
    # 그러나 DB의 num은 숫자인 상태 그래서 num_receive를 int함수로 숫자 변환
    db.bucket.update_one({'num': int(num_receive)},{'$set':{'done':1}})
    return jsonify({'msg': '버킷 완료!'})

 

라이브러리, API등은 보통 제작사에서 배포한 공식 Documents가 존재

제작사만 아는 형식을 사용자가 사용하려면 그 형식을 알아야 하기 때문에 문서를 배포하는 것으로 

https://pymongo.readthedocs.io/en/stable/

PyMongo 4.3.2 Documentation — PyMongo 4.3.2 documentation

이를 이해해보면 아래 코드는 첫번째 매개인수를 필터로해 두번째 매개인수를 토대로 done값을 1로 바꾸겠다는 의미

db.bucket.update_one({'num': int(num_receive)},{'$set':{'done':1}})

 

 

---

실제로 배포하기

 

서버(Server)란?

제공하다(Serve) + 행위자(er) 의미로 클라이언트에게 여러가지 서비스를 제공하는 것을 뜻한다.

 

• 서비스 제공 과정

1. 클라이언트가 서버에게 어떤 서비스를 요청 2. 서버는 요청에 응답해 처리를 수행 3. 서버는 처리 결과를 클라이언트에게 반환 4. 클라이언트는 처리 결과를 받음

 

---

AWS (Amazon Web Service) 란?

아마존에서 개발한 클라우드 컴퓨팅 플랫폼

 

* 컴퓨팅 : 넓은 의미에서 컴퓨터 기술 자원(CPU, RAM, 메모리, 스토리지, 네트워킹 등)을 개발 및 사용하는 모든 활동. 그중 클라우드 컴퓨팅은 인터넷 기반 컴퓨팅의 일종으로, 정보를 자신의 컴퓨터가 아닌 클라우드에 연결된 다른 컴퓨터로 처리하는 기술을 의미한다. 컴퓨터 및 다른 장치들에 공유 컴퓨터 처리 자원과 데이터를 제공해 준다.

 

 

---

우분투 (Ubuntu) 란?

 

우분투를 알기전 그 모체 리눅스(Linux)에 대해 먼저 알아야한다.

리눅스는 높은 하드웨어 스펙을 기반으로 복잡하고 큰 네트워크 시스템을 위해서 만들어진 유닉스의 커널과 명령어 체계를 바꾸어서 일반인들이 보다 사용하기 쉽게 만든 운영체제.

Window, Mac OS와 더불어 가장 대표되는 운영체제지만 둘과 특히 다른점이라면 자유 라이센스를 가지고 있다는 점이다.

 

누구나 무료로 사용하고 수정하여 사용할 수 있기 때문에 이 리눅스 커널을 통해 수많은 사람들이 새로운 운영체제를 개발하고 배포했다. 이렇게 배포된 것 중 하나가 바로 우분투(Ubuntu). 때문에 모체의 명령어인 리눅스 명령어를 쓴다.

어마어마한 리눅스 기반의 OS들

 

 

---

Shall 이란?

우리가 사용하는 git-bash가 shall의 한 종류.

운영체제의 커널과 사용자 사이의 다리 역할. 명령어 해석기(CLI, Command Line Interpreter)

터미널 안에서 사용자로부터 명령을 받으면 그 명령을 해석하고 프로그램을 실행해 주는 프로그램이다.

 

* 커널 (kernel) : 단어 뜻 자체는 알맹이, 핵심이라는 뜻으로 운영체제의 핵심부로 컴퓨터 자원들을 관리하는 역할로 직접적으로 사용자와 상호작용을 하지 않는다. 사용자와 상호작용을 위해서는 쉘이 필요하다. 

 

 

파일질라 란?

파일 질라는 FTP(File Transfer Protocol) 프로그램 중 하나로 쉽게 말하면 파일 전송 프로그램. 개인 컴퓨터와 운영하는 사이트(웹서버)간에 파일을 전송하기 위해서 사용한다. 위에 Shall을 사용해서 로컬과 웹서버 사이에 파일을 전달할 수 있지만 복잡한 명령어를 쓰기보다 사용자 친화적으로 개발되어 있어 더 쉽게 이용할 수 있다.

 

---

서버에 원격접속

ssh -i 키페어 끌어다 넣고 ubuntu@여기주소는 아래 이미지 위치에서 복사한 퍼블릭 IPv4 주소

ssh	Secure Shell의 줄임말로 원격 호스트에 접속하기 위해 사용되는 보안 프로토콜의 명칭
-i 키페어	공개 키 인증을 위한 개인키(ID)가 읽히는 파일을 지정해 비밀키를 읽어오는 옵션
ubuntu@ip주소	ubuntu는 유저아이디 / @ / 서버주소(호스트네임)

 

 

---

서버 세팅하기

파이썬 프로젝트를 넣기전에 이 컴퓨터에 파이썬에 대한 기본 세팅을 해줘야 한다.

 

1. python3를 기본으로 사용하기 위한 세팅

sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

sudo	update-alternatives	--install	/usr/bin/python	python	/usr/bin/python3	10
sudo	update-alternatives	--install	<link>	<name>	<path>	<priority>

sudo	superuser do. 현재 계정에서 root권한을 이용하여 명령어를 실행할 때 사용
update-alternatives	한 서버안에 여러 버젼의 프로그램을 설치할 경우 주로 사용할 버전을 정하는 명령어
--install	등록
link	실행파일의 경로로 /etc/alternatives/<name> 을 가리킨다
name	같은 이름의 다른버전들의 패키지 그룹의 대표격 이름이자 명령어로 사용하는 이름
path	대체 연결할 실행파일의 경로
priority	여러버전들 중 숫자가 가장 높은 것이 우선순위가 된다

 

 

2. 패키지 정보 업데이트

추가 및 변경된 패키지에 대한 정보를 업데이트를 한다. 업데이트 하지 않으면 컴퓨터는 변경사항에 대해 모르기 때문에 일부 패키지를 설치 할 수 없는 상태가 된다.

sudo apt-get update

 

3. pip 3 설치 및 pip3을 기본으로 이용하기 위한 세팅

sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

-y	설치여부 질문에 대한 선입력 (yes)

 

* pip (package installer for Python) 란? 

파이썬(python)으로 작성된 패키지 소프트웨어를 설치 · 관리하는 패키지 관리 시스템으로 해당 명령어를 통해 패키지를 관리할 수 있다.

 

 

4.  80포트로 접근해도 5000포트로 가게하는 명령어 

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

-t	-A	-i	-p tcp	--dport	-j	--to-port
nat	PREROUTING	eth0	tcp	80	REDIRECT	5000

iptables	리눅스상에서 방화벽을 설정하는 도구
-t	????
-A	--append / 새로운 규칙을 추가  : 프리라우팅의 규칙을 추가 (개념 부족 후의 조사 필요)
-i	패킷이 들어오는 네트워크 인터페이스
-p	프로토콜 종류 선택
--dport	목적지 포트번호
-j	규칙에 맞는 패킷을 어떻게 처리할건지 : redirect
--to-port	redirect로 향할 포트 설정

 

 

*보통 명령어 옵션에서 -(싱글대쉬)와 --(더블대쉬)의 차이에 대해선 좀더 조사가 필요

---

프로젝트 업로드

파일질라를 이용해 원격접속하여 AWS 컴퓨터에 프로젝트를 업로드

프로젝트는 가상환경(venv)를 제외하고 아래 셋을 올린다.

static

templates

app.py

 

 

 

---

프로젝트 실행

python app.py

가상환경이 되어있지 않다면 실행되지 않는다. AWS컴퓨터에서도 환경을 만들어줘야하기 때문에 프로젝트를 만들면서 설치했던 패키지를 전부 설치한다.

pip install flask
pip install pymongo
pip install dnspython

이 방법이 IDE의 설정을 눌러 설치하는 방법과 다르게 보이겠지만 사실은 동일한 과정이다.

설치가 되었다면 실행가능.

 

 

 

 

---

서버 ip주소로 접속

서버에서 특정 포트를 열어 접속을 가능하게 한다.

 

 

---

원격 접속 종료에도 계속 실행

nohup python app.py &

nohup	python app.py	&
nohup	프로세스	백그라운드

nohup	no hang up의 줄인말로 세션이 종료되어도 실행을 멈추지 말라는 명령어
프로세스	끊이기 않고 실행될 부분
&	백그라운드에서 실행될 것을 의미하는 앰퍼샌드

 

강제종료 : 4가지 명령어가 합쳐진 명령어로 구분은 | (버티컬바,파이프,작대기)

ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

ps	-ef	grep	'python app.py'	awk	'{print $2}'	xargs	kill
1개의 명령어		1개의 명령어		1개의 명령어		1개의 명령어

ps -ef	ps	process의 약자
	-ef	옵션 -e와 -f가 합쳐진 것으로 -e :  커널 프로세스를 제외한 모든 프로세스를 출력한다 -f :  포맷 전체를 보여준다
grep	해당 문자열이 포함된 행을 출력한다, global / regular expression / print 머리문자를 따온 명령어
awk	오크. 원하는대로 필터링하거나 추가하는 기타 가공을 통해 행과 열로 정리해 결과물을 만든다.
xargs	eXtended ARGuments. 한 번에 많은 작업을 일괄로 처리할 수 있게 해주는 명령어

이를 해석하자면

"현재 실행중인 프로세스 중에 python app.py이 포함된 행을 출력해서 2번째 열 값를 뽑아 그 기준으로 프로그램을 종료시키는 작업을 일괄처리한다"

가 된다.

 

 

---

도메인 연결

도메인 이란?

사이트 주소가 ip주소라면 평소 사용하기 쉽지 않다. 그래서 우리가 인지하기 쉬운 이름으로 연결해주어 사이트 사용할 수 있게 해주는데 이게 바로 도메인.

 

생활코딩 사이트의 도메인