수업은 지난주에 끝났는데... 마지막 5주 차 일지를 쓰는 게 어찌나 귀찮던지..
기록한 필기 자료를 복붙 해도 되는 것인데도 말이다.
개인 블로그라서 이번에는 이 정도로 쓰고 말았지만, 다음번에 개발일지를 쓰게 된다면, 약간 체화해서 나도 나만 알아볼 수 있을 거 같은 요약본으로 한번 써보고 싶다.
지금은 나만 알아볼수 있을 거 같은 복잡본 버전이다. ㅎ
가비아 접속해서 1년에 550원하는 도메인을 샀다.
파일질라 다운로드 받았다.
기본 세팅 끝..
마지막 5주 차에서는 앞에서 배웠던 것들을 한번 복습하는 차원에서 버킷리스트 사이트를 구현해본다.
bucket이라는 폴더에 프로젝트 만들고, static, templates 폴더 만들어주고, app.py 파일 만들어주고, templates에 index.html 파일을 만들어준다.
패키지 설치 - flask, pymongo, dnspython, requests 그리고 나는 certifi까지
기록하기 먼저 만들어보자 (post)
요청 정보 url =/bucket , 요청 방식 = POST
클라 (ajax) - 서버 (flask) : bucket
서버 (flask) - 클라(ajax) : 메시지를 보냄 (기록 완료!)
단, 서버에서 한 가지 일을 더 해야 함
번호를 만들어 함께 넣어주는 것. 그래야 업데이트가 가능하다.
컴퓨터는 문자열보다는 숫자를 인식하는 게 더 좋아서 그런가,,?
264번 완료했다. 256번 완료했다 이런식으로?
일단 app.py 뼈대에 살을 붙여보자.
Count = len(bucket_list) + 1
버킷이 한 개씩 쌓이는 것을 카운트해달라는 요청이다
이제는 보여주기를 만들어보자 (get)
저장한 데이터를 그대로 가져와서 보여주는 거.
요청 정보 url =/bucket , 요청 방식 = GET
클라 (ajax) - 서버 (flask) : 없음
서버 (flask) - 클라(ajax) : 전체 버킷리스트를 보여주기
서버 작업을먼저 진행해준다
이제 클라이언트를 만들러 index.html..
buckets로 받아주기로 했기 때문에 잘 작동이 되는지콘솔 로그에찍어본다.
데이터를 하나만 더 입력해보자.
홈페이지에 버킷을 쓰고 기록하기 버튼을 누르면 된다.
num도 잘 붙고 데이터도 잘 뜨는 걸 확인할 수 있다.
이제 이게 콘솔 로그에 찍히는 게 아니라 페이지에 뜨고, 완료되면 줄 긋기도 할 수 있어야겠지..
rows를 쓰는 건 기존과 동일하다.
각각 보여줘야 할 항목들을 반복문을 써서 지정해준다
temp_html을 써야 하는데
이때, 버킷을 완료했으면 줄을 그어야 하고, 완료하지 못했으면 옆에 완료 버튼이 함께 있어야 한다.
그래서 if else 구문을 써준다.
done==0 는 완료를 하지 못했다면, 이라는 뜻이다. Done은 한 건데 0번 한 거니까 안 한 거.
거기에는 버튼이 붙어있는 걸 가지고 와서 붙여 넣기 해주면 되는데,
유저로부터 받을 정보 값을 각각 넣어주고, 문법을 완성한 뒤에,
$(‘#id값 ‘).append(temp_html) 을 써준다.
그다음 하단에 있던 예시 양식은 싹 지워준다.
실행을 해보면최종 화면은이렇게 뜬다.
마지막 업데이트!
완료 버튼을 누르면 줄이 그어지면서 업데이트되는 거.
이번 시간에 새롭게 배우는 부분이다.
요청 정보 url =/bucket/done , 요청 방식 = POST
클라 (ajax) - 서버 (flask) : num(버킷 넘버)
서버 (flask) - 클라(ajax) : 메시지를 보냄 (버킷 완료!)
dbprac의 바꾸기 예시를 활용한 업데이트.
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
users가 아니고 bucket이고,‘num’ : num_receive , $set : {‘done’ : 1}으로 수정해주는데,
여기서 유의할 사항이 있다.
num_receive로 받아오는 것은 숫자 데이터인데, 클라이언트의 요청과는 다르게 이상태로는 문자열로 인식해서 데이터를 저장해버린다.
그래서 숫자로 인식할 수 있도록 바꿔주어야 하는데 이때 int를 쓴다.
’num’ : int(num_receive) 가 되어야 하는 것이다.
int는 정수 라는 의미이다.
사이트의 형태를 보면, 버킷을 쓰고, 그 옆에 완료를 누르면 done 0 이 done 1로 바뀌면서 numbering 된 값이 들어와야 한다.
버킷의 경우에는 위에 이미 num 처리를 해줬다.
검사 창을 띄워서 요소만 봐도 번호가 매겨지는 것을 알 수 있다.
done_bucket함수에도 num을 그냥 박아버려야 한다.
같이 세트로 인식 될 수 있게.
새로고침이 한번 되면 될거 같으니 window.location.reload()를 쓰자.
완료를 눌렀을 때 버킷 완료! 의 메시지가 뜬다.
그리고 줄을 그어서 버킷을 완수했음을 보여준다.
아직까지는 코드를 외워서 한다기보다는 코드를 보고 쓸 수 있을 정도의 이해도만 있으면 된다고 한다.
가령 여기에는 이 코드를 써야겠다 라는 생각만 하면 된다는 것이다.
그 정도만 되어도 지금 단계에서는 충분하다고 한다.
이제 팬명록에 도메인을 붙여서 배포해보자
지금부터는 코딩보다는 마우스 클릭을 통해 설정하도록 하자.
내 프로젝트를 서버에 올리자.
언제나 요청에 응답하려면, 컴퓨터가 항상 켜져 있고 프로그램이 실행되어 있어야 하고
모두가 접근할 수 있는 공개 주소인 공개 IP주소로 나의 웹서비스를 접근할 수 있도록 해야 하는데..
컴퓨터를 켜 두려고, 공개하려고, 산 것이 아니기 때문에,
다른 방법.
외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있다.
인터넷상에 있는 남의 컴퓨터를 빌려서 계속 돌려준다는 것이다.
첫 시간에 가입했던 AWS라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용한다.
AWS 에서 컴퓨터를 빌려서 써보자. 이 컴퓨터는 리눅스 os 컴퓨터이다. 오픈소스.
로그인을 하면 이렇게 뜬다. 영어로 뜬다면 한국어로 다 바꿔주자.
요샌 참 편리해..
지역도 서울로 되어 있는지 봐야 한다.
서울 어딘가에 있는 컴퓨터를 빌려 쓴다고 이해하면 된다.
인스턴스를 누르면, 아무것도 없다.
인스턴스 시작을 누르면, 가상 머신을 설정해서 빌릴 수가 있다.
강사님과 창이 다른 맥…
강사님은 Ubuntu Server 20.04 이거를 선택해서 빌리라고 한다.
그렇지만 나의 창은 전혀 다르게 뜨는디…?
물론 내용은 같으니까 잘 찾아보기만 하면 금방 적응 가능하다
오히려 원페이지 형태로 간결한 사이트가 된 거 같긴 하다
일단은 똑같이 해볼까… 아니면 더 최신을 해야 할까..
프리티어 사용 가능이라고 써둔 것은 한대까지는 무료라고 한다.
두대를 물렸을 경우 한대 끄고 한대 켜고 하는 식으로 무조건 한대로 사용하게 한다.
더 최신 버전이 있지만, 일단 강의와 같은 컴퓨터를 빌려보자.
검토 및 시작을 그대로 눌러주면 된다고 하는데 여기는 그런 거 없다…
인스턴스 유형에는 프리티어 사용 가능한 거 그대로 쓰고.
키 페어, 네트워크 설정도 해주어야 한다..
뭐라고 해야 될까..
이미 이 서버의 이름은 나의 웹서버이고,
키 페어는 선택하게 되어있으니깐 새 키페어를 생성해서 넣어주면 되지 않을까..?
나는 다른 모양으로 뜨지만 어쨌거나 원리는 같을 거니까
키 페어 이름을 정하라고 한다.
정한 다음에 키 페어 다운로드를 누르고 인스턴스 시작을 누르면 인스턴스가 시작한다고 하는데,
내 경우에는 키페어 생성을 누르니 pem파일로 다운로드 폴더에 다운로드가 자동으로 되어서 그거 바탕화면에 옮겨두고, 다시 원래 창으로 돌아왔다.
이때 손대는 거 없이 그냥 인스턴스 시작을 누르면 되나 보다..
스토리지 구성은 뭔지, 보안 그룹은 뭘 해야 하는지 모르겠지만. 일단 맨 하단에 있는 인스턴스 시작을 눌러보겠다..
어쨌거나 화면은 다르지만,
뜨는 건 비슷하다.
인스턴스 보기를 누르면, 실행중으로 바뀐다.
마우스 오른쪽 버튼을 눌러보면 인스턴스 중지와 종료가 있는데,
중지는 컴퓨터를 끈 것이고, 종료를 눌러야 컴퓨터를 반납하는 것이다.
새로 하나 만들고 싶다면 종료를 한 후 반납한 다음에 새로 만들면 된다
이제 접속하는 거 까지 해보자.
윈도우는 git bash 켜주고,
맥은 터미널을 열면 된다.
맥은 사전작업이 조금 필요하다.
$ sudo chmod 400 한 다음에 바탕화면에 저장되어있는 pem 파일을 끌어다 붙이면 된단다.
엔터 치고 맥 비번 입력하면 끝난다.
윈도우는 같이하면 되는데 지금부터는 윈도우와 맥이 동일하다.
치라는 대로 쳐보겠다.
ssh -i 치고 그 뒤에 키 페어 갖다 넣은 후에, ubuntu@ 쓰고, AWS 창으로 가서 퍼플릭 IPv4 주소를 복사해서 붙인다. 그다음 엔터 치면 된다.
(윈도우는 붙여 넣기 할 때 마우스 오른쪽 클릭해서 paste 하란다. 뭐가 다른가? )
뭐가 떠야 되는데 나는 안 뜬다…
이게 어떻게 된 걸까… 흠…
처음부터 다시 해보니 된다. 띄어쓰기의 문제였던 걸까…
완료되면 ubuntu@ip-아이피주소 : 가 뜬다.
산 컴퓨터에 원격 접속을 한 것이다.
리눅스는 마우스로 하는 거 없고 다 명령어로 하게 된다.
폴더를 만드는 것
mkdir명령어를 써주면 된다.
Sparta 폴더를 만들어줘 보자.
mkdir sparta를 치고 엔터 치면 아무 일도 일어나지 않은 것처럼 보이지만,
리눅스에서는 아무것도 일어나지 않은것 같은 게 잘 된 거라고 한다.
ls를 눌러보면 폴더가 잘 생성된 것을 확인할 수 있다.
그 폴더 안에 들어가 보려면 cd sparta라고 치면 되고,
나오려면 cd.. 하면 나온다.
외워서 쓴다기보다는 자기가 쓰는 것만 쓰는 거라 기능은 일단 이 정도만 알고 있어도 괜찮단다.
산 컴퓨터에 각종 세팅을 해보겠다.
업그레이드, DB설치, 명령어 통일 등을 해줘야 본격적으로 이용할 때 편리하다
설치할 때도 설치 명령어들이 있다.
메모장에
필요한 명령어를 복사 붙여 넣기.
한 줄 한줄 복사 붙여 넣기 엔터로 설치를 해주자.
뭔가 해커가 된 거 같은 느낌쓰.
# python3 -> python (파이썬 3이라고 치지 않고 파이썬이라고 칠께)
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
# pip3 -> pip (패키지 설치할 때 필요한 거 설치)
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1
# port forwarding (로컬 호스트 5000을 떼는 명령어)
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
# 강제 종료
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
설치가 끝나면, 파일질라를 켠다.
바탕화면에 만들어둔 sparta 폴더의 경로를 찾아서 띄워 둔다.
왼쪽이 내 컴퓨터, 오른쪽이 내가 산 컴퓨터
그다음 파이참을 켠다.
팬명록을 올릴 거기 때문에 homework 폴더를 열어줘야 한다.
열어서 업로드할 테스트 python 파일을 하나 만들어 준다.
test.py
만든 다음에 내용은 별거 없이 그냥 print('hello sparta!!’)를 저장한다.
파일질라로 들어가서 homework 폴더 안에 있는 test.py 파일을 올릴 건데
일단 내가 산 컴퓨터를 오른쪽에 띄워야 한다.
좌측 상단의 사이트 관리자를 열어서 새 사이트를 누른다. 영어로는 New site ~!
창을 열면 알 수 없는 말들을 하는 거 같지만 차근차근 필요한 부분을... 따라 해 보면 되니 안심..
이름을 아무거나 바꿔주면 되는데, myec2 하길래 나도 그냥 따라 쓰기…
그다음에 FTP 프로토콜을 SFTP로 바꿔주고 호스트는 아까 public ipv4를 복사해 붙여 넣어준다.
포트는 22번이라고 한다. 그건 어디서 볼 수 있는 것이지…?
정해져 있다고 한다.
로그온은 키파일
사용자는 ubuntu
키파 일은 아까 바탕화면에 저장했던 pem 파일 넣어주고 연결해주면 된다.
암호 묻고 뭐라뭐라 하는데 그냥 확인.
이렇게 뜨는 것을 알 수 있다.
아까 만든 sparta 폴더도 볼 수가 있다.
sparta폴더에 들어가서 test.py를 끌어다 넣으면 끝.
끌어다 넣은 파일을 실행을 하려면, 다시 터미널을 띄운다
ls 하면 sparta 폴더를 확인할 수 있고,
cd sp만치고 탭을 누르면 뒤에 자동완성된다
그걸 누르고 ls를 쳐보면 test.py가 잘 들어와 있음을 확인해볼 수 있다.
이제 만든 것들을 차차 올려보자
Test.py는 이제 지워버리자.
팬명록을 올리는 거니, homework 폴더에서 app.py , static, templates 이렇게 세 개만 올릴 거다.
Python app.py 라고 치면, flask가 안 깔렸다고 하는데,
깔아주자.
Pip install flask 라고 ..!
설치가 끝났으면, python app.py 라고 쳐보자
그러면 pymongo도 설치해달라고 한다..
pip install pymongo
pip install dnspython
두 개를 깔아준다.
나는 혹시 몰라서 certifi도 깔아주라고 했는데 이미 깔려있다고 ^^
이제 다시 python app.py를 실행해보자
퍼블릭 ip 주소를 복사한 다음에 뒤에 :5000을 쳐보면…!
아직은 안된다… ㅎ
5000번으로 접속할 수 있는 구멍을 안 열어준 상태라서 그렇다…
보안으로 들어가서 보안 그룹에 띄워져 있는 퍼런색 주소를 클릭하면
인바운드 규칙 어쩌고가 뜬다.
인바운드 규칙 편집을 클릭. Edit inbound roles
규칙 추가를 해서 포트범위에 5000을 쳐준다
소스 유형은 anywhere-ipv4
규칙 추가해서 하나만 더 열고 가자
포트 범위 80
소스 유형은 anywhere-ipv4
그대로 규칙 저장 후
다른 주소창에 퍼블릭 주소 :5000 을 넣어보자!
그러면 팬 명록이 뙇하고 뜬다!
5000을 빼도 된다.
핸드폰으로도 되는지 확인을 해보자
폰으로도 잘 뜬다 ^_____^
Naver.com을 치면 실행이 되는데 80 도 된다. 5000으로는 안되고.
그러면 우리는 80으로 받아서, 5000으로 바꿔줘도 되겠지.
아까 설치했던 마지막 줄 바로 그 말..
터미널(원격 접속)을 끄면, 창도 꺼진다…
이제는 터미널을 꺼도 창이 꺼지지 않게끔 작업을 해주자
처음 터미널을 켜었을 때, 화살표 윗키를 누르면 마지막에 쳤던 게 그대로 뜬다.
갈 때마다 칠 필요가 없다.
그다음에 ls 쳐서 sparta 폴더 찾고, cd sparta 해서 그 폴더 안에 들어가서 ls를 친다.
그러면 그 폴더 안에 있는 것들이 쭉 뜨는데, app.py 가 확인이 됐으면,
Python app.py를 쳐서
실행해본다.
Ctrl + c를 누르면 이게 꺼져버리는 걸 볼 수 있다.
그 상태에서
nohup python app.py &
치면 이제 꺼지지 않는다.
이제는 이걸 끌 줄 모르는데 ㅠ
이걸 강제 종료하기 코드 스니펫 복붙 하자.
# 강제 종료
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
외우는 게 아니라 메모장 파일을 저장해서 관리하자
파이참에서 작업한 것들을 , 파일질라를 통해서 서버에 만들어둔 폴더에 올리고,
nohop으로 켜 두면 된다.
작업을 마저 못해서 수정을 해야 하는 경우에는 강제 종료하고
서버에 올려둔 거 싹 지운 다음에 작업을 마무리 한 뒤에 다시 올려서 nohop으로 켜 두자
일단 도메인을 붙이자.
그다음 수정 프로세스도 한번 경험해보자며 ..
가비아로 가서 로그인 한 뒤에 dns 관리를 켜자.
호스트 이름은 @로 내버려두고, 퍼블릭 ipv4 값을 ip 주소에다 넣자 확인을 눌러주고, 저장을 눌러줘야 한다.
내가 산 도메인을 한번 쳐보자
잘 뜬다…!
ㅋㅋㅋ
안 뜨는 경우에는 20~30분 정도 걸린다.
가비아는 네임서버를 운영하는 곳인데, 전화번호부 매칭 해주는 것 같은 일을 한다.
나는 폰에 바로 뜬다.
이 링크를 카톡이나 페북에 공유했을 때 예쁘게 띄우려면 og title og image를 넣어줘야 하는데
그걸 한번 해보자
Homework - templates- index.html 파이참을 켜서,
head부분
Meta name 하단에 코드 스니펫 복붙.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
이런 내용이다.
title은 사이트 제목이니까 가서 팬 명록이라고 하면 되고,
description은 응원 한마디 남기고 가세요!라고 바꿨고..
이미지 url 부분에는 내가 하단에 넣었던 이미지의 url을 그대로 가지고 온다
다른 거 넣어도 되겠지만..
어쨌든 이렇게 수정한 걸 올리려면,
기존에 잘 돌아가고 있던걸 끄고,
파일 바꿔치기해서 다시 돌려줘야 한다.
바꿔치기 후 pc카톡을 켜서 도메인을 한번 붙여 넣어 보자
그 뒤로 만약 수정을 하고 싶다면, 수정을 하면 되는데 적용이 안 되는 경우가 있다.
카카오톡 입장에서는 일일이 크롤링을 할 수가 없어서 초기에 저장된 거를 계속 띄워준다.
그럴 때 초기화하는 주소가 있는데, 수업자료를 참고하자.
- 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
- 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
사이트 들어가서 그냥 내 도메인을 넣으면 초기화된다.
과제는 만든 팬명록 도메인 제출하기.
5주 차 수업 끝..
정리를 해보자면!
웹서비스를 만들 때 내 눈에 보이는게 있어야 함. Html css javascript
내눈에 보이는 걸 건네줄 server가 필요한데,
3주 차에 파이썬이라는 언어에 대해 공부했고 , 데이터베이스에 대해 공부했고,
4,5주 차에 서버를 만들어서 만든 거를 실제로 인터넷 환경에 배포했다.
이 과정을 한 번에 다 기억해서 하는 경우는 없다.
여러 번해보면 지식이 내것이 된다
SQL이랑 병행하면서, 귀차니즘과 싸우면서, 질질 끌었는데..
처음이라 세세하게 기록하면서 듣다보니 이렇게 되어버린듯...
이제 한번 더 들으면서 쭉 따라가보면 1주차때보다는 좀 빨리 들을수 있지 않을까...
'개발일지' 카테고리의 다른 글
| [내일배움단] 웹개발 종합반 4주차 (feat. 스파르타코딩클럽) (0) | 2022.08.24 |
|---|---|
| [내일배움단] SQL 데이터 분석 강의 4주차 (feat. 스파르타코딩클럽) (0) | 2022.08.21 |
| [내일배움단] 웹개발 종합반 3주차 (feat. 스파르타코딩클럽) (0) | 2022.08.14 |
| [내일배움단] SQL 데이터 분석 강의 3주차 (feat. 스파르타코딩클럽) (0) | 2022.08.10 |
| [강의 후기] 나는 개발자가 되고 싶은걸까? (0) | 2022.08.10 |
댓글