[패스트캠퍼스] 웹개발 강의 5주차 후기

마지막 주차 수업 내용

만든 서버 배포

 

#내일 배움 카드 #국비지원교육

 

---

1.  AWS

 

아마존에서 제공하는 클라우드 서비스

지금까지 했던 서버 만드는 일련의 과정을 AWS 안에 있는 컴퓨팅 컴퓨터 안에서 그대로 한다(몽고디비, 플라스크)

내 컴퓨터와 가상 컴퓨터 EC2를 연결. EC2를 이용해 서버를 구성해 어디서든 웹사이트에 접속 가능하도록 한다.

https://aws.amazon.com/ko/ec2/?did=ap_card&trk=ap_card 

아마존 클라우드 서버 호스팅 | Amazon Web Services

사이트 회원가입을 하고 나면 무료 EC2를 이용할 수 있다.

 

로그인을 하면 콘솔 홈 화면으로 갈 수 있는데, 이때 서비스> 컴퓨팅> EC2 메뉴로 들어간다

인스턴스를 추가하기 전에 오른쪽 위에 지역이 대한민국 서울로 되어있는지 확인이 필요하다

인스턴스란 하나의 컴퓨터를 말한다. 인스턴스 시작 버튼을 누르면 운영체제, 성능 등 여러 세부 설정으로 컴퓨터를 생성할 수 있다. 아마존 리눅스로 운영체제를 선택하고 계속 진행한다. 이때 키파일을 절대 잃어버리면 안 된다

 

파일 질라

https://filezilla-project.org/download.php

위 페이지에 접속해 다운로드하여야 한다. 가상 컴퓨터로 필요한 파일들을 옮기는 역할

 

ls : 폴더 이름을 보여주는 명령어

cd : 폴더를 이동하는 명령어

sudo python3 : 리눅스에는 파이썬 2와 3이 둘 다 있기 때문에 3이라고 명시

clear : 화면에 떠있는 코드들 다 지우고 새로 시작

 

sudo pip3 install flask Flask-PyMongo : 파이썬 3에서 플라스크와 몽고 db패키지 다운로드

 

몽고 DB 다운로드는 공식 홈페이지의 안내를 참고하면 좋다

https://www.mongodb.com/docs/v4.4/tutorial/install-mongodb-on-amazon/

Install MongoDB Community Edition on Amazon Linux — MongoDB Manual

 

sudo vim /etc/yum.r 누르고 tab : repos.d/까지 자동완성 됨. 그 뒤에 mongodb.repo 입력하고 엔터 입력하면 리눅스환경에서 텍스트를 편집할 수 있는 창으로 진입 가능.(뭔 소리지)

사이트에서 문자열 복사해야 하는 듯?

 

1) I 누르면 Insert라는 글씨가 뜸. 텍스트를 입력할 수 있다

2) 컨트롤 V 눌러서 앞에서 복사한 문자열 넣고 그 상태에서 아무런 텍스트도 누르지 말고 ESC를 누른다. 입력 모드 종료

3) 콜론(쉬프트+세미콜론) 누르면 아래 콜론 생기면서 명령어 입력 가능

4) 그 상태에서 wq 입력하고 엔터 누르면 파일 저장됨

 

(내용 나중에 더 추가)

 

---

2. nohup

아마존 aws 창을 닫아도 계속 백그라운드에서 실행되도록 하기 위한 기능

sudo nohup                               #명령어 있는지 확인하는 기능. 처음엔 비어있다.
sudo nohup python3 app.py &              #마지막에 꼭 &기호를 입력해야한다

두 번째 줄의 코드를 입력했을 때 네 자리 숫자가 나오면 성공

백그라운드에서 잘 실행 중이고, 관리 번호가 다음과 같다며 알려주는 방식인 듯

 

*도메인 연결하기

숫자로 연결하는 게 아니라 주소로 연결하기

도메인 등록은 실제로 돈이 들어가기 때문에 실습은 안 하고 참고만 한다

 

구글에 도메인 구매 검색하면 사이트가 많이 나온다. 수업에선 viaweb 사용.

구매 방법이나 연결 방법 자세히 알려주셨는데 어렵지 않아서 정리 안 함

---

3. OpenGraph

 

og태그라고도 한다. html파일의 head태그 안에 들어간다.

SEO(Search Engine Optimization), 검색 엔진 최적화를 위해 사용한다

웹사이트에서 어떤 내용을 담고 있는지 간략하게 설명해 주기 때문에 검색 엔진이 수집해 가기 쉽게 하며 SNS에 링크를 공유했을 때 이미지와 문구를 지정할 수도 있다

 

<meta property="title" content="김철수 강유미의 청첩장">
<meta propterty="descriptrion" content="오셔서 축복해주세요">
<meta property="image" content="/static/c.jpg">

<meta property="og:title" content="김철수 강유미의 청첩장">
<meta propterty="og:descriptrion" content="오셔서 축복해주세요">
<meta property="og:image" content="/static/c.jpg">

이런 식으로 meta 태그를 사용한다. 이 코드의 경우 웹사이트의 링크를 공유하면

미리 보기로 c.jpg 이미지가 출력되고 제목은 title과 같이 나오고 그 아래 작은 회색 글씨로 description이 나온다.

 

---

5주 차 수업 후기이자 최종 수업 후기

 

AWS로 인스턴스 만들고 몽고 DB연결하고 하는 부분이 지금까지의 강의를 통틀어서 가장 어려웠던 것 같다.

이 부분은 아직 제대로 이해를 못 한 것 같아서 나중에 복습권으로 다시 들어봐야겠다..ㅠㅠ

 

짧은 기간 동안 얻어 가는 게 정말 많은 수업이었다. 웹 페이지를 만들고 이게 실시간으로 변동이 되면서 여러 기능을 하도록 만드는 일이 어렵다는 걸 다시 느끼게 된 수업이었다.  프런트엔드와 백엔드가 무슨 차이인지도 모르고 시작한 수업인데, 둘 다 간략하게 배우면서 어느 쪽이 나와 더 잘 맞는지도 알아볼 수 있어서 좋았다. (깊게 들어가지 않고 넘어가는 부분이 많았지만, 초보 강의에서는 애초에 깊게 들어갈 수가 없으니 당연한 거라고 생각한다.)

 

일주일에 약 한두 시간 정도의 수업 시간 동안 짧지만 핵심적인 내용만 많이 들어있어서 좋았고, 꼼꼼하게 공부하면서 진도를 나가려니 훨씬 더 시간이 많이 소요되어서 절대 짧은 시간이 아니라는 걸 느꼈다. 짧은 기간 동안 간략하게 웹페이지 제작의 과정을 훑어볼 수 있는 수업이었다. 굳.