왕초보 시작반 - 05주 개발일지
01. 내 프로젝트를 서버에 올리기
-
10) "웹서비스 런칭" 에 필요한 개념 소개
이제 내가 만든 프로젝트를 배포해봅니다. 배포는 누구나 내 서비스를 사용할 수 있게 하기 위해서 작업들이에요. 웹 서비스를 런칭하는 거죠!
-
웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줄 거에요.
-
언제나 요청에 응답하려면,
1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야해요. -
서버는 그냥 컴퓨터라는거 기억나시죠? 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있어요.
-
우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 겁니다.
-
[열 걸음 더 🏃] IP 주소와 포트
-
사실 우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있어요. 우리가 아는 URL 은 우리가 알아보기 쉽게 하는 등의 이유로 IP 주소를 알파벳으로 바꾼 거에요. 이렇게 변환해주는 시스템을 DNS 라고 합니다.
-
IP 주소(줄여서 IP라고 부릅니다)
: 컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소라고 생각하면 됩니다. 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호입니다. 서버는 하나의 주소를 가지고 있습니다.
-
포트(port)
: 하나의 IP에 여러 포트가 있습니다. 하나의 포트에 하나의 프로그램을 실행시킬 수 있습니다.
-
-
02. AWS 서버 구매하기
-
11) EC2 서버 구매하기
-
12) EC2 서버 종료하는 방법 (1년 후 자동결제 방지!)
-
13) EC2에 접속하기
-
14) 간단한 리눅스 명령어 연습하기
-
리눅스는 윈도우 같지 않아서, '쉘 명령어'를 통해 OS를 조작한다. (일종의 마우스 역할)
[가장 많이 쓰는 몇 가지 명령어]
-
팁! 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나옵니다.
ls: 내 위치의 모든 파일을 보여준다. pwd: 내 위치(폴더의 경로)를 알려준다. mkdir: 내 위치 아래에 폴더를 하나 만든다. cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다. cd .. : 나를 상위 폴더로 이동시킨다. cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기 rm -rf [지울 것]: 지우기 sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다. sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)
-
03. 서버 세팅하기
-
15) filezilla를 이용해서, 간단한 python 파일을 올려봅니다.
-
서버에 업로드 할 간단한 파일을 다운로드 받습니다.
-
파일질라 실행, 다음과 같이 설정
-
정보들을 입력하고, ok 누르면 서버의 파일들을 볼 수 있음
(Host: 내 EC2서버의 ip // User: ubuntu 로 입력)![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c91661f0-1274-4f35-b9c2-3a09879a0b09/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c91661f0-1274-4f35-b9c2-3a09879a0b09/Untitled.png)
-
마우스로 드래그 해서 파일을 업로드/다운로드하면 됩니다!
(자, 그럼 이제 간단한 파이썬 파일을 하나 만들어서 업로드 해볼까요?)![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/47a40685-1be7-421f-939f-0fdad19c7d81/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/47a40685-1be7-421f-939f-0fdad19c7d81/Untitled.png)
-
04. 원페이지쇼핑몰 업로드해보기
-
25) Robo3T를 이용해서, "내 컴퓨터에서"→"서버에 있는 mongoDB"에 접속하기
-
좌측 상단 빨간 상자 내 아이콘을 클릭합니다.
-
Create 클릭!
-
접속 정보를 세팅합니다.
-
상단 Authentication 탭을 클릭합니다.
-
Perform authentication 체크박스를 클릭합니다.
-
생성한 계정의 아이디와 비밀번호를 입력하고, 'save'를 클릭합니다.
-
-
-
26) 원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드해봅니다.
-
그 전에! MongoDB 접속 세팅을 바꿔주세요!
AWS의 MongoDB에 아이디와 비밀번호를 추가했으니, 우리의 pymongo에도 아이디와 비밀번호를 입력해주어야 합니다! 그래야 pymongo가 올바르게 DB에 접근할 수 있습니다.
app.py 파일을 열어서,
아래 처럼 가운데 한 줄을 바꿔주세요!-
[코드스니펫] - pymongo 계정 접속
```python client = MongoClient('mongodb://test:test@localhost', 27017) ```
아래와 같은 뜻이에요!
client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)
-
-
파일질라에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드합니다.
-
-
27) 완성본을 실행해봅니다.
-
실행하려고 시도하기
# home 디렉토리로 이동 cd ~ # 해당 폴더로 이동해서 아래 코드를 실행합니다. python app.py
-
에러가 나죠? 패키지를 설치하지 않았기 때문입니다.
# 설치하기 pip install pymongo
-
다시 실행해봅니다
python app.py
-
-
28) 접속해봅니다!
-
브라우저에서 접속하기
http://내AWS아이피:5000/
-
05. 포트포워딩
-
29) 포트 번호를 떼고 접속해봅니다!
-
30) 포트 번호 없애기 - 기본 개념
우리는 이미 포트포워딩 세팅을 해뒀기 때문에, 여기서는 개념만!
-
지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
-
http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.
-
포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용하겠습니다.
-
리눅스에서 기본으로 제공해주는 포트포워딩을 사용할 것입니다. 그림으로 보면 아래와 같습니다.
-
06. nohup 설정하기
-
31) SSH 접속을 끊어도 서버가 계속 돌게 하기
-
현재 상황
Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않고 있습니다. 그러나 우리가 원격접속을 끊어도, 서버는 계속 동작해야겠죠?
-
원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
# 아래의 명령어로 실행하면 된다 nohup python app.py &
-
서버 종료하기 - 강제종료하는 방법
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다 ps -ef | grep 'app.py' # 아래 명령어로 특정 프로세스를 죽인다 kill -9 [pid값]
-
다시 켜기
nohup python app.py &
-
-
32) SSH 접속을 종료한 뒤, 접속해봅니다!
-
브라우저에서 접속하기
http://내AWS아이피/
-
07. og 태그
-
37) og 태그 만들기
-
나홀로메모장에서 배웠던 og:image, og:title, og:description 태그 기억하시나요?
내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록,
미리 꾸며봅시다! -
static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 ~ 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있습니다.
- "내 사이트의 제목" 입력하기
- "보고 있는 페이지의 내용 요약" 입력하기
- 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
(사이즈 800x400인 이미지를 구글에서 검색!)
-
[코드스니펫] - og태그 넣기
<meta property="og:title" content="내 사이트의 제목" /> <meta property="og:description" content="보고 있는 페이지의 내용 요약" /> <meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />
-
참고! 이미지를 바꿨는데 이전 ogimage가 그대로 나와요!
그것은 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문입니다.
- 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
- 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
-
Author And Source
이 문제에 관하여(왕초보 시작반 - 05주 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dnwlsdl0419/왕초보-시작반-04주-개발일지-tlysykwd저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)