[웹개발 종합반] 5주차

Ariul·2022년 7월 5일
이노베이션 캠프
0
post-thumbnail
  • 이 글은 웹개발 종합반 강의를 수강하고 공부한 내용을 정리하는 용도로 작성되었습니다.
  • 추가학습이 필요한 부분은 ❓이렇게 표시하고 학습 이후 글을 업로드 합니다.

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

프로젝트를 서버에 올리기

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

AWS 서버 구매하기

1) EC2 서버 구매하기

  • Amazon Elastic Compute Cloud(Amazon EC2)
  • 클릭 만으로 내가 원하는 서버(컴퓨터)의 설정을 정하고, 거기에 컴퓨터를 실행시키기 위한 운영체제(OS)를 설치한다.
  • 본 강의에서는 OS로 리눅스의 Ubuntu를 설치한다.

2) EC2 서버 종료하는 방법 (1년 후 자동결제 방지!)

  • 대상 인스턴스에 마우스 우클릭 > '인스턴스 상태' 를 클릭 > 중지 또는 종료 중 하나를 클릭

3) EC2에 접속하기

  • SSH(Secure Shell Protocol)
    • 다른 컴퓨터에 접속할 때 쓰는 프로그램. 다른 것들 보다 보안이 상대적으로 뛰어남.
    • 접속할 컴퓨터가 ❓22번 포트가 열려있어야 접속 가능하다. AWS EC2의 경우, 이미 22번 포트가 열려있다.
  • Window: ssh가 없으므로, git bash라는 프로그램을 이용!
    • gitbash를 실행하고, 아래를 입력!
      ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피
      예) 아래와 비슷한 생김새!
      ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20
    • Key fingerprint 관련 메시지가 나올 경우 Yes를 입력!
    • git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊기.

4) 간단한 리눅스 명령어 연습하기

  • ❓리눅스는 윈도우 같지 않아서, '쉘 명령어'를 통해 OS를 조작한다. (일종의 마우스 역할)
  • 팁! 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나온다.

    [가장 많이 쓰는 몇 가지 명령어]
    ls: 내 위치의 모든 파일을 보여준다.
    pwd: 내 위치(폴더의 경로)를 알려준다.
    mkdir: 내 위치 아래에 폴더를 하나 만든다.
    cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
    cd .. : 나를 상위 폴더로 이동시킨다.
    cp -r [복사할 것][붙여넣기 할 것]: 복사 붙여넣기
    rm -rf [지울 것]: 지우기
    sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
    sudo su: 관리자 권한으로 들어간다. (나올때는 exit으로 나옴)

서버 세팅하기

1) 서버 환경 통일하기

💡 우리는 지금 막! 컴퓨터를 구매한 상태이므로, 여기에 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해줘야 본격적으로 이용할 때 편리하다!

EC2 한방에 세팅하기

# 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 5000

  • 파이썬 (python3 → python)
    python3 명령어를 python으로 사용할 수 있게 하는 명령어

  • pip (pip3 → pip)

    # pip3 설치
sudo apt-get update
sudo apt-get install -y python3-pip

# pip3 대신 pip 라고 입력하기 위한 명령어
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

  • 포트포워딩 (80포트 -> 5000포트)
    80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어

2) filezilla를 실행하여 파일 업로드

  • 폴더 그대로 드래그 & 드롭하여 EC2 인스턴스의 home/ubuntu 폴더에 업로드

3) pip로 패키지 설치하기

pip install flask
pip install pymongo
pip install dnspython

4) AWS에서 5000 포트를 열어주기

  • EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도, AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있다.
    → 그래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 한다.

  • EC2 관리 콘솔 > 보안그룹(영문: Security Group) > Edit inbound rules 선택

  • 두 가지 포트 추가하고 ❓Anywhere-IPv4 클릭
    → 80 포트: ❓HTTP 접속을 위한 기본포트
    → 5000 포트: flask 기본포트

  • 포트 번호 없애기 개념
    - 지금은 5000포트에서 웹 서비스가 실행되고 있다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 한다.
    - http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결된다.

    • 뒤에 붙는 포트 번호를 없애려면?
    • 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 80 포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용.
      *리눅스에서 기본으로 제공해주는 포트포워딩을 사용.

nohup 설정하기

  1. SSH 접속을 끊어도 서버가 계속 돌게 하기

  • 현재 상황: Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않는다.

  • 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기

    # 아래의 명령어로 실행하면 된다
nohup python app.py &

  • 서버 종료하기(=강제종료하는 방법)

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

2) SSH 접속을 종료한 뒤, 접속해보자!

  • 브라우저에서 접속하기

    http://내AWS아이피/

도메인 연결하기

  • 도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것
  • ❓DNS
    설정 클릭 > 호스트 이름에 @, IP 주소에 IP 주소를 입력한다. > 확인, 저장

og 태그

  • static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 head 태그 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
  • 참고! 이미지를 바꿨는데 이전 ogimage가 그대로 나오는 경우?!

👉 그것은 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문.

profile
Ariul
정성과 진심을 담아 흔적을 기록하자💡
이전 포스트

[웹개발 종합반] 4주차

다음 포스트

Git이란?

0개의 댓글