[수업 목표]

  1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
  2. '버킷리스트'를 완성한다.
  3. EC2에 내 프로젝트를 올리고, 자랑한다!

웹페이지 배포하기

그 단계를 위해 필요한 프로그램과 사이트를 먼저 정리해 보려 한다.

① Filezilla 설치하기

https://filezilla-project.org/download.php

② 가비아 가입 및 도메인 구매

https://www.gabia.com

 

웹을 넘어 클라우드로. 가비아

그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브

www.gabia.com

③ AWS EC2 서버 사기

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 

 

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2

 

ap-northeast-2.console.aws.amazon.com

1) 버킷리스트 

오늘 다시 한번 연습해본 [POST], [GET] 요청하기. 그중 추가할 부분만 정리해보려 한다.

※아마 이 부분은 강의를 듣지 않으신 분들은 무슨말인지 헷갈리실 수 있기 때문에 그냥 넘어가 주셔도 괜찮습니다 :)

 

① 서버를 만들때 버킷리스트마다 번호를 부여했는데, 그 번호가 [완료 버튼 POST] 서버를 만들 때는 문자열로 인식이 되기 때문에 num_receive 형식을 int(num_receive)로 바꿔주는 작업이 필요했다. 

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form["num_give"]
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

② 그리고 위의 코드에서 보듯이 완료하지 않은 상태일때 0 값을 갖게 되는 'done'을 완료 버튼을 눌렀을 때 1로 업데이트하도록 만들었다.

 

 

2) 내 프로젝트를 서버에 올리기

  • 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줘야 한다
  • 언제나 요청에 응답하려면, 1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야 하고, 2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야 함
  • AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용

 

① AWS 서버 구매하기 (링크는 제일 상단 참고!)

  • 여러 개의 OS 중 오픈소스인 리눅스의 Ubuntu를 설치
  • Name을 설정해 주고, Ubuntu를 선택한 뒤 프리티어 중 최신 버전을 선택해 준다!

출처 : 스파르타코딩클럽 웹개발 종합반 강의

 

  • KEY 생성하기(Create new key pair)를 클릭 후, key를 발급 (서버 접속 시 매우 중요!!!)

  • 나머지 체크리스트들을 체크 후, Launch instance를 클릭

 

② 서버 세팅하기

  • 서버 환경 통일하기 (※ 실제 업무에서는 인프라 엔지니어 또는 개발 팀장님이 해두시는 경우가 많다.)
  • 아래와 같은 코드를 터미널 창에 입력해서 필요한 프로그램들을 미리 다운받고 서버를 세팅해 주어야 한다.
# python3 -> python
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
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5002

 

③ 터미널창과 파이질라를 이용해 웹페이지 배포하기

 

이 부분이 가장 헷갈렸던 부분이다. 리눅스 언어를 이용하여 Terminal 창에 입력을 해서 진행시켜야 했는데, 이번이 세 번째 웹 배포다 보니까 뭔가 자꾸 오류가 생기고 할 때마다 헤매는 것 같다. 참고로 오늘 포스팅은 이미 모든 프로그램이 설치되어있고 배포가 되어있는 상태에서 하다 보니 생략된 부분이 많다. (예를 들면, 파이썬 설치 등..)

 

일단 내가 이해한 부분을 차래대로 정리해 보자면,

 

1. Mac 인 경우 Spotlight 검색을 켜고(오른쪽 상단 돋보기 모양 아이콘 클릭) Terminal을 검색 실행시켜준다.

2. Terminal 창이 뜨면, 다음과 같이 입력한다

sudo chmod 400 (여기엔 다운로드하였던 키페어 드래그해서 붙여 넣기) 그리고 엔터!

3. 다음과 같은 화면이 뜨면 맥북 개인 비밀번호를 입력하고 엔터!

4. ssh -i (다시 한번 키페어 드래그) ubuntu@(여기는 AWS 퍼블릭 주소 복붙) 엔터!

저기 퍼블릭 IPv4 주소 숫자부분을 복사해서 @뒤에 붙여주기

5. 중간 과정은 이미 내가 폴더를 만들어 놓고 배포한 상태라 스크린 샷이 없는데 mkdir spart을 입력해서 sparta 폴더를 생성해 준다. 참고로 mkdir 은 폴더를 생성하는 리눅스 언어인데 다음번에 리눅스 관련 언어 정리 포스트를 하면서 다시 정리하도록 하겠다.

 

6. 그런 다음 ls를 입력하면 아래와 같이 sparta 가 뜨는 것을 확인할 수 있다. ls는 현재 위치에서 디렉터리(폴더) 내용물을 보여주는 리눅스 명령어이다.

 

 

7. 이렇게 파일이 만들어진 것을 확인했으면 파이질라를 실행시킨다.

    왼쪽 상단의 스크린 세계 모양 아이콘을 클릭하면 다음과 같은 창이 뜬다.

 

8. My Sites에 myec2라는 파일을 만들어 준 뒤, 다음과 같이 설정을 맞춰 준다. 참고로 Host에는 각자 AWS에 갖고 있는 아까도 복붙 하면서 사용했던 퍼플릭 아이피 주소를 넣어주면 된다.

9. 그렇게 하면 다음과 같은 창이 뜨는데, 왼쪽이 내 컴퓨터 오른쪽이 방금 내가 산 컴퓨터가 된다.

방금 터미널 창을 통해 만들어 두었던 스파르타 폴더에(오른쪽) 내가 올리고자 하는 웹페이지 소스인 static, templates, app.py를 드래그해서 옮겨준다.

 

 

10. 그다음 다시 터미널 창으로 돌아와 아래와 같은 순서로 입력! 

    - cd sparta (sparta 폴더로 들어감)

    - ls (폴더 내용물을 보여줌)

    - python app.py (만들어 뒀던 서버를 실행시켬줌)

    - 그리고 마지막으로 스크린샷에는 없지만 nohup python app.py & 를 치고 엔터를 하면 배포가 완료된다.

 

※ 나의 페이지가 이미 배포가 되어있는 상태에서 정리하려다 보니 뭔가 과정이 깔끔하지 않은 점 양해 부탁드립니다! 

 

11. 이 과정을 마무리하고 브라우저에 [http://내 AWS아이피/]를 입력하면 내가 만들어 두었던 웹페이지가 화면에 뜨는 것을 확인할 수 있다.

 

 

3) 도메인 연결하기

① 도메인 구입/연결

  • 도메인을 구매한다는 것은 네임서버를 운영해주는 업체에 IP와 도메인 매칭 유지비를 내는 것.
  • 가비아라는 사이트를 이용해 도메인을 구입해 놓았다.

 

  • 가비아에서 내 아이피 주소에 원하는 도메인 이름을 설정해 준다.

 

 

4) 웹페이지 수정하고 다시 업로드하는 방법

※ 나는 이미 이전에 같은 도메인에 첫 과제로 만들었던 팬명록 페이지를 올려놓은 상태였기 때문에 다시 새로 만든 웹페이지를 업로드하는 과정이 가장 많이 헷갈렸다. 이 부분을 내가 이해한 방식대로 정리해 보자면!

 

 

1. 위에 정리해 둔 [2) 내 프로젝트 서버에 올리기 -②서버 세팅하기] 과정을 참고하여 1번부터 6번까지 실행시켜 sparta 폴더에 접속해 준다. 그다음 cd spart 엔터, 그 후 다시 python app.py 엔터 실행. 

 

2. 여기가 중요하다! 실행시켜 놓았던 웹페이지를 잠시 꺼주는 역할을 하는 코드를 입력한다. 

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

 

3. 이제 브라우저에 웹페이지 주소를 쳐보면 꺼져있는 것을 확인할 수 있을 것이다.

 

4. 파이질라를 실행시키고 오른쪽 컴퓨터 부분에 있는 원래 있던 파일을 삭제하고, 다시 왼쪽 내 컴퓨터 부분에서 새롭게 업로드할 파일의 static, templates, app.py를 오른쪽 컴퓨터로 드래그해준다.

 

5. 다시 터미널 창으로 돌아와 

nohup python app.py & 엔터 

 

6. 이제 다시 브라우저에서 도메인을 입력해보면 수정된 웹페이지가 배포되었음을 확인할 수 있다.

 

 

5) 과제

내가 만든 도메인 leejincha.shop 을 브라우저에서 열어주면 결과물을 확인할 수 있다.

웹버전
<meta>태그를 통해 만들어 준 og : image

 

 

 

아 쉽지 않다 쉽지 않아! 리눅스 명령어를 입력하는 과정이 너무나 생소하고 헷갈리고 또 commend not found 등과 같은 다양한 에러를 구글링을 통해 해결하며 따라가야 했던 수업이다. 이 부분은 차라리 첫 강의를 수강했을 때 따라만 했기 때문에 오류가 없었는데, 만들어 놓았던 도메인에 똑같은 작업을 반복하려다 보니까 자꾸만 에러가 났던 것 같다.

 

아마도 제 3자의 눈으로 오늘 나의 포스트를 보자면 스킵되어있는 부분이 많아서 (스크린샷을 일일이 하지 못함 ㅠ) 이해하기 어렵게 느껴지실 것 같다. 일단 중요한 부분은 원래 만들었던 웹페이지를 내리고 수정하는 과정이라고 생각하는데, 리눅스 명령어를 잘 입력해서 원하는 폴더에 접근을 해주고, 삭제 코드를 입력해서 페이지를 내려주고, 파이질라에 다시 새로운 파일을 업데이트해주고, 다시 nohup코드로 페이지를 다시 배포해주는 이 과정! (헥헥) 그것을 잘 기억해 주면 될 것 같다.

'항해99 개발 일지 > [0주] 웹개발 종합반' 카테고리의 다른 글

사전시험대비 웹개발 종합반 복습  (0) 2022.11.06
웹개발 종합반 회고록을 마무리하며  (2) 2022.10.21
#항해99 웹개발 종합반 4주차 회고 - Flask, API  (0) 2022.10.20
#항해99 웹개발 종합반 3주차 회고 - Python  (0) 2022.10.19
#항해99 웹개발 종합반 2주차 회고 - jQuery, Ajax  (2) 2022.10.19

+ Recent posts

티스토리툴바