🎯원페이지쇼핑몰 업로드하기🎯
1. 원페이지쇼핑몰 업로드하기
1-1) Robo3T를 이용해서, "내 컴퓨터에서" → "서버에 있는 mongoDB"에 접속하기
💻 좌측 상단 File 아래에 위치한 아이콘(컴퓨터모양) 클릭
↓ Create 클릭
↓ 접속 정보 세팅하기
↓ 상단 Authentication 탭 클릭
① Perform authentication 체크박스 클릭
② 생성한 계정의 아이디와 비밀번호 입력 후,save클릭
1-2) 원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드하기
-
그 전에! MongoDB 접속 세팅을 바꿔주기
💡 AWS의 MongoDB에 아이디와 비밀번호를 추가했으니, 내 pymongo에도 아이디와 비밀번호를 입력해주어야 한다. 그래야 pymongo가 올바르게 DB에 접근할 수 있다.
app.py파일을 열어서, 아래처럼 가운데 한 줄을 바꿔주기!!pymongo 계정 접속
client = MongoClient('mongodb://test:test@localhost', 27017) -
filezilla에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드한다.
1-3) 완성본을 실행해보기
- 실행하려고 시도하기
# home 디렉토리로 이동
cd ~
# 해당 폴더로 이동해서 아래 코드를 실행합니다.
python app.py- 에러가 난다. 패키지를 설치하지 않았기 때문이다.
# 설치하기
pip install pymongo- 다시 실행해본다.
python app.py1-4) 접속해보기
- 브라우저에서 접속하기
http://내AWS아이피:5000/2. 포트포워딩
2-1) 포트 번호를 떼고 접속해보기
http://내AWS아이피/2-2) 포트 번호 없애기 - 기본 개념
- 지금은 5000포트에서 웹 서비스가 실행되고 있다. 그래서 매번
:5000이라고 뒤에 붙여줘야 한다.- http 요청에서는 80포트가 기본이기 때문에, 굳이
:80을 붙이지 않아도 자동으로 연결이 된다.- 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워
딩(port forwarding)을 사용해야 한다.- 리눅스에서 기본으로 제공해주는 포트포워딩을 사용하면 된다.
3. nohup 설정하기
3-1) SSH 접속을 끊어도 서버가 계속 돌게 하기
-
현재 상황
: Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않고 있다.
🎯 그러나 원격접속을 끊어도, 서버는 계속 동작해야 하는데.. -
원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
# 아래의 명령어로 실행하면 된다
nohup python app.py &- 서버 종료하기 - 강제종료하는 방법
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]- 다시 켜기
nohup python app.py &3-2) SSH 접속을 종료한 뒤, 접속해보기
- 브라우저에서 접속하기
http://내AWS아이피/4. 도메인 구입하기
4-1) 도메인 구입/연결
- 도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것이다. 한국 또는 글로벌 업체 어디든 상관 없지만, 한국의 '가비아'라는 회사에서 구입해보겠다.
가비아 링크: https://my.gabia.com/service#/
4-2) 구입 후 우측상단에 위치한 'My가비아' 클릭
↓ DNS 관리툴 클릭
↓ 도메인 연결 클릭
↓ DNS 설정 클릭
↓ 호스트 이름에 @, IP주소에 IP주소를 입력
4-3) 10분 정도 기다리기
- 네임서버에 내 도메인-IP가 매칭되는 시간이 필요하다.
4-4) IP주소로 접근해보기
- 내 IP주소로 지금 flask 서버가 잘 도고 있는지 먼저 확인해본다.
http://내AWS아이피/- 약간의 시간을 가진 후, 내 도메인으로 접근하면, 접속이 된다.
http://내도메인/5. og 태그
5-1) og 태그 만들기
-
나홀로메모장에서 배웠던
og:image,og:title,og:description태그💡 내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록, 미리 꾸며보기
-
static폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의<head>~</head>사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있다.① "내 사이트의 제목" 입력하기
② "보고 있는 페이지의 내용 요약" 입력하기
③ 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
(사이즈 800*400인 이미지를 구글에서 검색!)
-
og태그 넣기
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />💡 참고! 이미지를 바꿨는데 이전 ogimage가 그대로 나오는 경우
→ 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문에 그렇다. 그러므로 아래 링크에 들어 og 태그 초기화를 해주어야 한다.
✅ 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
✅ 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
