Week I learned 5주차

개발일지 5주 차

기간:3/1~3/3

지난 1주 차에 만들었던 나만 볼 수 있는 홈페이지를

모두에게 공개해보기로 했다.

 

1주 차

Week I learned 1주 차 (tistory.com)

Week I learned 1주차

내 홈페이지를 내 컴퓨터 없이 돌리기 위해서 가상 컴퓨터를 실행하고 서버를 세팅한 후

포트를 열어 모두에게 공개한다.

 

그러기 위해선, python, filezilla, git bash, robo3 T, EC2 server들이 필요하다.

이 모든 게 준비됐다면, 이제 내가 사람들에게 공개할 웹페이지를 만들어야 한다.

 

여기서 flask와 pymongo가 쓰이는데 자세한 내용은 4주 차에서 볼 수 있다.

Week I learned 4주 차 (tistory.com)

Week I learned 4주차

 

나만의 웹페이지가 준비되었다면 이제 EC2 서버로 가서 인바운드 규칙을 보면 ssh 포트만 열려있을 것이다.

여기에 내가 공개할 서버 포트들을 추가해주면 모두가 볼 수 있는 기틀이 만들어진다.

 

추가해야 할 포트

(포트라고 쓰인 곳에 있는 숫자를 포트 범위에 넣고 소스를 전체 공개로 한다)

 

1. 80 포트: HTTP 접속을 위한 기본 포트

2. flask 기본 포트

client = MongoClient('mongodb://test:test@localhost', 포트)

3. 외부에서 mongoDB 접속을 하기 위한 포트

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

 

주의할 점

새로 서버를 만들면 keypair을 갖는데 이건 매우 중요하니 잘 간직하고 있어야 한다.

서버를 열 때나 filezilla에서 업데이트를 할 때 등 이 key가 매우 중요하다.

 

Filezilla

내 서버에 파일들을 업로드하기 위해

Filezilla에 들어가서

윗 이미지를 클릭한 뒤 내가 첨에 만들었던

서버에 들어간다 이름은 아무거나 지어도 무관하다.

 

그 후 왼쪽에 있는 파일(내가 만든 html, python, image 파일 등등)을

오른쪽 내 서버로 옮겨줄 건데 templates를 만들지 않고 그냥 옮기면

홈페이지 에러가 나니 참고하자.

HTML -> templates

image -> static

static에 넣은 이미지는 아래와 같이 og이미지로 표시가 된다.

이미지는 바꿀 수 있지만, 업데이트를 위해서는 git bash부분을 참고하자.

 

ogimage

 

그리고 내 파일 들을 myfile에다가 넣었다고 가정하자.

filezilla

 

Git bash

모든 준비가 끝났다면 가상 컴퓨터를 이용해 ssh 접속을 끊어도

계속 실행되게 만들어 본다.

 ssh -i (keypair 받을 것을 여기 넣는다) ubuntu@서버 주소를 여기 넣는다.

 

이렇게 실행하면

ubuntu@아이피:~$ 이렇게 나오는데 여기서

mkdir을 이용하여 myfile 폴더를 만들고 ls를 쳐보면은

myfile폴더가 생긴 것을 확인할 수 있다.

 

myfile로 들어가려면 cd myfile을 쓰면 되고 나가려면 cd.. 을 입력하면 된다.

하지만 여기 서버엔 flask와 pymongo가 없기 때문에

pip install을 이용해서 두 개를 깔아주고 nohup python app.py &을 이용해서

서버를 실행시킬 수 있다.

이렇게 하면 내가 컴퓨터를 꺼도 서버는 계속 돌아간다.

 

그런데 만약 이제 업데이트를 하고 싶다면

gti bash에서

ssh -i (keypair 받을 것을 여기 넣는다) ubuntu@서버 주소를 입력하고

ps -ef | grep 'app.py'를 입력하면은 아래와 같이 ubuntu와 날짜 사이에

pid(프로세스 번호) 값이 있는 것이 보일 것이다.

그 번호들을 kill -9 pid값을 입력해서 모두 죽여준 후

 

pid

Filezilla에서 데이터를 전부 갈아주고 다시 git bash에서

nohup python app.py &을 이용하여 실행시키면 된다.

 

이렇게 완성된 나의 첫 웹서비스

내가 만든 첫 웹서비스 (jinhok.shop)

원페이지쇼핑몰

 

Robo3T

저기에 이름, 수령 선택, 색깔, 주소, 폰넘버 등을 입력하면 홈페이지 아래에도 기재되지만

내 db에 저장이 된다.

robo3T

내 db에 있는 데이터를 내가 직접 수정할 수도 있지만,

3주 차 -> 기본 용어에 가면 데이터 찾기, 삭제, 업데이트, 등등 여러 가지 기능들이 가능하다

Week I learned 3주 차 (tistory.com)

Week I learned 3주차

 

여기서 개발일지 5주 차를 마치겠습니다.