01. 인터넷 서버 배포 소개
우리가 만든 웹사이트를 보여주고 싶을 때,
모두가 들어올 수 있는 공개된 환경에서 서비스 하는 것이 배포이다.
이때 다양한 방법이 있는데, 클라우드, 서버 환경 구성 등등이 있다.
우리는 AWS를 이용해서 해볼 것인데, 이는 AWS안에 있는 어떤 가상 컴퓨터 안에서 한다는 의미이다.
(EC2, 클라우드의 가상 서버)
= 가상의 컴퓨터를 할당받아서 개발을 위한 설치(몽고db, 파이썬 설치)를 진행한 후 똑같이 실행하고,
이는 공개된 컴퓨터 이므로 들어갈 수 있는 주소도 연결할 것이다.
: 우리는 네이버 등과 같은 주소 도메인(www.naver.com)을 만들고
AWS에 있는 EC2를 이용해서 서버를 구성하고,
둘을 연결하여 어디서든지 내가 만든 웹사이트를 접속할 수 있게끔 구성할 것이다.
02. aws 서버 준비하기
: aws 가입하기
1) 먼저 aws에 가입을 해야 한다.
2) 이때 결제 정보 등이 입력되는 게 정상이니 가입한다.
3) 로그인이 되었다면 서비스 - 컴퓨팅 - EC2 누르기
4) 지역 버튼을 눌러서 서울로 만들어 주기 (활성화)
나중에 aws를 들어갈때에도, 지역변경은 상시로 해준다.
메뉴 살펴보기
인스턴스를 눌러보자.
이때 인스턴스란?
하나의 컴퓨터라고 생각하면 된다.
즉 인스턴스 시작이란 = 하나의 컴퓨터를 만드는 것이다.
1) 인스턴스 시작
: 어떤 컴퓨터를 만들 건지 설정하기
1-1) 애플리케션 및 OS 이미지
어떤 운영체제 (윈도우, 우분투 등) 를 선택하여 설치해달라고 요청
1-2) 인스턴스 유형
CPU 메모리 등 컴퓨터의 성능 선택 (성능당 요금이 존재하며, 각각 다르다.)
1-3) 키페어 (암호) 설정
이 키페어 부분은 암호에서 중요한 부분이다. 절대 누군가에게 암호를 주지도 말고, 잘 가지고 있기!
1-4) 네트워크 설정
컴퓨터 사용할 때 인터넷 선을 꼽는 것과 동일하다. (=와이파이 연결, 네트워크 만들기 설정)
1-5) 스토리지 구성 (저장)
- 몇 기가를 쓸 건지 설정할 수 있다.
- SSD와 HDD 와 같은 종류도 선택할 수 있다.
= 우리가 pc를 만들 때 필요한 것들을 선택해서 만들 수 있다. (하나의 PC 만들기)
2) 네트워크 및 보안
: 가상으로 PC를 만들어주는데, 공개된 곳에(주소) 있어야 접속이 가능하다.
2-1) 탄력적 IP주소
IP주소란?
우리가 처음에 살펴보았던 네 개의 숫자로 이루어진 주소 이다.
이때 IP를 하나 할당받아서 우리가 만드는 컴퓨터에 부여하는 것으로,
: 그렇기 때문에 주소 할당이라는 기능이 필요하게 되는 것이다.
: pc를 만들고 / 필요한 프로그램 설치 하고 / IP주소를 연결하고
그 다음 IP와 DNS(도메인)과 연결하면 되는 것이다!
3) 이제 가상의 PC 만들어보기 (인스턴스 시작)
3-1) 이름 변경
3-2) 운영체제
: 가장 기본이 되는 Amazon Linux 사용, 이미지도 기본값 사용하기
3-3) 인스턴스 유형도 마찬가지로 기본값 사용
3-4) 키 페어 : 가상의 서버에 접속할 때 사용하는 값
새 키 페어를 생성하기
우리는 PuTTy라는 프로그램을 이용해서 접속할 것이므로, ppk 선택
이름은 편한대로 만든다
이때, 만드는 순간 파일이 다운로드 되는데 이 파일은 잃어버리면 서버에 접속할 수 없으므로 주의
3-5) 네트워크 설정
체크박스 살펴보기
SSH란 우리가 컴퓨터에 접속할 때 쓰는 방식이다. (기본적으로 체킹)
: 우리가 이 컴퓨터(서버)를 통해 웹사이트를 제공할 것이므로 나머지 두 개도 모두 체크
3-6) 스토리지 구성
: 기본값 그대로 사용
이렇게 마무리 했으면, 시작을 눌러서 인스턴스를 시작하자!
4) 인스턴스로 가서 새로고침
실행중으로 뜨면, 이 인스턴스에 접속할 수 있다!
이때 1) ppk 파일을 통해서도 연결할 수 있고
2) 웹사이트에서의 연결 버튼을 눌러서 연결도 가능하다.
4-1) 연결을 누르면 기본 정보가 나오고, 이제 연결을 다시 누른다.
5) 가상의 모니터가 설정되고, 명령어를 입력할 수 있는 화면이 나오게 된다.
이제 연결이 잘 되었으니, 이 환경에서 프로그램 설치를 하고 프로그램 실행도 할 것이다.
03 서버에 프로젝트 배포하기
"모바일 청첩장을 배포할 예정"이다.
이때 배포를 하려면 다른 주소로 들어가져야 하므로, 코드에서 변경한다.
app.run(host='0.0.0.0', port='80')
0.0.0.0 이 있는 주소는 모든 주소를 의미, 즉 모든 주소로 접속할 수 있다.
우리가 웹사이트를 이용하는데 기본적으로 사용되는 port가 80 port이다.
그래야 뒤에 port번호를 따로 기입하지 않더라도 문제가 없다고 한다.
1) 파일 질라 이용하기
: filezilla 다운로드 및 설치하기
2) aws 인스턴스에서, aws 퍼블릭 IP 복사
3) 파일질라로 옮기기
[사이트 관리자]
사용할 프로토콜 (SFTP)로 변경
호스트 : aws 퍼블릭 IP 넣기
로그온 유형 : 키 파일
사용자 : ec2-user
키 파일 : 우리가 인스턴스를 만들 때 다운로드 했던
(ppk) 파일 첨부
<연결, 확인 누르기>
작성한 코드 옮기는 법 : 드래그 앤 드롭 (왼쪽- 오른쪽)
가져온 폴더 이름도 변경이 가능하다.
우리는 가져온 폴더를 fc라고 변경한다.
4) 인스턴스에 연결
인스턴스 상세페이지의 오른쪽 상단 연결 버튼 클릭,
그 상태 그대로 연결 버튼 누르기
그러면 검정화면이 뜬다 (리눅스)
5) 확인하기
ls : 현재 있는 폴더나 파일을 보여줌
cd : 폴더를 이동할 때 사용하는 명령어 (change directory)
cd fc : fc로 폴더로 들어가라
clear : 지금까지 사용한 화면을 지워줌
6) 파이썬 실행방법
방법: sudo 라는 관리자 명령어를 사용하여 python을 실행할 것이다.
단, 우리가 현재 쓰고 있는 리눅스 환경의 경우
python2 버전과 python3 버전이 같이 설치되어 있으므로
python3을 명시해서 실행해준다. (= pip도 마찬가지이므로 pip3라 쓴다.)
7) 패키지 설치
sudo pip3 install flask Flask-PyMongo
8) 몽고db 설치
: mongoDB 홈페이지
TIP🤖
vim 명령어를 사용할 때는 강의에서 사용하는 ESC, 콜론 등의 키를 순서에 맞춰 입력해야 한다.
sudo vim /etc/yum.repos.d/mongodb.repo
이때 yum.r까지 적고 tab을 누르면 빠르게 작성가능하다.
입력 후 엔터하면 아무런 메시지도 나오지 않는다.
지금 나온 것은 리눅스 환경에서
텍스트 파일을 편집할 수 있는 창이다.
i(혹은 a)를 누르면 하단이
-- INSERT --라고 변경된다.
= 내가 텍스트를 입력할 수 있는 상태
이제 여기서
1단계를 부분을 복사한 걸 붙여넣기한다.
이제 ESC를 눌러서 나오고, 그 상태에서 : (Shift와 ;) 을 누른다.
그러면 아래에 콜론:이 생기면서 명령어를 입력할 수 있게 된다.
이때 wq 를 쓰고 엔터를 하면 저장된다.
그 다음 다시 홈페이지로 가서 2단계를 복사해서 붙여넣기를 하면, 자동으로 실행이 된다.
이제 몽고 db 설치는 끝!
9) 몽고 db 실행
아까와 같이 홈페이지로 가서 쭉 내리면, start 하는 방법이 있다.
이를 그대로 인스턴스에 적으면 된다.
sudo systemctl start mongod
이제 정상적으로 몽고db 가 실행되었는지 확인한다.
sudo systemctl status mongod
이때 화면에 active running이 나오면 잘 되고 있는 것이다.
10) 만든 프로그램을 실행해보자
sudo python3 app.py
실행 후에, ip주소들이 나오면 상세 페이지에 나온 자신의 퍼블릭 ip를 복사해 브라우저에서 실행해보자.
실행이 되면, 배포 완료!
04. 백그라운드 실행에 대한 이해
아까 실행한 인스턴스를 Ctrl C를 눌러 종료하고
브라우저에 가면 아까 실행되던 프로젝트가 이제 보이지 않는다.
but, 웹 사이트는 원래 계속 보여야 한다.
우리가 인스턴스 창을 끄더라도 실행이 될 수 있도록
백그라운드에서 실행하는 방법이 필요하다.
: 우리는 nohup을 사용할 것이다.
인스턴스에 입력하기
sudo nohup python3 app.py &
TIP🤖
명령어 마지막에 & 기호를 잊지말고 입력하기
엔터를 누르면 뭔가 뜨지는 않지만,
브라우저를 새로고침 하면 잘 실행이 된다.
다시 인스턴스를 살펴보면 파란색 숫자가 보이는데
이는 프로그램이 잘 실행되고 있음을 알려주는 것이다.
: 잘 실행되었고, 실행된 프로그램을 이러한 숫자로 관리하고 있음을 보여주는 것이다.
05. 도메인 연결하기
숫자로 접속하는 것이 아닌, 주소로 연결하고자 할 때 필요한 것이 주소이다.
그런데 도메인은 가격이 드는데, 이와 관련한 사이트들이 많다. (후이즈, 카페24 등등)
강의에서는 viaweb에서 설정하는 것을 보고, 나중에 도메인을 하나 선정해서 연결해보면 된다.
TIP🤖 이때 도메인은 누군가가 먼저 쓰고 있으면, 쓸 수 없다.
도메인을 고른 후에
1) 부가서비스의 고급네임서버관리(DNS 관리)에서 2) 구매한 도메인(혹은 가지고 있는 도메인) 클릭,
3) A레코드를 선택한다.
만약 우리가 도메인을 연결한다면
1) 어떤 도메인을 선택
2) 그 도메인을 어떤 IP에 연결할 것인지 작성
: 이때 웹사이트를 연결할 때 (서버 주소를 연결할 때) 사용하는 것은 A타입(레코드 관리)이다.
TIP🤖 도메인에 서버주소를 연결할 때는 A레코드에 주소를 입력하기
3) 또한 도메인을 구매했다면, 도메인 앞에 다른 문자열을 붙일 수 있다. (도메인 연장)
ex. naver.com = www.naver.com 이며 //이는 blog.naver.com 과는 다르다.
이처럼 내가 구매하는 도메인은 뒤에 있는 것이 내가 구매한 도메인이며,
그 주소 앞에 내가 필요한 서비스마다 그때 그때 마음대로 붙여서 사용할 수 있다.
= 앞에 문자열을 붙여서 다른 도메인을 만들어 낼 수도 있다.
4) 도메인 추가하기
0맨 하단에서, 1) 도메인 주소 앞에 문자열을 넣고 (fc2022)
2) IP에는 이번에 만든 프로젝트의 IP를 넣어 추가한다.
브라우저에서 fc2022~ 라는주소를 입력하면, 잘 들어가진다.
도메인 연결 완료!
06. OG 살펴보기 (오픈그래프)
홈페이지에서 head 태그 살펴보기
[meta 태그 중에서도 og 태그 & SEO ]
head에는 개발에 필요한 것 뿐만 아니라, meta 태그에 여러 정보들이 같이 들어가 있다.
(제목, 내용 등등)
이런 정보들은 왜 필요한가?
SEO는 검색엔진 최적화
: 검색 엔진에 내가 만든 사이트가
잘 나올 수 있게 만드는 작업을 의미
ex.
내가 네이버를 검색했을 때 내가 만든 웹사이트가 바로 메인에 뜨려면 노력이 필요한데,
그 중 하나가 og 태그이다.
og태그는
1) 만든 웹사이트에서 어떤 내용을 담고 있는지를 간략히 소개하는 역할을 한다.
이때 검색엔진은 네이버가 될 수 도 있고, 구글이 될 수도 있다.
검색 엔진들은 나의 웹사이트를 보고 어떤 사이트인지 미리 알아갈 수 있다.
잘 만든 웹사이트, 혹은 필요한 정보가 있는 웹사이트인지를 파악하고 수집해가는 것이다.
== 검색엔진 결과에 나오는 것이다.
2) SNS에 공유했을 때 나오게 해주는 것
만약 카카오톡 등에 공유했을 때, 띄우고 싶은 정보나 이미지가 있으면
이를 og 태그에 담아서 보이게 (설정) 할 수 있는 것이다.
즉, SEO를 위해서도 OpenGraph (OG)가 중요하고,
SNS 등에 공유할 때에도 중요하다는 것이다.
07 . OG 적용하기 (오픈그래프)
코드 재수정 후에 배포할 예정이다.
1) VScode로 들어가기
2) index.html 에서 meta 태그 추가하기
<meta property="title" content="">
<meta property="description" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
이때, og 있는 부분과 없는 일반 부분 만들기
og 이미지 태그 추가
<meta property="image" content="">
<meta property="og:image" content="">
3) 그 안에 내용 추가하기
<meta property="title" content="구름과 마린의 청첩장">
<meta property="description" content="오셔서 축복해주세요.">
<meta property="image" content="/static/garo2.jpg">
<meta property="og:title" content="구름과 마린의 청첩장">
<meta property="og:description" content="오셔서 축복해주세요.">
<meta property="og:image" content="/static/garo2.jpg">
4) 파일질라로 수정된 파일 옮기기
템플릿 코드만 수정했다면, 같은 파일에 덮어쓰기
5) 다 옮겨졌으면, AWS에서 재시작하기
5-1) AWS 인스턴스 연결 - 연결 버튼
ps -ef | grep python3
= 현재 실행 중인 프로그램 중에서, python3이랑 일치하는 프로그램 리스트가 나온다.
5-2) 이제 강의에서 나온 5128 부분을 종료하기 (숫자는 개인마다 다르다.)
sudo kill -9 5128
5-3) 그리고 ps -ef | grep python3 로 다시 리스트를 보면, 없어졌다.
5-4) 같이 나오는 5129 부분도 종료해준다.
5-5) 종료가 되었으면, 이제 다시 시작한다.
5-6) 먼저 프로젝트 폴더로 이동한다.
cd fc
5-7) 그 다음 sudo nohup python3 app.py &
TIP🤖 만약 키나 값을 잘못 눌렀다면, ctrl C 를 눌러서 종료 후 시작해준다.
TIP🤖 nginx 추가하기 (중요)
허용되지 않은 ip를 차단하는 문지기가 생긴다.
이를 설치한 이후에는, allowed ips들을 추가해주어서 허용한 ip들만 들어올 수 있게 하는 과정이 필요하다.
1) 인스턴스에 allowed-ips에 추가
cd /etc/nginx
sudo vi allowed-ips
2) allow ip주소 창이 나왔을 때 명령어들 (not insert 모드)
a버튼, i버튼 둘다 입력은 되는건데 a는 다음에 쓸 수 있게 입력되고,
i버튼은 그 상태 그대로에서 입력된다.
x는 한글자씩 지워지게 하고,
dd는 한 줄이 지워지게 한다.
3) 저장하기 & 덮어쓰기
:wq!
== write , quit, 덮어쓰기(!)
4) 제거하기
rm allowed-ips
= 잘못저장하면 없애기, 그리고 yes 눌러서 삭제진행하기.
이렇게 하면, ngnix 설치도 완료되었다.
스터디와 소감은 다음 페이지에 이어서 쓰기!
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL😶🌫️] FastCampus' 카테고리의 다른 글
| [Let's TIL✍️] 코딩 18 : 웹개발 왕초보 과정 1기를 마치며 (0) | 2022.09.05 |
|---|---|
| [Let's TIL✍️] 코딩 18 : 5 Week_ 스터디 (0) | 2022.09.04 |
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (2) & 스터디 (0) | 2022.09.04 |
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (1) & 스터디 (0) | 2022.09.03 |
| [Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : 당당마켓 마무리 (4&5) (2) | 2022.09.03 |
