[웹개발 종합반] 5주차 개발일지 - (2) 원페이지 쇼핑몰

zzzzsb·2022년 3월 2일

Sparta

목록 보기

12/15

09. 내 프로젝트를 서버에 올리기

웹 서비스 배포

누구나 내 서비스를 사용할수 있게 하기위해 배포작업 필요함.

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

IP 주소와 포트

우리가 접속하는 컴퓨터에는 IP주소가 붙어있음.
우리가 아는 url은 이런 IP주소를 알파벳으로 바꿔준 것.(이런 시스템을 DNS라고 함)

IP 주소

컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소.

네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호이다.

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

포트(port)

하나의 IP에 여러 포트가 있다.

하나의 포트에 하나의 프로그램을 실행 시킬 수 있음.

10. AWS 서버 구매하기

EC2 서버 구매하기

EC2 콘솔페이지

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

인스턴스 = 컴퓨터 한대. 라고 생각
우리는 인스턴스를 사서 서버로 쓸것.

로그인 > 우측 상단 서울인지 확인 > 인스턴스 > 인스턴스 시작

리눅스 OS: 오픈소스(무료)
통상적으로 서버는 여러대의 컴퓨터 운영을 해야하기에, 라이센스비가 필요없는 오픈소스 OS를 사용함.
리눅스중 보편적 계열인 Ubuntu 사용할 예정
Ubuntu 18.04 버전 클릭 > t2.micro 클릭 > 검토 및 시작 > 시작하기

키페어 만든적이 없기 때문에 새 키 페어 설정하라는 안내 뜸.
키 페어?

우리가 인스턴스를 구매해 그 컴퓨터를 조작하고, 설치하고, 실행할텐데 그때 그 컴퓨터에 원격접속 할수 있는 키.
- AWS에서도 안찾아주기 때문에 잘 보관하고 있어야함.
키페어 생성 > 인스턴스 시작

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

무료기간 1년후 결제가 되기전에, 종료해야함.
대상 인스턴스에 마우스 우클릭 > 인스턴스 상태 > 중지 또는 종료 중 하나 클릭

EC2에 접속하기

SSH(Secure Shell Protocol)

다른 컴퓨터에 접속할 때 쓰는 프로그램.
다른 것들보다 보안이 상대적으로 뛰어남
접속할 컴퓨터에서 22번 포트가 열려있어야 접속 가능, AWS EC2의 경우, 이미 22번 포트 열려있음.

MacOS에서 AWS EC2 접속하기

1) 터미널 열기

2) 방금 받은 내 Keypair의 접근 권한 바꿔주기

sudo chmod 400 받은키페어를끌어다놓기

3) SSH로 접속하기

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS_인스턴스_퍼블릭IPv4주소

중간에 yes 입력해주면 아래처럼 터미널창 뜸.
ubuntu@ ~ 시작되어야 원격접속 된 상태!

간단한 리눅스 명령어 연습

리눅스는 '쉘 명령어'를 통해 OS 조작함.

[가장 많이쓰는 몇가지 명령어]

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

11. 서버 세팅하기

filezilla로, 간단한 python 파일 올려보기

filezilla는 구매한 원격컴퓨터에 내 파일 업로드/삭제 해주는 업로더 역할이라고 생각하면 됨.
filezilla 실행 > 맨 상단 좌측 아이콘 클릭 > New site > 프로토콜 SFTP로 변경 > 호스트에 내 인스턴스 퍼블릭 IPv4 입력 > 포트는 22로
로그온 유형 키 파일로 변경 > 사용자 ubuntu 입력 > 키파일은 아까 발급한 키페어파일로 선택 > 연결

위 정보들 다 입력하고, ok 누르면 서버 파일 볼 수 있음

마우스로 드래그해서 test.py 파일 업로드하기

파이썬 파일 실행해보기

EC2 콘솔창에서 아래와 같이 입력

# 실행. 콘솔창에 hello world!가 뜨는 것 확인
python3 test.py

서버환경 통일하기

initial_ec2.sh 파일 filezilla에 업로드하고, 터미널에 아래 코드 차례대로 입력

# 파일 권한 수정
sudo chmod 755 initial_ec2.sh

# 실행
./initial_ec2.sh

파이썬 파일 다시 실행해보기

python test.py

mongoDB 실행

mongo

[한 걸음 더] 서버 환경세팅 - 혼자 해보기

initial_ec2.sh 파일

# UTC to KST
sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

# 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
pip3 --version
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

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

1. 한국시간 세팅

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

EC2 컴퓨터의 시간대를 한국으로 맞추는 명령어

2. 파이썬(python3 -> python)

sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

python3 명령어를 python으로 사용할 수 있게 하는 명령어

3. 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

4. mongoDB 설치

4-1. mongoDB 설치코드

  wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -

  echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

  sudo apt-get update

  sudo apt-get install -y mongodb-org

4-2. mongoDB 실행하기

# 실행. 아무 반응이 없으면, 잘 실행된 것!
  sudo service mongod start

4-3. mongoDB 접속 계정 생성하기

만든 mongoDB를 외부에 열어주기 전에, 접속에 필요한 아이디/비밀번호 세팅 필요

mongo

입력후 좌측에 '>' 표시나오면 성공적으로 mongoDB에 접속한 것.
아래 명령어를 순차적으로 입력한다.

# admin으로 계정 바꾸기
use admin;

# 계정 생성하기
db.createUser({user: "test", pwd: "test", roles:["root"]});

# 나오기
exit

# MongoDB 재시작
sudo service mongod restart

4-4. mongoDB 외부에 열어주기

mongoDB는 디폴트로 내부에서만 접속을 허용하고 있음.
외부에서 접근 가능하도록 잠금 풀어주어야 함.
리눅스 자체 에디터 vim 사용
a를 누르면 입력모드, :wq 누르면 저장하고 나오기

sudo vi /etc/mongod.conf

# sudo: 관리자(SuperUser) 권한으로 다음을 실행
# => "관리자 권한으로 /etc 폴더 아래 mongod.conf 파일을 Vim으로 켜줘!"라는 뜻

위 명령어 실행 후 아래방향 화살표 키 누르면 다음과 같은 내용 보임

# 입력 모드 전환
i

붉은 박스 내용을 위처럼 바꿔줌.

# 내용 저장하고 에디터 종료하기. esc 누르고 다음 입력.
:wq

# 재시작
sudo service mongod restart

4-5. Robo3T 이용해서, "내컴퓨터" -> "서버에 있는 mongoDB" 접속하기

좌측 빨간상자 아이콘 클릭

Create 클릭

접속 정보 세팅

상단 Authentication 탭 클릭
1) Perform authentication 체크박스 클릭
2) 생성한 계정 아이디/비밀번호 입력하고 'save' 클릭

포트포워딩(80포드 -> 5000포트)

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

80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어

12. flask 서버를 실행해보기

flask 서버 실행해보기

filezilla를 통해 기초 flask 서버파일을 EC2에 업로드 한 후, 실행한다.

# 실행
python app.py

flask 패키지가 없다고 에러 발생, 패키지 설치해야함.

pip로 패키지 설치하기

pip는 파이썬 패키지를 쉽게 설치해주는 라이브러리

pip install flask
pip install pymongo

다시 flask 서버를 실행해보기

python app.py

크롬 브라우저 창에 아래와 같이 입력
localhost:5000 대신, 내 EC2 IP:5000 입력

http://[내 EC2 IP]:5000/

서버 실행되면, 크롬에서 접속해보기
아직 접속 X -> AWS에서 약간의 설정 더 필요함.

13. AWS에서 포트 열어주기

AWS에서 5000포트 열어주기

EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도, AWS EC2에도 자체적으로 포트 열고/닫을수 있게 관리하고 있음.
-> AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야함.
EC2관리 콘솔 > 보안 탭 > 보안 그룹 > 인바운드 규칙 편집

세가지 포트를 추가해보자.

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

5000포트: flask 기본포트

27017포트: 외부에서 mongoDB 접속을 위한 포트

다시 접속해보기

규칙저장후 접속
http://내아이피:5000
app.py 파일 수정해 올리면 진짜 프로젝트 되는 것.

flask 서버 종료

터미널에서 control + C

14. 원페이지쇼핑몰 업로드해보기

Robo3T를 이용해, "내 컴퓨터" 에서 -> "서버에 있는 mongoDB"에 접속하기

좌측 상단 맨 왼쪽 아이콘 클릭 > Create > 접속 정보 세팅
상단 Authentication 탭 클릭 > Perform authentication 체크박스 클릭 > 아이디/비번 입력 > 'save' 클릭

원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드하기

💡 AWS의 MongoDB에 아이디/비밀번호를 추가했기 때문에, pymongo에도 아이디/비밀번호를 입력해야함. 그래야 pymongo가 올바르게 DB에 접근할 수 있음

client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)

app.py에 위 코드 변경해줌
homework 폴더의 app.py파일, templates폴더, static 폴더 > filezilla에서 EC2 인스턴스의 home/ubuntu 폴더에 업로드

완성본 실행해보기

# 패키지 설치하기
pip install pymongo

# 해당 폴더로 이동해서 아래 코드를 실행
python app.py

접속해보기

http://내AWS아이피:5000/

브라우저에서 접속하려면 위 링크로 접속.

15. 포트포워딩

포트번호를 떼고 접속하면?

http://내AWS아이피/

→ 아까 포트포워딩 명령어로 해둬서 접속은 됨.

포트번호 없애기 - 기본 개념

지금은 5000포트에서 웹 서비스가 실행되고 있음. 그래서 매번 :5000 이라고 뒤에 붙여줘야함.
뒤에 붙는 포트번호를 없애려면 어떻게 해야할까?
http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결됨.
포트번호를 입력하지 않아도 자동으로 접속되기 위해, 80포트로 오는 요청을 5000포트로 전달되게하는 포트포워딩(port forwarding)을 사용할 것.

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

리눅스에서 기본으로 제공해주는 포트포워딩 사용했음.

16. nohup 설정하기

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

현재 맥의 터미널을 종료하면(=SSH 접속을 끊으면), 프로세스가 종료되면서 서버가 돌아가지 않음.
하지만 원격접속이 끊겨도, 서버는 계속 동작해야함.

nohup python app.py &

원격 접속을 종료하더라도 서버가 계속 돌아가게 하는 명령어
위 명령어 실행하고 터미널 종료해도, 웹사이트 잘 실행됨.

서버 종료하기 - 강제종료하는 방법

# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

23840, 23850 프로세스 강제종료 해야함.

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]

17. 도메인 구입하기

도메인 구입/연결

도메인을 구매한다는 것은, 네임서버를 운영하는 업체에 IP와 도메인 매칭 유지비를 내는 것.
업체 어디든 상관 없지만, 한국의 '가비아'라는 회사에서 구입 예정
https://my.gabia.com/service#/
로그인 > My가비아 > DNS 관리툴 > 도메인 우측 설정 > 레코드 설정 > 레코드 추가
호스트 이름에 @, IP주소에 내 EC2 IP주소 입력 > 확인 > 저장
네임서버에 내 도메인-IP가 매칭되는 시간이 필요하기에, 10분정도 기다려보기

IP주소로 접근해보기

http://내AWS아이피/

먼저 내 IP주소로 flask 서버 잘 돌고있는지 확인필요

http://내도메인/

시간 텀 두고, 내 도메인으로 접근하면 접속 잘 됨!

18. og태그

og 태그 만들기

내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록 꾸며보기

👉 og태그 적용하기
1. "내 사이트의 제목" 입력하기
2. "보고 있는 페이지의 내용 요약" 입력하기
3. 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
(사이즈 800x400인 이미지를 구글에서 검색!)

프로젝트 HTML의 ~ 사이에 아래 내용 작성하면 og태그를 개인 프로젝트에 사용 가능.

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />

og태그 적용화면

만약 이미지 바꿨는데 이전 og:image 그대로 나온다면?
-> 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문

참고링크

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

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

19. 5주차 숙제

http://zzzzsb.shop/

zzzzsb

성장하는 developer

이전 포스트

[웹개발 종합반] 5주차 개발일지 - (1) 마이 페이보릿 무비스타

다음 포스트