[스파르타코딩클럽] 💻 웹개발 종합 - 5주차 (2) (完)

《 스파르타코딩클럽 웹개발 종합 ―1주차― 》

《 스파르타코딩클럽 웹개발 종합 ―2주차― 》

《 스파르타코딩클럽 웹개발 종합 ―3주차― 》 

《 스파르타코딩클럽 웹개발 종합 ━4주차━ 》

《 스파르타코딩클럽 웹개발 종합 ─5주차 (1)─ 》

---

[ 프로젝트 배포 ]

 - 기존  프로젝트의 경우 결과물을 확인 하려면 app.py를 실행시켜 flask 모듈을 통해 서버를 직접 구동하여 확인 하였음.

 - 프로젝트 배포(웹 서비스 런칭)를 위해서는 다양한 방법이 사용되지만 이번엔 AWS 클라우드 서비스를 통해 배포.

 

[ IP 주소와 포트(PORT) ]

 - DNS (Domain Name System)

- 사실 우리는 브라우저를 통해 웹 서비스에 접속할 때 도메인(URL)이 아닌 IP주소를 통해 접속 하고 있음.

- 그러나 실제 우리가 자주 보는 도메인 형태는 문자와 숫자의 혼용의 형태로 이루어져 있음. (Ex: Google.com, Naver.com...)

- 이는 DNS 시스템을 통해 도메인(URL)을 IP주소로 변환해주고 있기 때문에 가능한 것

 

 - IP (Internet Protocol)

- 인터넷이 통하는 네트워크에서 특정 정보를 수신하고 송신하는 통신에 대한 규악

- PC의 경우 운영체제가 상이하고 프로그램의 경우 구현 언어가 다르다 보니 네트워크를 통신시 이러한 점을 보완하고자

  공통된 통신 규악(프로토콜)이 필요함

- Host to Host 통신, 즉 PC간 송수신 통신을 책임지는 역할을 담당

 

 - IP 주소

- IP 통신에 필요한 고유 주소를 의미

- 통신 기능이 제공되는 기기들이 서로 통신을 할때 식별을 하기 위해 부여되는 고유 번호임

- 2022년 기준 IPv4와 IPv6 두 가지 체계가 존재함

- 서버는 하나의 주소를 가지고 있음 

 

 - 포트 (PORT)

- TCP나 UDP에서 어플리케이션이 상호구분을 하기 위해 사용하는 번호

- 하나의 IP에 여러 포트가 존재하며 하나의 포트에 하나의 프로그램 실행 가능

- IP 내에서 프로세스 구분을 하기위해 사용됨

- 각 프로토콜의 데이터가 통하는 논리적 통로라고 볼 수 있음

- 몇가지 잘 알려진 포트 번호

└ FTP - 20, 21 (TCP)

└ DNS - 53 (TCP/UDP)

└ HTTP - 80 (TCP)

└ HTTPS - 443 (TCP)

└ RDP - 3389 (TCP/UDP)

 

 

[ AWS 서버 구매 & 프로젝트 배포 ]

 - AWS EC2

- 공식 홈페이지 가이드 : https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/concepts.html

- EC2 (Elastic Computer Cloud) : AWS에서 제공하는 클라우드 컴퓨팅 서비스

- 아마존으로부터 한대의 컴퓨터를 임대하는 것

- AWS에서 제공하는 URL(Public DNS)을 통해 컴퓨터(서버)에 원격 접근 및 제어 가능

 

- AWS EC2 서버 구매하기

① AWS 계정을 생성한다 👉링크

② AWS EC2 콘솔 페이지 접속한다  👉링크

③ 콘솔 페이지에서 인스턴스 시작 버튼을 클릭한다

EC2 콘솔 페이지

 

④ 본인에게 맞는 AMI를 선택한다. 

     - AMI (Amazon Machine Image) : 서버에 필요한 OS와 여러 소프트웨어들로 구성된 템플릿

     - 운영체제를 선택하는 단계이며 크게 리눅스와 윈도우 OS 중에 선택할 수 있음

     - '프리 티어 사용 가능 ' 문구가 적힌 AMI의 경우 1년간 무료 사용이 가능함

나는 강의를 따라가기 위해 Ubuntu 18.04 타입을 선택했다.

 

⑤ 인스턴스 유형 선택

     - 인스턴스 유형 : 해당 인스턴스의 CPU, 메모리, 저장공간, 네트워킹 용량 등의 구성단계를 필요에 맞게 선택

프리 티어인 t2.micro를 선택했음

 

⑥ 인스턴스 시작 검토 → '시작하기' 버튼 클릭

 

⑦ 기존 키 페어 선택 또는 새 키 페어 생성하기

     - 키 페어 : 타인의 접근을 제한하고 사용자 본인의 인스턴스에 안전하게 접근할 수 있도록 생성하는 키

     - 키 페어는 공용 키(Public Key)와 개인 키(Private Key)로 구성되어 있으며 이를 통해 인스턴스에 접속 가능하므로

       보안이 확보된 공간에 저장해야함

키 페어 이름은 본인이 임의로 결정한다.

 

⑧ 생성된 인스턴스 인바운드 규칙 변경

     - 본인의 인스턴스 선택 > 보안 > 보안그룹 클릭

EC2 콘솔 > 인스턴스

     - 보안그룹 > 인바운드 규칙 편집 클릭

 

     - 인바운드 규칙 편집창에서 '규칙 추가' 버튼 클릭 후 5000, 80, 27017번 포트 주소 '규칙 저장'

80포트: HTTP 기본포트, 5000포트: flask 기본포트, 27017포트: mongoDB 접속 포트

 

- ⑧번까지의 과정을 완료하면 본인의 인스턴스 생성이 완료 된 것으로 EC2 콘솔에서 자세한 확인이 가능

 

⑨ EC2 서버 종료 (1년 후 자동 결제 방지)

      - AWS의 프리티어 인스턴스의 경우 1년간 무료로 제공되지만 이 후 자동결제되므로 원치 않을 경우 서버 종료

      - 1) 해당 인스턴스 우클릭 후 '인스턴스 중지' → 말 그대로 실행되고 있는 가상 서버를 임시 중지 상태로 변경

      - 2) 해당 인스턴스 우클릭 후 '인스턴스 종료' → 실행되고 있는 가상 서버 중지 후 서버 종료

 

- AWS EC2 서버 세팅

① FileZilla 프로그램 설치하기

     - FileZilla 공식 홈페이지 : https://filezilla-project.org/

      └ 1) Download FileZilla Client (All platforms) 클릭

           2) (본인 OS 사양에 맞는) Donload FileZilla Client 클릭

           3) 가장 왼쪽에 있는 FileZilla Download 버튼 클릭 후 설치

     - FileZilla : 오픈소스 자유 소프트웨어 FTP 클라이언트로서 FTPS 프로토콜 지원, AWS 인증서 로그인 지원

     - FTP (File Transfer Protocol) : TCP/IP 네트워크 상에서 PC들이 파일을 교환하기 위해 고안된 통신 규약(프로토콜)

 

② FileZilla와 원격서버 연결

     - FileZilla 실행 후 상단의 'File' 밑의 아이콘 클릭

FileZilla 실행시 초기 화면

     - 아이콘 클릭시 'Site Manager' 창 전환 'New site' 클릭 후 'Protocol', 'Host', 'Port', 'Logon Type', 'User', 'Key file' 설정

설정 세팅 후 Connect 버튼 클릭!

 

③ FileZilla를 이용하여 원격서버에 파일 전송

     - 배포할 프로젝트의 파일들을 선택 후 드래그 하여 원격서버의 폴더로 이동 

 

- AWS EC2 접속하기

① SSH를 사용하여 Linux 인스턴스에 연결 (1)

     - SSH (Secure Shell Protocol) : 원격 호스트 컴퓨터에 접속하기 위해 사용되는 인터넷 프로토콜

       기본 포트는 22번을 사용하며 보안이 상대적으로 뛰어남 

     - 인스턴스 생성시 AMI를 Ubuntu로 선택하였는데. Ubuntu는 Linux 커널을 기반으로 한 배포판임

인스턴스 > 보안 > 인바운드 규칙 > 포트범위 확인(22번 포트: 생성시 자동 추가)

 

① SSH를 사용하여 Linux 인스턴스에 연결 (2)

     - MAC OS : MAC은 ssh가 있기 때문에 명령어로 바로 접근 가능

       └ 1) 터미널 열기

             2) 키 페어 접근 권한 변경하기 

# sudo chmod 400 키페어 위치 경로
$ sudo chmod 400 /path/my-key-pair.pem

             3) SSH로 접속하기

# ssh -i 키페어 위치 경로 ubuntu@인스턴스 퍼블릭 IPv4 주소
$ ssh -i /path/my-key-pair.pem ubuntu@15.164.221.243

EC2 콘솔 > 인스턴스 > 퍼블릭IPv4주소 확인 가능

 

     - Window OS : Window는 ssh가 없으므로 git bash 프로그램 이용

       └ 1) gitbash 실행

             2) SSH로 접속하기

$ ssh -i 키페어 위치 경로 ubuntu@인스턴스 퍼블릿 IPv4 주소

            3) git bash 종료시 exit 명령어를 입력하여 ssh 접속을 먼저 끊어주기

실제 Git Bash를 통한 SSH 접속 모습

 

② 서버 환경 통일 해주기

      - SSH를 통해 원격 서버에 접속하여 파일들을 실행할 경우 편의성과 통일성을 위해 초기 설정이 필요

       └ 1) 한국시간 세팅 : EC2 컴퓨터의 시간대를 한국 시간대로 설정하는 명령어

$ sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

             2) 심볼릭 링크 생성 : python3 및 pip3 명령어의 심볼릭 링크 생성

# python3 명령어를 python으로 입력하기 위한 심볼릭 링크 설정
$ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# 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

             3) 포트 포워딩 설정 : 80포트로 들어오는 요청을 5000포트로 연결해주는 명령어

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

포트 포워딩 : 80포트는 http 기본 포트이기에 접속 IP주소 뒤 포트번호 붙일 필요x

             4) mongoDB 설치 

# MongoDB - install
$ wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
s udo apt-get update
$ sudo apt-get install -y mongodb-org

$ sudo mkdir -p /data/db

# MongoDB - run
$ sudo service mongod start
$ sleep 7
$ netstat -tnlp

# MongoDB set user, set conf file
$ mongo admin --eval 'db.createUser({user: "test", pwd: "test", roles:["root"]});'
$ sudo sh -c 'echo "security:\n  authorization: enabled" >> /etc/mongod.conf'
$ sudo sed -i "s,\\(^[[:blank:]]*bindIp:\\) .*,\\1 0.0.0.0," /etc/mongod.conf

$ sudo service mongod stop
$ sudo service mongod start
$ sleep 5
$ netstat -tnlp

 

③ SSH 파이썬 라이브러리 설치 

# install flask
$ pip install flask

# install pymongo
$ pip install pyMongo

 

④ nohup 설정하기 : Git Bash(SSH 접속) 종료시에도 원격서버의 프로그램이 돌아가도록 설정

      - nohup 명령 + &(백그라운드) 명령을 통해  원격 접속 종료시에도 파일 실행 유지

# nohup 실행유지할 파일 &
$ nohup python app.py &

      - nohup 명령 또는 &(백그라운드) 명령을 통해  실행중인 파일 강제 종료 방법

# 강제 종료할 파일의 pid 값(프로세스 번호) 탐색 명령어
# ps -ef | grep '탐색파일명 '
$ ps -ef | grep 'app.py'

# 프로세스 강제 종료 명령어
# kill -9 [pid 값]
$ kill -9 21070
$ kill -9 21080

 

 

─ EC2 서버 세팅 후 퍼블릭 IPv4 주소를 통해 웹 페이지 접속하기 ─

포트포워딩을 통해 포트번호 :5000 생략 가능

 

 

 

[ 도메인 구매 & 연결하기 ]

 - 도메인

- 도메인 또는 도메인 네임(Domain name)은 사람이 외우거나 식별하기 힘든 IP주소로의 접속을 원할 때 식별의 용이성을

  높이거나 기억하기 쉽게 만들어주는 네트워크 호스트명을 의미함

-도메인 레지스트리는 도메인 네임의 종류에 따라 국제 인터넷 주소자원 관리기관(ICANN)과 해당 국가 기관으로부터

 승인을 받아, 일반 사용자들의 도메인 등록을 위임받는 역할을 하고 있음

도메인 구조

 

 - 가비아를 통해 도메인 구매

- 가비아 공식 홈페이지 : https://www.gabia.com/

- 가비아 홈페이지를 통해 도메인 구매

   ① 가비아 홈페이지를 통해 회원가입

   ② 가비아 홈페이지에서 등록을 원하는 도메인명 검색

체크박스 속 '원하는 도메인을 입력하세요'란에 입력 후 검색

   ② 사이트의 성격과 가격을 고려하여 원하는 도메인 선택 후 신청

이벤트로 연간 500원에 구매 가능한 .shop 도메인을 선택하였음

   ③ My가비아 페이지 접속

   ④ My가비아 > DNS 관리툴 선택

   ⑤ 본인의 가비아 등록 도메인의 DNS 설정 

DNS 관리툴 > DNS 설정

DNS 설정 > 레코드 수정

 

   ⑦ DNS 설정 > 레코드 수정 하기 

        - 임의의 호스트명 설정 후 '값/위치'란에 연결할 IP주소 입력 > 상태 확인 > 레코드 추가 > 저장

임의의 호스트 명

 

   ⑧ 연결된 도메인 확인

coding-gym.shop 페이지를 통해 접속 가능

 

 

[ OG 태그 설정 ]

- Open Graph Protocol (OGP) : 오픈 그래프 프로토콜이란 웹사이트의 HTML 문서 내 head > meta 태그 중

  OG 태그가 있는 태그들을 찾아내 보여주는 프로토콜

- OG (Open Graph) : HTML 문서의 메타 정보를 간단히 식별하기 위해 콘텐츠의 요약 내용을 시각화 하도록 설정

카카오톡 앱 내 링크 공유시 보여지는 OG

 

속성	설명	형식
og:title	표시할 웹사이트 제목	<meta property="og:title" content="웹 사이트 제목" />
og:description	표시할 웹사이트의 소개문	<meta property="og:description" content="소개문구" />
og:type	표시할 웹사이트 종류	<meta property="og:type" content="website" />
og:url	표시할 웹사이트 정식 URL	<meta property="og:url" content="URL 명" />
og:image	표시할 이미지	<meta property="og:image" content="{{ url_for('이미지 파일 경로(폴더 명)', filename='이미지 파일명') }}" />

 

- OG 캐시 초기화 : 초기 OG 태그 설정 후 인앱 혹은 웹사이트에서 해당 URL을 업로드(공유)할 경우 해당 캐시가 한동안 저장

  OG 태그 변경 시 저장된 캐시 데이터 초기화 필요

 └ 페이스북 og 태그 초기화 : https://developers.facebook.com/tools/debug/

      카카오톡 og 태그 초기화 : https://developers.kakao.com/tool/clear/og  

 

OG 태그 설정 후 카카오톡 앱 채팅 내 URL 링크 공유시 화면